icon-select - npm Package Compare versions

Comparing version 0.0.1 to 1.1.0

bundles/icon-select.umd.js

@@ -32,2 +32,3 @@ (function (global, factory) {
         this.multiselect = false;
+        this.showIconName = false;
         this.configData = [];
@@ -247,3 +248,3 @@ this.displayItems = [];
                 selector: 'i-select',
-                template: "<div class=\"i-select\" [id]=\"configID\">\n    <div class=\"selected-icon\">\n        <div class=\"select-icon-block\"\n            [style.background]=\"config.selectedItem ? (config.selectedItem.value | CSSImage:true)  : ''\"></div>\n        <div class=\"fa-li fa fa-spinner fa-spin select-icon-spin3\" *ngIf=\"config.loading\"></div>\n    </div>\n    <a href=\"#\" class=\"i-select-button\"\n        (click)=\"popIcons($event)\"\n        (keyup)=\"keyboardTracker($event)\" >\n    <span class=\"off-screen\" id=\"{{configID}}name\" [textContent]=\"name\"></span>\n    <span class=\"select-icon-down-dir\"></span>\n    </a>\n</div>\n<div class=\"i-select-popup\" [style.display]=\"config.open ? 'block':'none'\" >\n    <div class=\"i-select-search\" (click)=\"searchInput.focus()\" *ngIf=\"searchEnabled\">\n        <input type=\"text\" placeholder=\"placeholder\" #searchInput\n            class=\"icons-search-input\"\n            [class.focused]=\"config.isFocused\"\n            (focus)=\"config.isFocused=true\"\n            (blur)=\"config.isFocused=false\"\n            (keyup)=\"performSearch($event, searchInput.value)\" />\n        <div class=\"select-icon-search\" #searchIcon [class]=\"config.isSearch ? 'select-icon-cancel' : 'select-icon-search'\"></div>\n    </div>\n    <div class=\"clear-fix\"></div>\n    <div role=\"list\" attr.aria-nameledby=\"{{configID}}name\" class=\"select-icons-container\" #iconContainer>\n    <div\n        role=\"listitem\"\n        class=\"select-box\"\n        *ngFor=\"let item of displayItems; let i = index\">\n        <div  [class.highlight-icon]=\"highlightIndex==i\"\n            [class.cover]=\"!true\" [title]=\"showIconName ? '':'item.name'\"\n            [style.background]=\"item.value | CSSImage:true\"\n            (click)=\"selectIcon(i)\"><span class=\"off-screen\" [textContent]=\"item.name\"></span></div>\n    </div>\n    </div>\n    <div class=\"icons-select-error\" *ngIf=\"config.hasError\"><div class=\"select-icon-block\" data-select-value=\"select-icon-block\"></div></div>\n    <div class=\"i-select-footer\" *ngIf=\"config.showFooter\">\n    <div class=\"i-select-arrows\">\n        <div class=\"fa fa-angle-left\"\n            (click)=\"prev($event)\"\n            [class.disabled]=\"config.currentPage==1\">\n            <span class=\"prev\" [textContent]=\"'previous'\"></span>\n        </div>\n        <div class=\"fa fa-angle-double-left\"\n                (click)=\"first($event)\"\n                [class.disabled]=\"config.currentPage==1\">\n            <span class=\"first\" [textContent]=\"'first'\"></span>\n        </div>\n        <div class=\"i-select-pages\"><span [textContent]=\"config.currentPage + ' / ' + config.totalPage\"></span></div>\n        <div class=\"fa fa-angle-double-right\"\n                (click)=\"last($event)\"\n                [class.disabled]=\"config.currentPage==config.totalPage\">\n            <span class=\"last\" [textContent]=\"'last'\"></span>\n        </div>\n        <div class=\"fa fa-angle-right\"\n                (click)=\"next($event)\"\n                [class.disabled]=\"config.currentPage==config.totalPage\">\n            <span class=\"next\" [textContent]=\"'nextPage'\"></span>\n        </div>\n    </div>\n    </div>\n    <div class=\"name\" *ngIf=\"showIconName\" [textContent]=\"config.selectedItem ? config.selectedItem.name : ''\"></div>\n</div>\n",
+                template: "<div class=\"i-select\" [id]=\"configID\">\n    <div class=\"selected-icon\">\n        <div class=\"select-icon-block\"\n            [style.background]=\"config.selectedItem ? (config.selectedItem.value | CSSImage:true)  : ''\"></div>\n        <div class=\"fa-li fa fa-spinner fa-spin select-icon-spin3\" *ngIf=\"config.loading\"></div>\n    </div>\n    <a href=\"#\" class=\"i-select-button\"\n        (click)=\"popIcons($event)\"\n        (keyup)=\"keyboardTracker($event)\" >\n    <span class=\"off-screen\" id=\"{{configID}}name\" [textContent]=\"configName\"></span>\n    <span class=\"select-icon-down-dir\"></span>\n    </a>\n</div>\n<div class=\"i-select-popup\" [style.display]=\"config.open ? 'block':'none'\" >\n    <div class=\"i-select-search\" (click)=\"searchInput.focus()\" *ngIf=\"searchEnabled\">\n        <input type=\"text\" placeholder=\"placeholder\" #searchInput\n            class=\"icons-search-input\"\n            [class.focused]=\"config.isFocused\"\n            (focus)=\"config.isFocused=true\"\n            (blur)=\"config.isFocused=false\"\n            (keyup)=\"performSearch($event, searchInput.value)\" />\n        <div class=\"select-icon-search\" #searchIcon [class]=\"config.isSearch ? 'select-icon-cancel' : 'select-icon-search'\"></div>\n    </div>\n    <div class=\"clear-fix\"></div>\n    <div role=\"list\" attr.aria-nameledby=\"{{configID}}name\" class=\"select-icons-container\" #iconContainer>\n    <div\n        role=\"listitem\"\n        class=\"select-box\"\n        *ngFor=\"let item of displayItems; let i = index\">\n        <div [class.highlight-icon]=\"highlightIndex==i\"\n            [class.cover]=\"!true\" [title]=\"showIconName ? '':item.name\"\n            [style.background]=\"item.value | CSSImage:true\"\n            (click)=\"selectIcon(i)\"><span class=\"off-screen\" [textContent]=\"item.name\"></span></div>\n    </div>\n    </div>\n    <div class=\"icons-select-error\" *ngIf=\"config.hasError\"><div class=\"select-icon-block\" data-select-value=\"select-icon-block\"></div></div>\n    <div class=\"i-select-footer\" *ngIf=\"config.showFooter\">\n    <div class=\"i-select-arrows\">\n        <div class=\"fa fa-angle-left\"\n            (click)=\"prev($event)\"\n            [class.disabled]=\"config.currentPage==1\">\n            <span class=\"prev\" [textContent]=\"'previous'\"></span>\n        </div>\n        <div class=\"fa fa-angle-double-left\"\n                (click)=\"first($event)\"\n                [class.disabled]=\"config.currentPage==1\">\n            <span class=\"first\" [textContent]=\"'first'\"></span>\n        </div>\n        <div class=\"i-select-pages\"><span [textContent]=\"config.currentPage + ' / ' + config.totalPage\"></span></div>\n        <div class=\"fa fa-angle-double-right\"\n                (click)=\"last($event)\"\n                [class.disabled]=\"config.currentPage==config.totalPage\">\n            <span class=\"last\" [textContent]=\"'last'\"></span>\n        </div>\n        <div class=\"fa fa-angle-right\"\n                (click)=\"next($event)\"\n                [class.disabled]=\"config.currentPage==config.totalPage\">\n            <span class=\"next\" [textContent]=\"'nextPage'\"></span>\n        </div>\n    </div>\n    </div>\n    <div class=\"name\" *ngIf=\"showIconName\" [textContent]=\"config.selectedItem ? config.selectedItem.name : ''\"></div>\n</div>\n",
                 styles: [":host *{\n  margin:0;\n  padding:0;\n  border:0;\n  vertical-align:baseline; }\n:host{\n  display:block;\n  text-align:left;\n  vertical-align:middle;\n  margin:2px 0; }\n  :host .off-screen{\n    display:block;\n    text-indent:-9999px;\n    width:0;\n    height:0; }\n  :host .select-box{\n    background-color:#ccc;\n    background-size:contain;\n    display:inline-block;\n    margin:2px;\n    width:60px;\n    line-height:42px;\n    text-align:center;\n    cursor:pointer;\n    vertical-align:top;\n    height:40px;\n    border:1px solid #EFEFEF; }\n    :host .select-box:hover, :host .select-box:focus{\n      border:1px solid #888; }\n    :host .select-box div{\n      background-repeat:repeat;\n      background-color:transparent;\n      background-position:0 0;\n      border:1px solid transparent;\n      height:40px;\n      width:60px; }\n    :host .select-box .highlight-icon{\n      background-repeat:repeat;\n      background-color:transparent;\n      background-position:0 0;\n      border:2px solid red;\n      height:40px;\n      width:60px; }\n  :host .name{\n    color:#444;\n    font-size:0.8em;\n    text-align:center;\n    text-shadow:0 1px 0 #eee; }\n  :host .i-select-footer{\n    line-height:12px;\n    text-align:center; }\n    :host .i-select-footer .i-select-arrows{\n      float:right; }\n      :host .i-select-footer .i-select-arrows div{\n        color:#444;\n        cursor:pointer;\n        display:inline-block;\n        height:16px; }\n        :host .i-select-footer .i-select-arrows div.disabled{\n          color:#ddd;\n          cursor:default;\n          font-weight:bold; }\n        :host .i-select-footer .i-select-arrows div .next,\n        :host .i-select-footer .i-select-arrows div .prev,\n        :host .i-select-footer .i-select-arrows div .last,\n        :host .i-select-footer .i-select-arrows div .first{\n          cursor:pointer;\n          width:auto;\n          display:inline-block;\n          height:39px;\n          text-indent:-99999px;\n          -webkit-box-sizing:border-box;\n                  box-sizing:border-box; }\n        :host .i-select-footer .i-select-arrows div .i-select-pages{\n          font-size:11px; }\n        :host .i-select-footer .i-select-arrows div:hover, :host .i-select-footer .i-select-arrows div:focus{\n          color:#777777; }\n  :host .selected-icon{\n    background-color:#ccc;\n    background-size:contain;\n    display:block;\n    width:60px;\n    height:100%;\n    float:left;\n    position:relative;\n    text-align:center; }\n    :host .selected-icon div{\n      cursor:default;\n      color:#404040;\n      height:100%;\n      width:60px; }\n  :host .i-select{\n    height:22px;\n    background-color:#fff;\n    border:1px solid #ededed;\n    border-radius:0 4px 4px 0; }\n    :host .i-select.focused{\n      border:1px dotted #444; }\n  :host .i-select-category select{\n    border:0;\n    line-height:20px;\n    padding:3px;\n    width:100%;\n    height:40px;\n    -ms-box-sizing:border-box;\n    -o-box-sizing:border-box;\n    -webkit-box-sizing:border-box;\n    box-sizing:border-box;\n    margin-bottom:5px;\n    font-size:12px;\n    display:block;\n    border:1px solid #EDEDED;\n    color:#404040;\n    -ms-box-shadow:none;\n    -o-box-shadow:none;\n    -webkit-box-shadow:none;\n    box-shadow:none;\n    outline:none; }\n    :host .i-select-category select option{\n      padding:10px; }\n  :host .i-select-button{\n    cursor:pointer;\n    display:block;\n    float:left;\n    height:100%;\n    text-align:center;\n    width:20px;\n    background-color:#f4f4f4;\n    border-left:1px solid #e1e1e1;\n    border-radius:0 4px 4px 0; }\n    :host .i-select-button:focus .select-icon-up-dir{\n      border-top:5px solid grey; }\n    :host .i-select-button:focus .select-icon-down-dir{\n      border-top:5px solid grey; }\n    :host .i-select-button:hover, :host .i-select-button:focus{\n      background-color:#f1f1f1 div;\n        background-color-color:#999999; }\n    :host .i-select-button div{\n      color:#aaaaaa;\n      text-shadow:0px 1px 0px #FFF; }\n    :host .i-select-button .select-icon-down-dir{\n      border-left:5px solid transparent;\n      border-right:5px solid transparent;\n      border-top:5px solid black;\n      float:left;\n      height:0;\n      margin:10px 5px;\n      width:0; }\n    :host .i-select-button .select-icon-up-dir{\n      border-left:5px solid transparent;\n      border-right:5px solid transparent;\n      border-top:5px solid black;\n      float:left;\n      height:0;\n      margin:15px 10px;\n      width:0; }\n  :host .select-icons-container{\n    width:100%;\n    -webkit-box-sizing:border-box;\n    box-sizing:border-box;\n    padding:5px;\n    background-color:#fff;\n    border:1px solid #d3d3d3; }\n    :host .select-icons-container .loading{\n      color:#eee;\n      font-size:24px;\n      margin:0 auto;\n      padding:20px 0;\n      text-align:center;\n      width:100%; }\n  :host .i-select-popup{\n    position:absolute;\n    z-index:10000;\n    background-color:#fefefe;\n    padding:5px;\n    height:auto;\n    width:210px;\n    margin-top:-1px;\n    -ms-box-shadow:0 1px 1px rgba(0, 0, 0, 0.04);\n    -o-box-shadow:0 1px 1px rgba(0, 0, 0, 0.04);\n    -webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.04);\n    box-shadow:0 1px 1px rgba(0, 0, 0, 0.04);\n    border:1px solid #E5E5E5; }\n  :host .i-select-search{\n    position:relative; }\n    :host .i-select-search input[type=\"text\"]{\n      text-transform:uppercase;\n      border:1px solid #EDEDED;\n      color:#404040;\n      -ms-box-shadow:none;\n      -o-box-shadow:none;\n      -webkit-box-shadow:none;\n      box-shadow:none;\n      outline:none;\n      width:100%;\n      margin:3px 0;\n      padding:3px;\n      -webkit-box-sizing:border-box;\n              box-sizing:border-box; }\n    :host .i-select-search div{\n      color:#ddd;\n      position:absolute;\n      right:10px;\n      top:7px; }\n  :host input::-webkit-input-placeholder{\n    text-transform:uppercase;\n    color:#ddd; }\n  :host input:-moz-placeholder{\n    text-transform:uppercase;\n    color:#ddd; }\n  :host input::-moz-placeholder{\n    text-transform:uppercase;\n    color:#ddd; }\n  :host input:-ms-input-placeholder{\n    text-transform:uppercase;\n    color:#ddd !important; }\n  :host .select-icon-spin3{\n    position:absolute;\n    top:0;\n    left:0;\n    width:16px !important;\n    height:16px !important;\n    display:inline-block;\n    margin:0 !important;\n    padding:3px !important; }\n  :host .icons-select-error div:before{\n    color:#444; }\n  :host .select-icon-search{\n    cursor:default; }\n  :host .select-icon-cancel{\n    cursor:pointer; }\n  :host .select-icon-block{\n    background-color:#fed0d0;\n    background-size:contain; }\n  :host .current-icon,\n  :host .current-icon:hover,\n  :host .current-icon:focus{\n    border:1px solid #444; }\n  :host .fa{\n    padding:3px 6px;\n    margin-top:5px; }\n"],
@@ -266,2 +267,3 @@ providers: [CSSImagePipe]
     "multiselect": [{ type: core.Input, args: ["multiselect",] },],
+    "showIconName": [{ type: core.Input, args: ["showIconName",] },],
     "configData": [{ type: core.Input, args: ["entries",] },],
@@ -268,0 +270,0 @@ "onchange": [{ type: core.Output, args: ["onchange",] },],

bundles/icon-select.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("@angular/platform-browser"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/platform-browser","@angular/common"],n):n(e["icon-select"]={},e.ng.core,e.ng.platformBrowser,e.ng.common)}(this,function(e,o,n,t){"use strict";var i=[],s=function(){function e(e){this.sanitizer=e}return e.prototype.transform=function(e,n){return this.sanitizer.bypassSecurityTrustStyle("url('"+e+"') "+(n?"repeat":"no-repeat")+" 0 0 transparent")},e}();s.decorators=[{type:o.Pipe,args:[{name:"CSSImage"}]}],s.ctorParameters=function(){return[{type:n.DomSanitizer}]};var c=function(){function e(e,n){this.renderer=n,this.selectedIndex=1,this.configID="",this.configName="",this.searchEnabled=!1,this.size=3,this.multiselect=!1,this.configData=[],this.displayItems=[],this.onchange=new o.EventEmitter,this.highlightIndex=0,this.searchedData=[],this.config={totalPage:1,currentPage:0,open:!1,showFooter:!1,hasError:!1,isFocused:!1,isSearch:!1,loading:!0,selectedItem:null},this.el=e.nativeElement}return e.prototype.onClick=function(e){this.config.open&&this.toggleIconSelector()},e.prototype.ngOnInit=function(){this.displayItems=this.configData},e.prototype.keyboardTracker=function(n){var t=this;n.stopPropagation(),n.preventDefault();var e=n.charCode||n.keyCode||0;return console.log(e),39===e||40===e?setTimeout(function(){var e=t.highlightIndex;e<t.displayItems.length-1?t.highlightIcon(e+1):t.config.currentPage<t.config.totalPage&&t.next(n)},66):37!==e&&38!==e||setTimeout(function(){var e=t.highlightIndex;0<e?t.highlightIcon(e-1):1<t.config.currentPage&&t.prev(n)},66),!1},e.prototype.performSearch=function(e,n){var t=e.charCode||e.keyCode||0;if(36<t&&t<41)return this.keyboardTracker(e);if(""!==n){this.config.isSearch=!0,this.searchedData=[];for(var o=0;o<this.configData.length;o++){var i=this.configData[o];0<=i.name.toLowerCase().indexOf(n.toLowerCase())&&this.searchedData.push(i)}this.searchedData.length?(this.config.currentPage=1,this.highlightIndex=0,this.config.selectedItem=this.searchedData[0],this.displayItems=this.searchedData,this.highlightIcon(this.highlightIndex)):this.config.selectedItem=null,this.renderIconContainer()}else this.resetSearch()},e.prototype.resetSearch=function(){this.renderer.setElementAttribute(this.searchInput.element.nativeElement,"value",""),this.config.currentPage=1,this.config.isSearch=!1,this.highlightIndex=0,this.displayItems=this.configData,this.config.selectedItem=this.configData[0],this.highlightIcon(this.highlightIndex),this.renderIconContainer()},e.prototype.next=function(e){return e.stopPropagation(),this.config.currentPage<this.config.totalPage&&(this.config.currentPage++,this.renderIconContainer()),this.highlightIndex=0,this.highlightIcon(this.highlightIndex),!1},e.prototype.prev=function(e){return e.stopPropagation(),1<this.config.currentPage&&(this.config.currentPage--,this.renderIconContainer()),this.highlightIndex=this.size-1,this.highlightIcon(this.highlightIndex),!1},e.prototype.last=function(e){return e.stopPropagation(),this.config.currentPage<this.config.totalPage&&(this.config.currentPage=this.config.totalPage,this.renderIconContainer()),this.highlightIndex=0,this.highlightIcon(this.highlightIndex),!1},e.prototype.first=function(e){return e.stopPropagation(),1<this.config.currentPage&&(this.config.currentPage=1,this.renderIconContainer()),this.highlightIndex=this.size-1,this.highlightIcon(this.highlightIndex),!1},e.prototype.renderIconContainer=function(){this.displayItems=this.config.isSearch?this.searchedData:this.configData,this.config.totalPage=Math.ceil(this.displayItems.length/this.size),this.config.showFooter=1<this.config.totalPage;var e=(this.config.currentPage-1)*this.size;this.displayItems.length<1?this.config.hasError=!0:(this.config.hasError=!1,this.displayItems=this.displayItems.slice(e,e+this.size))},e.prototype.toggleIconSelector=function(){var e=this;this.config.open=!this.config.open,this.config.open&&this.searchEnabled&&setTimeout(function(){e.renderer.invokeElementMethod(e.searchInput.element.nativeElement,"focus",[]),e.renderer.invokeElementMethod(e.searchInput.element.nativeElement,"select",[])},20)},e.prototype.findSelectedIndex=function(){if(this.config.selectedItem)for(var e=0;e<this.configData.length;e++)this.configData[e].id==this.config.selectedItem.id&&(this.selectedIndex=e)},e.prototype.selectIcon=function(e){this.displayItems&&(this.config.selectedItem=this.displayItems[e],this.findSelectedIndex(),this.onchange.emit(this.config.selectedItem))},e.prototype.highlightIcon=function(e){this.highlightIndex=e,this.displayItems&&(this.config.selectedItem=this.displayItems[this.highlightIndex],this.findSelectedIndex(),this.onchange.emit(this.config.selectedItem))},e.prototype.popIcons=function(e){e.stopPropagation();for(var n=0;n<i.length;n++)i[n]!=this&&i[n].config.open&&i[n].toggleIconSelector();return this.toggleIconSelector(),!1},e.prototype.ngOnChanges=function(e){var n=this;setTimeout(function(){for(var e=0;e<n.configData.length;e++)n.configData[e].id=e;n.config.currentPage=Math.ceil(n.selectedIndex/(n.size-1)),n.highlightIndex=n.selectedIndex-(n.config.currentPage-1)*n.size,n.renderIconContainer(),i.push(n),1<n.config.totalPage&&(n.config.loading=!1),n.config.selectedItem=n.displayItems[n.highlightIndex],n.onchange.emit(n.config.selectedItem)},10)},e}();c.decorators=[{type:o.Component,args:[{selector:"i-select",template:'<div class="i-select" [id]="configID">\n    <div class="selected-icon">\n        <div class="select-icon-block"\n            [style.background]="config.selectedItem ? (config.selectedItem.value | CSSImage:true)  : \'\'"></div>\n        <div class="fa-li fa fa-spinner fa-spin select-icon-spin3" *ngIf="config.loading"></div>\n    </div>\n    <a href="#" class="i-select-button"\n        (click)="popIcons($event)"\n        (keyup)="keyboardTracker($event)" >\n    <span class="off-screen" id="{{configID}}name" [textContent]="name"></span>\n    <span class="select-icon-down-dir"></span>\n    </a>\n</div>\n<div class="i-select-popup" [style.display]="config.open ? \'block\':\'none\'" >\n    <div class="i-select-search" (click)="searchInput.focus()" *ngIf="searchEnabled">\n        <input type="text" placeholder="placeholder" #searchInput\n            class="icons-search-input"\n            [class.focused]="config.isFocused"\n            (focus)="config.isFocused=true"\n            (blur)="config.isFocused=false"\n            (keyup)="performSearch($event, searchInput.value)" />\n        <div class="select-icon-search" #searchIcon [class]="config.isSearch ? \'select-icon-cancel\' : \'select-icon-search\'"></div>\n    </div>\n    <div class="clear-fix"></div>\n    <div role="list" attr.aria-nameledby="{{configID}}name" class="select-icons-container" #iconContainer>\n    <div\n        role="listitem"\n        class="select-box"\n        *ngFor="let item of displayItems; let i = index">\n        <div  [class.highlight-icon]="highlightIndex==i"\n            [class.cover]="!true" [title]="showIconName ? \'\':\'item.name\'"\n            [style.background]="item.value | CSSImage:true"\n            (click)="selectIcon(i)"><span class="off-screen" [textContent]="item.name"></span></div>\n    </div>\n    </div>\n    <div class="icons-select-error" *ngIf="config.hasError"><div class="select-icon-block" data-select-value="select-icon-block"></div></div>\n    <div class="i-select-footer" *ngIf="config.showFooter">\n    <div class="i-select-arrows">\n        <div class="fa fa-angle-left"\n            (click)="prev($event)"\n            [class.disabled]="config.currentPage==1">\n            <span class="prev" [textContent]="\'previous\'"></span>\n        </div>\n        <div class="fa fa-angle-double-left"\n                (click)="first($event)"\n                [class.disabled]="config.currentPage==1">\n            <span class="first" [textContent]="\'first\'"></span>\n        </div>\n        <div class="i-select-pages"><span [textContent]="config.currentPage + \' / \' + config.totalPage"></span></div>\n        <div class="fa fa-angle-double-right"\n                (click)="last($event)"\n                [class.disabled]="config.currentPage==config.totalPage">\n            <span class="last" [textContent]="\'last\'"></span>\n        </div>\n        <div class="fa fa-angle-right"\n                (click)="next($event)"\n                [class.disabled]="config.currentPage==config.totalPage">\n            <span class="next" [textContent]="\'nextPage\'"></span>\n        </div>\n    </div>\n    </div>\n    <div class="name" *ngIf="showIconName" [textContent]="config.selectedItem ? config.selectedItem.name : \'\'"></div>\n</div>\n',styles:[':host *{\n  margin:0;\n  padding:0;\n  border:0;\n  vertical-align:baseline; }\n:host{\n  display:block;\n  text-align:left;\n  vertical-align:middle;\n  margin:2px 0; }\n  :host .off-screen{\n    display:block;\n    text-indent:-9999px;\n    width:0;\n    height:0; }\n  :host .select-box{\n    background-color:#ccc;\n    background-size:contain;\n    display:inline-block;\n    margin:2px;\n    width:60px;\n    line-height:42px;\n    text-align:center;\n    cursor:pointer;\n    vertical-align:top;\n    height:40px;\n    border:1px solid #EFEFEF; }\n    :host .select-box:hover, :host .select-box:focus{\n      border:1px solid #888; }\n    :host .select-box div{\n      background-repeat:repeat;\n      background-color:transparent;\n      background-position:0 0;\n      border:1px solid transparent;\n      height:40px;\n      width:60px; }\n    :host .select-box .highlight-icon{\n      background-repeat:repeat;\n      background-color:transparent;\n      background-position:0 0;\n      border:2px solid red;\n      height:40px;\n      width:60px; }\n  :host .name{\n    color:#444;\n    font-size:0.8em;\n    text-align:center;\n    text-shadow:0 1px 0 #eee; }\n  :host .i-select-footer{\n    line-height:12px;\n    text-align:center; }\n    :host .i-select-footer .i-select-arrows{\n      float:right; }\n      :host .i-select-footer .i-select-arrows div{\n        color:#444;\n        cursor:pointer;\n        display:inline-block;\n        height:16px; }\n        :host .i-select-footer .i-select-arrows div.disabled{\n          color:#ddd;\n          cursor:default;\n          font-weight:bold; }\n        :host .i-select-footer .i-select-arrows div .next,\n        :host .i-select-footer .i-select-arrows div .prev,\n        :host .i-select-footer .i-select-arrows div .last,\n        :host .i-select-footer .i-select-arrows div .first{\n          cursor:pointer;\n          width:auto;\n          display:inline-block;\n          height:39px;\n          text-indent:-99999px;\n          -webkit-box-sizing:border-box;\n                  box-sizing:border-box; }\n        :host .i-select-footer .i-select-arrows div .i-select-pages{\n          font-size:11px; }\n        :host .i-select-footer .i-select-arrows div:hover, :host .i-select-footer .i-select-arrows div:focus{\n          color:#777777; }\n  :host .selected-icon{\n    background-color:#ccc;\n    background-size:contain;\n    display:block;\n    width:60px;\n    height:100%;\n    float:left;\n    position:relative;\n    text-align:center; }\n    :host .selected-icon div{\n      cursor:default;\n      color:#404040;\n      height:100%;\n      width:60px; }\n  :host .i-select{\n    height:22px;\n    background-color:#fff;\n    border:1px solid #ededed;\n    border-radius:0 4px 4px 0; }\n    :host .i-select.focused{\n      border:1px dotted #444; }\n  :host .i-select-category select{\n    border:0;\n    line-height:20px;\n    padding:3px;\n    width:100%;\n    height:40px;\n    -ms-box-sizing:border-box;\n    -o-box-sizing:border-box;\n    -webkit-box-sizing:border-box;\n    box-sizing:border-box;\n    margin-bottom:5px;\n    font-size:12px;\n    display:block;\n    border:1px solid #EDEDED;\n    color:#404040;\n    -ms-box-shadow:none;\n    -o-box-shadow:none;\n    -webkit-box-shadow:none;\n    box-shadow:none;\n    outline:none; }\n    :host .i-select-category select option{\n      padding:10px; }\n  :host .i-select-button{\n    cursor:pointer;\n    display:block;\n    float:left;\n    height:100%;\n    text-align:center;\n    width:20px;\n    background-color:#f4f4f4;\n    border-left:1px solid #e1e1e1;\n    border-radius:0 4px 4px 0; }\n    :host .i-select-button:focus .select-icon-up-dir{\n      border-top:5px solid grey; }\n    :host .i-select-button:focus .select-icon-down-dir{\n      border-top:5px solid grey; }\n    :host .i-select-button:hover, :host .i-select-button:focus{\n      background-color:#f1f1f1 div;\n        background-color-color:#999999; }\n    :host .i-select-button div{\n      color:#aaaaaa;\n      text-shadow:0px 1px 0px #FFF; }\n    :host .i-select-button .select-icon-down-dir{\n      border-left:5px solid transparent;\n      border-right:5px solid transparent;\n      border-top:5px solid black;\n      float:left;\n      height:0;\n      margin:10px 5px;\n      width:0; }\n    :host .i-select-button .select-icon-up-dir{\n      border-left:5px solid transparent;\n      border-right:5px solid transparent;\n      border-top:5px solid black;\n      float:left;\n      height:0;\n      margin:15px 10px;\n      width:0; }\n  :host .select-icons-container{\n    width:100%;\n    -webkit-box-sizing:border-box;\n    box-sizing:border-box;\n    padding:5px;\n    background-color:#fff;\n    border:1px solid #d3d3d3; }\n    :host .select-icons-container .loading{\n      color:#eee;\n      font-size:24px;\n      margin:0 auto;\n      padding:20px 0;\n      text-align:center;\n      width:100%; }\n  :host .i-select-popup{\n    position:absolute;\n    z-index:10000;\n    background-color:#fefefe;\n    padding:5px;\n    height:auto;\n    width:210px;\n    margin-top:-1px;\n    -ms-box-shadow:0 1px 1px rgba(0, 0, 0, 0.04);\n    -o-box-shadow:0 1px 1px rgba(0, 0, 0, 0.04);\n    -webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.04);\n    box-shadow:0 1px 1px rgba(0, 0, 0, 0.04);\n    border:1px solid #E5E5E5; }\n  :host .i-select-search{\n    position:relative; }\n    :host .i-select-search input[type="text"]{\n      text-transform:uppercase;\n      border:1px solid #EDEDED;\n      color:#404040;\n      -ms-box-shadow:none;\n      -o-box-shadow:none;\n      -webkit-box-shadow:none;\n      box-shadow:none;\n      outline:none;\n      width:100%;\n      margin:3px 0;\n      padding:3px;\n      -webkit-box-sizing:border-box;\n              box-sizing:border-box; }\n    :host .i-select-search div{\n      color:#ddd;\n      position:absolute;\n      right:10px;\n      top:7px; }\n  :host input::-webkit-input-placeholder{\n    text-transform:uppercase;\n    color:#ddd; }\n  :host input:-moz-placeholder{\n    text-transform:uppercase;\n    color:#ddd; }\n  :host input::-moz-placeholder{\n    text-transform:uppercase;\n    color:#ddd; }\n  :host input:-ms-input-placeholder{\n    text-transform:uppercase;\n    color:#ddd !important; }\n  :host .select-icon-spin3{\n    position:absolute;\n    top:0;\n    left:0;\n    width:16px !important;\n    height:16px !important;\n    display:inline-block;\n    margin:0 !important;\n    padding:3px !important; }\n  :host .icons-select-error div:before{\n    color:#444; }\n  :host .select-icon-search{\n    cursor:default; }\n  :host .select-icon-cancel{\n    cursor:pointer; }\n  :host .select-icon-block{\n    background-color:#fed0d0;\n    background-size:contain; }\n  :host .current-icon,\n  :host .current-icon:hover,\n  :host .current-icon:focus{\n    border:1px solid #444; }\n  :host .fa{\n    padding:3px 6px;\n    margin-top:5px; }\n'],providers:[s]}]}],c.ctorParameters=function(){return[{type:o.ElementRef},{type:o.Renderer}]},c.propDecorators={searchIcon:[{type:o.ViewChild,args:["searchIcon",{read:o.ViewContainerRef}]}],searchInput:[{type:o.ViewChild,args:["searchInput",{read:o.ViewContainerRef}]}],iconContainer:[{type:o.ViewChild,args:["iconContainer",{read:o.ViewContainerRef}]}],configID:[{type:o.Input,args:["id"]}],configName:[{type:o.Input,args:["name"]}],searchEnabled:[{type:o.Input,args:["searchEnabled"]}],size:[{type:o.Input,args:["size"]}],multiselect:[{type:o.Input,args:["multiselect"]}],configData:[{type:o.Input,args:["entries"]}],onchange:[{type:o.Output,args:["onchange"]}],onClick:[{type:o.HostListener,args:["window:click",["$event"]]}]};var r=function(){function e(e,n,t){this.viewRef=e,this.el=n,this.componentFactoryResolver=t,this.data=[],this.searchEnabled=!1,this.change=new o.EventEmitter}return e.prototype.ngOnInit=function(){var a=this;this.el.nativeElement.setAttribute("style","display:none"),setTimeout(function(){for(var e=a.el.nativeElement.children,n=0;n<e.length;n++){var t=e[n];1===t.nodeType&&a.data.push({value:t.getAttribute("value"),selected:t.getAttribute("selected"),disabled:t.getAttribute("disabled"),name:t.innerHTML})}var o=a.componentFactoryResolver.resolveComponentFactory(c),i=a.viewRef.createComponent(o),s=i.hostView.rootNodes[0];a.el.nativeElement.parentNode.appendChild(s);var r=i.instance;r.searchEnabled=a.searchEnabled,r.configID=a.el.nativeElement.id+"-iselect",r.size=a.el.nativeElement.size,r.configName=a.el.nativeElement.name,r.onchange.subscribe(a.change),r.configData=a.data,r.ngOnInit(),r.ngOnChanges(undefined)},66)},e}();r.decorators=[{type:o.Directive,args:[{selector:"[i-select]"}]}],r.ctorParameters=function(){return[{type:o.ViewContainerRef},{type:o.ElementRef},{type:o.ComponentFactoryResolver}]},r.propDecorators={searchEnabled:[{type:o.Input,args:["searchEnabled"]}],change:[{type:o.Output,args:["change"]}]};var a=function(){};a.decorators=[{type:o.NgModule,args:[{imports:[t.CommonModule],declarations:[c,s,r],exports:[c,s,r],entryComponents:[c],providers:[s,r],schemas:[o.CUSTOM_ELEMENTS_SCHEMA]}]}],a.ctorParameters=function(){return[]},e.ISelect=c,e.CSSImagePipe=s,e.ISelectDirective=r,e.ISelectModule=a,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("@angular/platform-browser"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/platform-browser","@angular/common"],n):n(e["icon-select"]={},e.ng.core,e.ng.platformBrowser,e.ng.common)}(this,function(e,o,n,t){"use strict";var i=[],s=function(){function e(e){this.sanitizer=e}return e.prototype.transform=function(e,n){return this.sanitizer.bypassSecurityTrustStyle("url('"+e+"') "+(n?"repeat":"no-repeat")+" 0 0 transparent")},e}();s.decorators=[{type:o.Pipe,args:[{name:"CSSImage"}]}],s.ctorParameters=function(){return[{type:n.DomSanitizer}]};var c=function(){function e(e,n){this.renderer=n,this.selectedIndex=1,this.configID="",this.configName="",this.searchEnabled=!1,this.size=3,this.multiselect=!1,this.showIconName=!1,this.configData=[],this.displayItems=[],this.onchange=new o.EventEmitter,this.highlightIndex=0,this.searchedData=[],this.config={totalPage:1,currentPage:0,open:!1,showFooter:!1,hasError:!1,isFocused:!1,isSearch:!1,loading:!0,selectedItem:null},this.el=e.nativeElement}return e.prototype.onClick=function(e){this.config.open&&this.toggleIconSelector()},e.prototype.ngOnInit=function(){this.displayItems=this.configData},e.prototype.keyboardTracker=function(n){var t=this;n.stopPropagation(),n.preventDefault();var e=n.charCode||n.keyCode||0;return console.log(e),39===e||40===e?setTimeout(function(){var e=t.highlightIndex;e<t.displayItems.length-1?t.highlightIcon(e+1):t.config.currentPage<t.config.totalPage&&t.next(n)},66):37!==e&&38!==e||setTimeout(function(){var e=t.highlightIndex;0<e?t.highlightIcon(e-1):1<t.config.currentPage&&t.prev(n)},66),!1},e.prototype.performSearch=function(e,n){var t=e.charCode||e.keyCode||0;if(36<t&&t<41)return this.keyboardTracker(e);if(""!==n){this.config.isSearch=!0,this.searchedData=[];for(var o=0;o<this.configData.length;o++){var i=this.configData[o];0<=i.name.toLowerCase().indexOf(n.toLowerCase())&&this.searchedData.push(i)}this.searchedData.length?(this.config.currentPage=1,this.highlightIndex=0,this.config.selectedItem=this.searchedData[0],this.displayItems=this.searchedData,this.highlightIcon(this.highlightIndex)):this.config.selectedItem=null,this.renderIconContainer()}else this.resetSearch()},e.prototype.resetSearch=function(){this.renderer.setElementAttribute(this.searchInput.element.nativeElement,"value",""),this.config.currentPage=1,this.config.isSearch=!1,this.highlightIndex=0,this.displayItems=this.configData,this.config.selectedItem=this.configData[0],this.highlightIcon(this.highlightIndex),this.renderIconContainer()},e.prototype.next=function(e){return e.stopPropagation(),this.config.currentPage<this.config.totalPage&&(this.config.currentPage++,this.renderIconContainer()),this.highlightIndex=0,this.highlightIcon(this.highlightIndex),!1},e.prototype.prev=function(e){return e.stopPropagation(),1<this.config.currentPage&&(this.config.currentPage--,this.renderIconContainer()),this.highlightIndex=this.size-1,this.highlightIcon(this.highlightIndex),!1},e.prototype.last=function(e){return e.stopPropagation(),this.config.currentPage<this.config.totalPage&&(this.config.currentPage=this.config.totalPage,this.renderIconContainer()),this.highlightIndex=0,this.highlightIcon(this.highlightIndex),!1},e.prototype.first=function(e){return e.stopPropagation(),1<this.config.currentPage&&(this.config.currentPage=1,this.renderIconContainer()),this.highlightIndex=this.size-1,this.highlightIcon(this.highlightIndex),!1},e.prototype.renderIconContainer=function(){this.displayItems=this.config.isSearch?this.searchedData:this.configData,this.config.totalPage=Math.ceil(this.displayItems.length/this.size),this.config.showFooter=1<this.config.totalPage;var e=(this.config.currentPage-1)*this.size;this.displayItems.length<1?this.config.hasError=!0:(this.config.hasError=!1,this.displayItems=this.displayItems.slice(e,e+this.size))},e.prototype.toggleIconSelector=function(){var e=this;this.config.open=!this.config.open,this.config.open&&this.searchEnabled&&setTimeout(function(){e.renderer.invokeElementMethod(e.searchInput.element.nativeElement,"focus",[]),e.renderer.invokeElementMethod(e.searchInput.element.nativeElement,"select",[])},20)},e.prototype.findSelectedIndex=function(){if(this.config.selectedItem)for(var e=0;e<this.configData.length;e++)this.configData[e].id==this.config.selectedItem.id&&(this.selectedIndex=e)},e.prototype.selectIcon=function(e){this.displayItems&&(this.config.selectedItem=this.displayItems[e],this.findSelectedIndex(),this.onchange.emit(this.config.selectedItem))},e.prototype.highlightIcon=function(e){this.highlightIndex=e,this.displayItems&&(this.config.selectedItem=this.displayItems[this.highlightIndex],this.findSelectedIndex(),this.onchange.emit(this.config.selectedItem))},e.prototype.popIcons=function(e){e.stopPropagation();for(var n=0;n<i.length;n++)i[n]!=this&&i[n].config.open&&i[n].toggleIconSelector();return this.toggleIconSelector(),!1},e.prototype.ngOnChanges=function(e){var n=this;setTimeout(function(){for(var e=0;e<n.configData.length;e++)n.configData[e].id=e;n.config.currentPage=Math.ceil(n.selectedIndex/(n.size-1)),n.highlightIndex=n.selectedIndex-(n.config.currentPage-1)*n.size,n.renderIconContainer(),i.push(n),1<n.config.totalPage&&(n.config.loading=!1),n.config.selectedItem=n.displayItems[n.highlightIndex],n.onchange.emit(n.config.selectedItem)},10)},e}();c.decorators=[{type:o.Component,args:[{selector:"i-select",template:'<div class="i-select" [id]="configID">\n    <div class="selected-icon">\n        <div class="select-icon-block"\n            [style.background]="config.selectedItem ? (config.selectedItem.value | CSSImage:true)  : \'\'"></div>\n        <div class="fa-li fa fa-spinner fa-spin select-icon-spin3" *ngIf="config.loading"></div>\n    </div>\n    <a href="#" class="i-select-button"\n        (click)="popIcons($event)"\n        (keyup)="keyboardTracker($event)" >\n    <span class="off-screen" id="{{configID}}name" [textContent]="configName"></span>\n    <span class="select-icon-down-dir"></span>\n    </a>\n</div>\n<div class="i-select-popup" [style.display]="config.open ? \'block\':\'none\'" >\n    <div class="i-select-search" (click)="searchInput.focus()" *ngIf="searchEnabled">\n        <input type="text" placeholder="placeholder" #searchInput\n            class="icons-search-input"\n            [class.focused]="config.isFocused"\n            (focus)="config.isFocused=true"\n            (blur)="config.isFocused=false"\n            (keyup)="performSearch($event, searchInput.value)" />\n        <div class="select-icon-search" #searchIcon [class]="config.isSearch ? \'select-icon-cancel\' : \'select-icon-search\'"></div>\n    </div>\n    <div class="clear-fix"></div>\n    <div role="list" attr.aria-nameledby="{{configID}}name" class="select-icons-container" #iconContainer>\n    <div\n        role="listitem"\n        class="select-box"\n        *ngFor="let item of displayItems; let i = index">\n        <div [class.highlight-icon]="highlightIndex==i"\n            [class.cover]="!true" [title]="showIconName ? \'\':item.name"\n            [style.background]="item.value | CSSImage:true"\n            (click)="selectIcon(i)"><span class="off-screen" [textContent]="item.name"></span></div>\n    </div>\n    </div>\n    <div class="icons-select-error" *ngIf="config.hasError"><div class="select-icon-block" data-select-value="select-icon-block"></div></div>\n    <div class="i-select-footer" *ngIf="config.showFooter">\n    <div class="i-select-arrows">\n        <div class="fa fa-angle-left"\n            (click)="prev($event)"\n            [class.disabled]="config.currentPage==1">\n            <span class="prev" [textContent]="\'previous\'"></span>\n        </div>\n        <div class="fa fa-angle-double-left"\n                (click)="first($event)"\n                [class.disabled]="config.currentPage==1">\n            <span class="first" [textContent]="\'first\'"></span>\n        </div>\n        <div class="i-select-pages"><span [textContent]="config.currentPage + \' / \' + config.totalPage"></span></div>\n        <div class="fa fa-angle-double-right"\n                (click)="last($event)"\n                [class.disabled]="config.currentPage==config.totalPage">\n            <span class="last" [textContent]="\'last\'"></span>\n        </div>\n        <div class="fa fa-angle-right"\n                (click)="next($event)"\n                [class.disabled]="config.currentPage==config.totalPage">\n            <span class="next" [textContent]="\'nextPage\'"></span>\n        </div>\n    </div>\n    </div>\n    <div class="name" *ngIf="showIconName" [textContent]="config.selectedItem ? config.selectedItem.name : \'\'"></div>\n</div>\n',styles:[':host *{\n  margin:0;\n  padding:0;\n  border:0;\n  vertical-align:baseline; }\n:host{\n  display:block;\n  text-align:left;\n  vertical-align:middle;\n  margin:2px 0; }\n  :host .off-screen{\n    display:block;\n    text-indent:-9999px;\n    width:0;\n    height:0; }\n  :host .select-box{\n    background-color:#ccc;\n    background-size:contain;\n    display:inline-block;\n    margin:2px;\n    width:60px;\n    line-height:42px;\n    text-align:center;\n    cursor:pointer;\n    vertical-align:top;\n    height:40px;\n    border:1px solid #EFEFEF; }\n    :host .select-box:hover, :host .select-box:focus{\n      border:1px solid #888; }\n    :host .select-box div{\n      background-repeat:repeat;\n      background-color:transparent;\n      background-position:0 0;\n      border:1px solid transparent;\n      height:40px;\n      width:60px; }\n    :host .select-box .highlight-icon{\n      background-repeat:repeat;\n      background-color:transparent;\n      background-position:0 0;\n      border:2px solid red;\n      height:40px;\n      width:60px; }\n  :host .name{\n    color:#444;\n    font-size:0.8em;\n    text-align:center;\n    text-shadow:0 1px 0 #eee; }\n  :host .i-select-footer{\n    line-height:12px;\n    text-align:center; }\n    :host .i-select-footer .i-select-arrows{\n      float:right; }\n      :host .i-select-footer .i-select-arrows div{\n        color:#444;\n        cursor:pointer;\n        display:inline-block;\n        height:16px; }\n        :host .i-select-footer .i-select-arrows div.disabled{\n          color:#ddd;\n          cursor:default;\n          font-weight:bold; }\n        :host .i-select-footer .i-select-arrows div .next,\n        :host .i-select-footer .i-select-arrows div .prev,\n        :host .i-select-footer .i-select-arrows div .last,\n        :host .i-select-footer .i-select-arrows div .first{\n          cursor:pointer;\n          width:auto;\n          display:inline-block;\n          height:39px;\n          text-indent:-99999px;\n          -webkit-box-sizing:border-box;\n                  box-sizing:border-box; }\n        :host .i-select-footer .i-select-arrows div .i-select-pages{\n          font-size:11px; }\n        :host .i-select-footer .i-select-arrows div:hover, :host .i-select-footer .i-select-arrows div:focus{\n          color:#777777; }\n  :host .selected-icon{\n    background-color:#ccc;\n    background-size:contain;\n    display:block;\n    width:60px;\n    height:100%;\n    float:left;\n    position:relative;\n    text-align:center; }\n    :host .selected-icon div{\n      cursor:default;\n      color:#404040;\n      height:100%;\n      width:60px; }\n  :host .i-select{\n    height:22px;\n    background-color:#fff;\n    border:1px solid #ededed;\n    border-radius:0 4px 4px 0; }\n    :host .i-select.focused{\n      border:1px dotted #444; }\n  :host .i-select-category select{\n    border:0;\n    line-height:20px;\n    padding:3px;\n    width:100%;\n    height:40px;\n    -ms-box-sizing:border-box;\n    -o-box-sizing:border-box;\n    -webkit-box-sizing:border-box;\n    box-sizing:border-box;\n    margin-bottom:5px;\n    font-size:12px;\n    display:block;\n    border:1px solid #EDEDED;\n    color:#404040;\n    -ms-box-shadow:none;\n    -o-box-shadow:none;\n    -webkit-box-shadow:none;\n    box-shadow:none;\n    outline:none; }\n    :host .i-select-category select option{\n      padding:10px; }\n  :host .i-select-button{\n    cursor:pointer;\n    display:block;\n    float:left;\n    height:100%;\n    text-align:center;\n    width:20px;\n    background-color:#f4f4f4;\n    border-left:1px solid #e1e1e1;\n    border-radius:0 4px 4px 0; }\n    :host .i-select-button:focus .select-icon-up-dir{\n      border-top:5px solid grey; }\n    :host .i-select-button:focus .select-icon-down-dir{\n      border-top:5px solid grey; }\n    :host .i-select-button:hover, :host .i-select-button:focus{\n      background-color:#f1f1f1 div;\n        background-color-color:#999999; }\n    :host .i-select-button div{\n      color:#aaaaaa;\n      text-shadow:0px 1px 0px #FFF; }\n    :host .i-select-button .select-icon-down-dir{\n      border-left:5px solid transparent;\n      border-right:5px solid transparent;\n      border-top:5px solid black;\n      float:left;\n      height:0;\n      margin:10px 5px;\n      width:0; }\n    :host .i-select-button .select-icon-up-dir{\n      border-left:5px solid transparent;\n      border-right:5px solid transparent;\n      border-top:5px solid black;\n      float:left;\n      height:0;\n      margin:15px 10px;\n      width:0; }\n  :host .select-icons-container{\n    width:100%;\n    -webkit-box-sizing:border-box;\n    box-sizing:border-box;\n    padding:5px;\n    background-color:#fff;\n    border:1px solid #d3d3d3; }\n    :host .select-icons-container .loading{\n      color:#eee;\n      font-size:24px;\n      margin:0 auto;\n      padding:20px 0;\n      text-align:center;\n      width:100%; }\n  :host .i-select-popup{\n    position:absolute;\n    z-index:10000;\n    background-color:#fefefe;\n    padding:5px;\n    height:auto;\n    width:210px;\n    margin-top:-1px;\n    -ms-box-shadow:0 1px 1px rgba(0, 0, 0, 0.04);\n    -o-box-shadow:0 1px 1px rgba(0, 0, 0, 0.04);\n    -webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.04);\n    box-shadow:0 1px 1px rgba(0, 0, 0, 0.04);\n    border:1px solid #E5E5E5; }\n  :host .i-select-search{\n    position:relative; }\n    :host .i-select-search input[type="text"]{\n      text-transform:uppercase;\n      border:1px solid #EDEDED;\n      color:#404040;\n      -ms-box-shadow:none;\n      -o-box-shadow:none;\n      -webkit-box-shadow:none;\n      box-shadow:none;\n      outline:none;\n      width:100%;\n      margin:3px 0;\n      padding:3px;\n      -webkit-box-sizing:border-box;\n              box-sizing:border-box; }\n    :host .i-select-search div{\n      color:#ddd;\n      position:absolute;\n      right:10px;\n      top:7px; }\n  :host input::-webkit-input-placeholder{\n    text-transform:uppercase;\n    color:#ddd; }\n  :host input:-moz-placeholder{\n    text-transform:uppercase;\n    color:#ddd; }\n  :host input::-moz-placeholder{\n    text-transform:uppercase;\n    color:#ddd; }\n  :host input:-ms-input-placeholder{\n    text-transform:uppercase;\n    color:#ddd !important; }\n  :host .select-icon-spin3{\n    position:absolute;\n    top:0;\n    left:0;\n    width:16px !important;\n    height:16px !important;\n    display:inline-block;\n    margin:0 !important;\n    padding:3px !important; }\n  :host .icons-select-error div:before{\n    color:#444; }\n  :host .select-icon-search{\n    cursor:default; }\n  :host .select-icon-cancel{\n    cursor:pointer; }\n  :host .select-icon-block{\n    background-color:#fed0d0;\n    background-size:contain; }\n  :host .current-icon,\n  :host .current-icon:hover,\n  :host .current-icon:focus{\n    border:1px solid #444; }\n  :host .fa{\n    padding:3px 6px;\n    margin-top:5px; }\n'],providers:[s]}]}],c.ctorParameters=function(){return[{type:o.ElementRef},{type:o.Renderer}]},c.propDecorators={searchIcon:[{type:o.ViewChild,args:["searchIcon",{read:o.ViewContainerRef}]}],searchInput:[{type:o.ViewChild,args:["searchInput",{read:o.ViewContainerRef}]}],iconContainer:[{type:o.ViewChild,args:["iconContainer",{read:o.ViewContainerRef}]}],configID:[{type:o.Input,args:["id"]}],configName:[{type:o.Input,args:["name"]}],searchEnabled:[{type:o.Input,args:["searchEnabled"]}],size:[{type:o.Input,args:["size"]}],multiselect:[{type:o.Input,args:["multiselect"]}],showIconName:[{type:o.Input,args:["showIconName"]}],configData:[{type:o.Input,args:["entries"]}],onchange:[{type:o.Output,args:["onchange"]}],onClick:[{type:o.HostListener,args:["window:click",["$event"]]}]};var r=function(){function e(e,n,t){this.viewRef=e,this.el=n,this.componentFactoryResolver=t,this.data=[],this.searchEnabled=!1,this.change=new o.EventEmitter}return e.prototype.ngOnInit=function(){var a=this;this.el.nativeElement.setAttribute("style","display:none"),setTimeout(function(){for(var e=a.el.nativeElement.children,n=0;n<e.length;n++){var t=e[n];1===t.nodeType&&a.data.push({value:t.getAttribute("value"),selected:t.getAttribute("selected"),disabled:t.getAttribute("disabled"),name:t.innerHTML})}var o=a.componentFactoryResolver.resolveComponentFactory(c),i=a.viewRef.createComponent(o),s=i.hostView.rootNodes[0];a.el.nativeElement.parentNode.appendChild(s);var r=i.instance;r.searchEnabled=a.searchEnabled,r.configID=a.el.nativeElement.id+"-iselect",r.size=a.el.nativeElement.size,r.configName=a.el.nativeElement.name,r.onchange.subscribe(a.change),r.configData=a.data,r.ngOnInit(),r.ngOnChanges(undefined)},66)},e}();r.decorators=[{type:o.Directive,args:[{selector:"[i-select]"}]}],r.ctorParameters=function(){return[{type:o.ViewContainerRef},{type:o.ElementRef},{type:o.ComponentFactoryResolver}]},r.propDecorators={searchEnabled:[{type:o.Input,args:["searchEnabled"]}],change:[{type:o.Output,args:["change"]}]};var a=function(){};a.decorators=[{type:o.NgModule,args:[{imports:[t.CommonModule],declarations:[c,s,r],exports:[c,s,r],entryComponents:[c],providers:[s,r],schemas:[o.CUSTOM_ELEMENTS_SCHEMA]}]}],a.ctorParameters=function(){return[]},e.ISelect=c,e.CSSImagePipe=s,e.ISelectDirective=r,e.ISelectModule=a,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=icon-select.umd.min.js.map

esm2015/icon-select.js

@@ -54,4 +54,3 @@ import { Pipe, Component, ViewContainerRef, Input, Output, Renderer, HostListener, EventEmitter, ViewChild, ElementRef, Directive, ComponentFactoryResolver, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
         // showIconName should be handled by css from user
-        // @Input("showIconName")
-        // private showIconName = false;
+        this.showIconName = false;
         this.configData = [];
@@ -342,3 +341,3 @@ this.displayItems = [];
         (keyup)="keyboardTracker($event)" >
-    <span class="off-screen" id="{{configID}}name" [textContent]="name"></span>
+    <span class="off-screen" id="{{configID}}name" [textContent]="configName"></span>
     <span class="select-icon-down-dir"></span>
@@ -363,4 +362,4 @@ </a>
         *ngFor="let item of displayItems; let i = index">
-        <div  [class.highlight-icon]="highlightIndex==i"
-            [class.cover]="!true" [title]="showIconName ? '':'item.name'"
+        <div [class.highlight-icon]="highlightIndex==i"
+            [class.cover]="!true" [title]="showIconName ? '':item.name"
             [style.background]="item.value | CSSImage:true"
@@ -658,2 +657,3 @@ (click)="selectIcon(i)"><span class="off-screen" [textContent]="item.name"></span></div>
     "multiselect": [{ type: Input, args: ["multiselect",] },],
+    "showIconName": [{ type: Input, args: ["showIconName",] },],
     "configData": [{ type: Input, args: ["entries",] },],
@@ -660,0 +660,0 @@ "onchange": [{ type: Output, args: ["onchange",] },],

esm5/icon-select.js

@@ -30,2 +30,3 @@ import { Pipe, Component, ViewContainerRef, Input, Output, Renderer, HostListener, EventEmitter, ViewChild, ElementRef, Directive, ComponentFactoryResolver, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
         this.multiselect = false;
+        this.showIconName = false;
         this.configData = [];
@@ -245,3 +246,3 @@ this.displayItems = [];
                 selector: 'i-select',
-                template: "<div class=\"i-select\" [id]=\"configID\">\n    <div class=\"selected-icon\">\n        <div class=\"select-icon-block\"\n            [style.background]=\"config.selectedItem ? (config.selectedItem.value | CSSImage:true)  : ''\"></div>\n        <div class=\"fa-li fa fa-spinner fa-spin select-icon-spin3\" *ngIf=\"config.loading\"></div>\n    </div>\n    <a href=\"#\" class=\"i-select-button\"\n        (click)=\"popIcons($event)\"\n        (keyup)=\"keyboardTracker($event)\" >\n    <span class=\"off-screen\" id=\"{{configID}}name\" [textContent]=\"name\"></span>\n    <span class=\"select-icon-down-dir\"></span>\n    </a>\n</div>\n<div class=\"i-select-popup\" [style.display]=\"config.open ? 'block':'none'\" >\n    <div class=\"i-select-search\" (click)=\"searchInput.focus()\" *ngIf=\"searchEnabled\">\n        <input type=\"text\" placeholder=\"placeholder\" #searchInput\n            class=\"icons-search-input\"\n            [class.focused]=\"config.isFocused\"\n            (focus)=\"config.isFocused=true\"\n            (blur)=\"config.isFocused=false\"\n            (keyup)=\"performSearch($event, searchInput.value)\" />\n        <div class=\"select-icon-search\" #searchIcon [class]=\"config.isSearch ? 'select-icon-cancel' : 'select-icon-search'\"></div>\n    </div>\n    <div class=\"clear-fix\"></div>\n    <div role=\"list\" attr.aria-nameledby=\"{{configID}}name\" class=\"select-icons-container\" #iconContainer>\n    <div\n        role=\"listitem\"\n        class=\"select-box\"\n        *ngFor=\"let item of displayItems; let i = index\">\n        <div  [class.highlight-icon]=\"highlightIndex==i\"\n            [class.cover]=\"!true\" [title]=\"showIconName ? '':'item.name'\"\n            [style.background]=\"item.value | CSSImage:true\"\n            (click)=\"selectIcon(i)\"><span class=\"off-screen\" [textContent]=\"item.name\"></span></div>\n    </div>\n    </div>\n    <div class=\"icons-select-error\" *ngIf=\"config.hasError\"><div class=\"select-icon-block\" data-select-value=\"select-icon-block\"></div></div>\n    <div class=\"i-select-footer\" *ngIf=\"config.showFooter\">\n    <div class=\"i-select-arrows\">\n        <div class=\"fa fa-angle-left\"\n            (click)=\"prev($event)\"\n            [class.disabled]=\"config.currentPage==1\">\n            <span class=\"prev\" [textContent]=\"'previous'\"></span>\n        </div>\n        <div class=\"fa fa-angle-double-left\"\n                (click)=\"first($event)\"\n                [class.disabled]=\"config.currentPage==1\">\n            <span class=\"first\" [textContent]=\"'first'\"></span>\n        </div>\n        <div class=\"i-select-pages\"><span [textContent]=\"config.currentPage + ' / ' + config.totalPage\"></span></div>\n        <div class=\"fa fa-angle-double-right\"\n                (click)=\"last($event)\"\n                [class.disabled]=\"config.currentPage==config.totalPage\">\n            <span class=\"last\" [textContent]=\"'last'\"></span>\n        </div>\n        <div class=\"fa fa-angle-right\"\n                (click)=\"next($event)\"\n                [class.disabled]=\"config.currentPage==config.totalPage\">\n            <span class=\"next\" [textContent]=\"'nextPage'\"></span>\n        </div>\n    </div>\n    </div>\n    <div class=\"name\" *ngIf=\"showIconName\" [textContent]=\"config.selectedItem ? config.selectedItem.name : ''\"></div>\n</div>\n",
+                template: "<div class=\"i-select\" [id]=\"configID\">\n    <div class=\"selected-icon\">\n        <div class=\"select-icon-block\"\n            [style.background]=\"config.selectedItem ? (config.selectedItem.value | CSSImage:true)  : ''\"></div>\n        <div class=\"fa-li fa fa-spinner fa-spin select-icon-spin3\" *ngIf=\"config.loading\"></div>\n    </div>\n    <a href=\"#\" class=\"i-select-button\"\n        (click)=\"popIcons($event)\"\n        (keyup)=\"keyboardTracker($event)\" >\n    <span class=\"off-screen\" id=\"{{configID}}name\" [textContent]=\"configName\"></span>\n    <span class=\"select-icon-down-dir\"></span>\n    </a>\n</div>\n<div class=\"i-select-popup\" [style.display]=\"config.open ? 'block':'none'\" >\n    <div class=\"i-select-search\" (click)=\"searchInput.focus()\" *ngIf=\"searchEnabled\">\n        <input type=\"text\" placeholder=\"placeholder\" #searchInput\n            class=\"icons-search-input\"\n            [class.focused]=\"config.isFocused\"\n            (focus)=\"config.isFocused=true\"\n            (blur)=\"config.isFocused=false\"\n            (keyup)=\"performSearch($event, searchInput.value)\" />\n        <div class=\"select-icon-search\" #searchIcon [class]=\"config.isSearch ? 'select-icon-cancel' : 'select-icon-search'\"></div>\n    </div>\n    <div class=\"clear-fix\"></div>\n    <div role=\"list\" attr.aria-nameledby=\"{{configID}}name\" class=\"select-icons-container\" #iconContainer>\n    <div\n        role=\"listitem\"\n        class=\"select-box\"\n        *ngFor=\"let item of displayItems; let i = index\">\n        <div [class.highlight-icon]=\"highlightIndex==i\"\n            [class.cover]=\"!true\" [title]=\"showIconName ? '':item.name\"\n            [style.background]=\"item.value | CSSImage:true\"\n            (click)=\"selectIcon(i)\"><span class=\"off-screen\" [textContent]=\"item.name\"></span></div>\n    </div>\n    </div>\n    <div class=\"icons-select-error\" *ngIf=\"config.hasError\"><div class=\"select-icon-block\" data-select-value=\"select-icon-block\"></div></div>\n    <div class=\"i-select-footer\" *ngIf=\"config.showFooter\">\n    <div class=\"i-select-arrows\">\n        <div class=\"fa fa-angle-left\"\n            (click)=\"prev($event)\"\n            [class.disabled]=\"config.currentPage==1\">\n            <span class=\"prev\" [textContent]=\"'previous'\"></span>\n        </div>\n        <div class=\"fa fa-angle-double-left\"\n                (click)=\"first($event)\"\n                [class.disabled]=\"config.currentPage==1\">\n            <span class=\"first\" [textContent]=\"'first'\"></span>\n        </div>\n        <div class=\"i-select-pages\"><span [textContent]=\"config.currentPage + ' / ' + config.totalPage\"></span></div>\n        <div class=\"fa fa-angle-double-right\"\n                (click)=\"last($event)\"\n                [class.disabled]=\"config.currentPage==config.totalPage\">\n            <span class=\"last\" [textContent]=\"'last'\"></span>\n        </div>\n        <div class=\"fa fa-angle-right\"\n                (click)=\"next($event)\"\n                [class.disabled]=\"config.currentPage==config.totalPage\">\n            <span class=\"next\" [textContent]=\"'nextPage'\"></span>\n        </div>\n    </div>\n    </div>\n    <div class=\"name\" *ngIf=\"showIconName\" [textContent]=\"config.selectedItem ? config.selectedItem.name : ''\"></div>\n</div>\n",
                 styles: [":host *{\n  margin:0;\n  padding:0;\n  border:0;\n  vertical-align:baseline; }\n:host{\n  display:block;\n  text-align:left;\n  vertical-align:middle;\n  margin:2px 0; }\n  :host .off-screen{\n    display:block;\n    text-indent:-9999px;\n    width:0;\n    height:0; }\n  :host .select-box{\n    background-color:#ccc;\n    background-size:contain;\n    display:inline-block;\n    margin:2px;\n    width:60px;\n    line-height:42px;\n    text-align:center;\n    cursor:pointer;\n    vertical-align:top;\n    height:40px;\n    border:1px solid #EFEFEF; }\n    :host .select-box:hover, :host .select-box:focus{\n      border:1px solid #888; }\n    :host .select-box div{\n      background-repeat:repeat;\n      background-color:transparent;\n      background-position:0 0;\n      border:1px solid transparent;\n      height:40px;\n      width:60px; }\n    :host .select-box .highlight-icon{\n      background-repeat:repeat;\n      background-color:transparent;\n      background-position:0 0;\n      border:2px solid red;\n      height:40px;\n      width:60px; }\n  :host .name{\n    color:#444;\n    font-size:0.8em;\n    text-align:center;\n    text-shadow:0 1px 0 #eee; }\n  :host .i-select-footer{\n    line-height:12px;\n    text-align:center; }\n    :host .i-select-footer .i-select-arrows{\n      float:right; }\n      :host .i-select-footer .i-select-arrows div{\n        color:#444;\n        cursor:pointer;\n        display:inline-block;\n        height:16px; }\n        :host .i-select-footer .i-select-arrows div.disabled{\n          color:#ddd;\n          cursor:default;\n          font-weight:bold; }\n        :host .i-select-footer .i-select-arrows div .next,\n        :host .i-select-footer .i-select-arrows div .prev,\n        :host .i-select-footer .i-select-arrows div .last,\n        :host .i-select-footer .i-select-arrows div .first{\n          cursor:pointer;\n          width:auto;\n          display:inline-block;\n          height:39px;\n          text-indent:-99999px;\n          -webkit-box-sizing:border-box;\n                  box-sizing:border-box; }\n        :host .i-select-footer .i-select-arrows div .i-select-pages{\n          font-size:11px; }\n        :host .i-select-footer .i-select-arrows div:hover, :host .i-select-footer .i-select-arrows div:focus{\n          color:#777777; }\n  :host .selected-icon{\n    background-color:#ccc;\n    background-size:contain;\n    display:block;\n    width:60px;\n    height:100%;\n    float:left;\n    position:relative;\n    text-align:center; }\n    :host .selected-icon div{\n      cursor:default;\n      color:#404040;\n      height:100%;\n      width:60px; }\n  :host .i-select{\n    height:22px;\n    background-color:#fff;\n    border:1px solid #ededed;\n    border-radius:0 4px 4px 0; }\n    :host .i-select.focused{\n      border:1px dotted #444; }\n  :host .i-select-category select{\n    border:0;\n    line-height:20px;\n    padding:3px;\n    width:100%;\n    height:40px;\n    -ms-box-sizing:border-box;\n    -o-box-sizing:border-box;\n    -webkit-box-sizing:border-box;\n    box-sizing:border-box;\n    margin-bottom:5px;\n    font-size:12px;\n    display:block;\n    border:1px solid #EDEDED;\n    color:#404040;\n    -ms-box-shadow:none;\n    -o-box-shadow:none;\n    -webkit-box-shadow:none;\n    box-shadow:none;\n    outline:none; }\n    :host .i-select-category select option{\n      padding:10px; }\n  :host .i-select-button{\n    cursor:pointer;\n    display:block;\n    float:left;\n    height:100%;\n    text-align:center;\n    width:20px;\n    background-color:#f4f4f4;\n    border-left:1px solid #e1e1e1;\n    border-radius:0 4px 4px 0; }\n    :host .i-select-button:focus .select-icon-up-dir{\n      border-top:5px solid grey; }\n    :host .i-select-button:focus .select-icon-down-dir{\n      border-top:5px solid grey; }\n    :host .i-select-button:hover, :host .i-select-button:focus{\n      background-color:#f1f1f1 div;\n        background-color-color:#999999; }\n    :host .i-select-button div{\n      color:#aaaaaa;\n      text-shadow:0px 1px 0px #FFF; }\n    :host .i-select-button .select-icon-down-dir{\n      border-left:5px solid transparent;\n      border-right:5px solid transparent;\n      border-top:5px solid black;\n      float:left;\n      height:0;\n      margin:10px 5px;\n      width:0; }\n    :host .i-select-button .select-icon-up-dir{\n      border-left:5px solid transparent;\n      border-right:5px solid transparent;\n      border-top:5px solid black;\n      float:left;\n      height:0;\n      margin:15px 10px;\n      width:0; }\n  :host .select-icons-container{\n    width:100%;\n    -webkit-box-sizing:border-box;\n    box-sizing:border-box;\n    padding:5px;\n    background-color:#fff;\n    border:1px solid #d3d3d3; }\n    :host .select-icons-container .loading{\n      color:#eee;\n      font-size:24px;\n      margin:0 auto;\n      padding:20px 0;\n      text-align:center;\n      width:100%; }\n  :host .i-select-popup{\n    position:absolute;\n    z-index:10000;\n    background-color:#fefefe;\n    padding:5px;\n    height:auto;\n    width:210px;\n    margin-top:-1px;\n    -ms-box-shadow:0 1px 1px rgba(0, 0, 0, 0.04);\n    -o-box-shadow:0 1px 1px rgba(0, 0, 0, 0.04);\n    -webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.04);\n    box-shadow:0 1px 1px rgba(0, 0, 0, 0.04);\n    border:1px solid #E5E5E5; }\n  :host .i-select-search{\n    position:relative; }\n    :host .i-select-search input[type=\"text\"]{\n      text-transform:uppercase;\n      border:1px solid #EDEDED;\n      color:#404040;\n      -ms-box-shadow:none;\n      -o-box-shadow:none;\n      -webkit-box-shadow:none;\n      box-shadow:none;\n      outline:none;\n      width:100%;\n      margin:3px 0;\n      padding:3px;\n      -webkit-box-sizing:border-box;\n              box-sizing:border-box; }\n    :host .i-select-search div{\n      color:#ddd;\n      position:absolute;\n      right:10px;\n      top:7px; }\n  :host input::-webkit-input-placeholder{\n    text-transform:uppercase;\n    color:#ddd; }\n  :host input:-moz-placeholder{\n    text-transform:uppercase;\n    color:#ddd; }\n  :host input::-moz-placeholder{\n    text-transform:uppercase;\n    color:#ddd; }\n  :host input:-ms-input-placeholder{\n    text-transform:uppercase;\n    color:#ddd !important; }\n  :host .select-icon-spin3{\n    position:absolute;\n    top:0;\n    left:0;\n    width:16px !important;\n    height:16px !important;\n    display:inline-block;\n    margin:0 !important;\n    padding:3px !important; }\n  :host .icons-select-error div:before{\n    color:#444; }\n  :host .select-icon-search{\n    cursor:default; }\n  :host .select-icon-cancel{\n    cursor:pointer; }\n  :host .select-icon-block{\n    background-color:#fed0d0;\n    background-size:contain; }\n  :host .current-icon,\n  :host .current-icon:hover,\n  :host .current-icon:focus{\n    border:1px solid #444; }\n  :host .fa{\n    padding:3px 6px;\n    margin-top:5px; }\n"],
@@ -264,2 +265,3 @@ providers: [CSSImagePipe]
     "multiselect": [{ type: Input, args: ["multiselect",] },],
+    "showIconName": [{ type: Input, args: ["showIconName",] },],
     "configData": [{ type: Input, args: ["entries",] },],
@@ -266,0 +268,0 @@ "onchange": [{ type: Output, args: ["onchange",] },],

icon-select.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":4,"metadata":{"ISelect":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":39,"character":1},"arguments":[{"selector":"i-select","template":"<div class=\"i-select\" [id]=\"configID\">\n    <div class=\"selected-icon\">\n        <div class=\"select-icon-block\" \n            [style.background]=\"config.selectedItem ? (config.selectedItem.value | CSSImage:true)  : ''\"></div>\n        <div class=\"fa-li fa fa-spinner fa-spin select-icon-spin3\" *ngIf=\"config.loading\"></div>\n    </div>\n    <a href=\"#\" class=\"i-select-button\" \n        (click)=\"popIcons($event)\" \n        (keyup)=\"keyboardTracker($event)\" >\n    <span class=\"off-screen\" id=\"{{configID}}name\" [textContent]=\"name\"></span>\n    <span class=\"select-icon-down-dir\"></span>\n    </a>\n</div>\n<div class=\"i-select-popup\" [style.display]=\"config.open ? 'block':'none'\" >\n    <div class=\"i-select-search\" (click)=\"searchInput.focus()\" *ngIf=\"searchEnabled\">\n        <input type=\"text\" placeholder=\"placeholder\" #searchInput\n            class=\"icons-search-input\" \n            [class.focused]=\"config.isFocused\"\n            (focus)=\"config.isFocused=true\"\n            (blur)=\"config.isFocused=false\"\n            (keyup)=\"performSearch($event, searchInput.value)\" />\n        <div class=\"select-icon-search\" #searchIcon [class]=\"config.isSearch ? 'select-icon-cancel' : 'select-icon-search'\"></div>\n    </div>\n    <div class=\"clear-fix\"></div>\n    <div role=\"list\" attr.aria-nameledby=\"{{configID}}name\" class=\"select-icons-container\" #iconContainer>\n    <div \n        role=\"listitem\" \n        class=\"select-box\" \n        *ngFor=\"let item of displayItems; let i = index\">\n        <div  [class.highlight-icon]=\"highlightIndex==i\"\n            [class.cover]=\"!true\" [title]=\"showIconName ? '':'item.name'\"\n            [style.background]=\"item.value | CSSImage:true\"\n            (click)=\"selectIcon(i)\"><span class=\"off-screen\" [textContent]=\"item.name\"></span></div>\n    </div>\n    </div>\n    <div class=\"icons-select-error\" *ngIf=\"config.hasError\"><div class=\"select-icon-block\" data-select-value=\"select-icon-block\"></div></div>\n    <div class=\"i-select-footer\" *ngIf=\"config.showFooter\">\n    <div class=\"i-select-arrows\">\n        <div class=\"fa fa-angle-left\"\n            (click)=\"prev($event)\"\n            [class.disabled]=\"config.currentPage==1\">\n            <span class=\"prev\" [textContent]=\"'previous'\"></span>\n        </div>\n        <div class=\"fa fa-angle-double-left\"\n                (click)=\"first($event)\"\n                [class.disabled]=\"config.currentPage==1\">\n            <span class=\"first\" [textContent]=\"'first'\"></span>\n        </div>\n        <div class=\"i-select-pages\"><span [textContent]=\"config.currentPage + ' / ' + config.totalPage\"></span></div>\n        <div class=\"fa fa-angle-double-right\"\n                (click)=\"last($event)\"\n                [class.disabled]=\"config.currentPage==config.totalPage\">\n            <span class=\"last\" [textContent]=\"'last'\"></span>\n        </div>\n        <div class=\"fa fa-angle-right\"\n                (click)=\"next($event)\"\n                [class.disabled]=\"config.currentPage==config.totalPage\">\n            <span class=\"next\" [textContent]=\"'nextPage'\"></span>\n        </div>\n    </div>\n    </div>\n    <div class=\"name\" *ngIf=\"showIconName\" [textContent]=\"config.selectedItem ? config.selectedItem.name : ''\"></div>\n</div>\n","styles":[":host *{\n  margin:0;\n  padding:0;\n  border:0;\n  vertical-align:baseline; }\n\n:host{\n  display:block;\n  text-align:left;\n  vertical-align:middle;\n  margin:2px 0; }\n  :host .off-screen{\n    display:block;\n    text-indent:-9999px;\n    width:0;\n    height:0; }\n  :host .select-box{\n    background-color:#ccc;\n    background-size:contain;\n    display:inline-block;\n    margin:2px;\n    width:60px;\n    line-height:42px;\n    text-align:center;\n    cursor:pointer;\n    vertical-align:top;\n    height:40px;\n    border:1px solid #EFEFEF; }\n    :host .select-box:hover, :host .select-box:focus{\n      border:1px solid #888; }\n    :host .select-box div{\n      background-repeat:repeat;\n      background-color:transparent;\n      background-position:0 0;\n      border:1px solid transparent;\n      height:40px;\n      width:60px; }\n    :host .select-box .highlight-icon{\n      background-repeat:repeat;\n      background-color:transparent;\n      background-position:0 0;\n      border:2px solid red;\n      height:40px;\n      width:60px; }\n  :host .name{\n    color:#444;\n    font-size:0.8em;\n    text-align:center;\n    text-shadow:0 1px 0 #eee; }\n  :host .i-select-footer{\n    line-height:12px;\n    text-align:center; }\n    :host .i-select-footer .i-select-arrows{\n      float:right; }\n      :host .i-select-footer .i-select-arrows div{\n        color:#444;\n        cursor:pointer;\n        display:inline-block;\n        height:16px; }\n        :host .i-select-footer .i-select-arrows div.disabled{\n          color:#ddd;\n          cursor:default;\n          font-weight:bold; }\n        :host .i-select-footer .i-select-arrows div .next,\n        :host .i-select-footer .i-select-arrows div .prev,\n        :host .i-select-footer .i-select-arrows div .last,\n        :host .i-select-footer .i-select-arrows div .first{\n          cursor:pointer;\n          width:auto;\n          display:inline-block;\n          height:39px;\n          text-indent:-99999px;\n          -webkit-box-sizing:border-box;\n                  box-sizing:border-box; }\n        :host .i-select-footer .i-select-arrows div .i-select-pages{\n          font-size:11px; }\n        :host .i-select-footer .i-select-arrows div:hover, :host .i-select-footer .i-select-arrows div:focus{\n          color:#777777; }\n  :host .selected-icon{\n    background-color:#ccc;\n    background-size:contain;\n    display:block;\n    width:60px;\n    height:100%;\n    float:left;\n    position:relative;\n    text-align:center; }\n    :host .selected-icon div{\n      cursor:default;\n      color:#404040;\n      height:100%;\n      width:60px; }\n  :host .i-select{\n    height:22px;\n    background-color:#fff;\n    border:1px solid #ededed;\n    border-radius:0 4px 4px 0; }\n    :host .i-select.focused{\n      border:1px dotted #444; }\n  :host .i-select-category select{\n    border:0;\n    line-height:20px;\n    padding:3px;\n    width:100%;\n    height:40px;\n    -ms-box-sizing:border-box;\n    -o-box-sizing:border-box;\n    -webkit-box-sizing:border-box;\n    box-sizing:border-box;\n    margin-bottom:5px;\n    font-size:12px;\n    display:block;\n    border:1px solid #EDEDED;\n    color:#404040;\n    -ms-box-shadow:none;\n    -o-box-shadow:none;\n    -webkit-box-shadow:none;\n    box-shadow:none;\n    outline:none; }\n    :host .i-select-category select option{\n      padding:10px; }\n  :host .i-select-button{\n    cursor:pointer;\n    display:block;\n    float:left;\n    height:100%;\n    text-align:center;\n    width:20px;\n    background-color:#f4f4f4;\n    border-left:1px solid #e1e1e1;\n    border-radius:0 4px 4px 0; }\n    :host .i-select-button:focus .select-icon-up-dir{\n      border-top:5px solid grey; }\n    :host .i-select-button:focus .select-icon-down-dir{\n      border-top:5px solid grey; }\n    :host .i-select-button:hover, :host .i-select-button:focus{\n      background-color:#f1f1f1 div;\n        background-color-color:#999999; }\n    :host .i-select-button div{\n      color:#aaaaaa;\n      text-shadow:0px 1px 0px #FFF; }\n    :host .i-select-button .select-icon-down-dir{\n      border-left:5px solid transparent;\n      border-right:5px solid transparent;\n      border-top:5px solid black;\n      float:left;\n      height:0;\n      margin:10px 5px;\n      width:0; }\n    :host .i-select-button .select-icon-up-dir{\n      border-left:5px solid transparent;\n      border-right:5px solid transparent;\n      border-top:5px solid black;\n      float:left;\n      height:0;\n      margin:15px 10px;\n      width:0; }\n  :host .select-icons-container{\n    width:100%;\n    -webkit-box-sizing:border-box;\n    box-sizing:border-box;\n    padding:5px;\n    background-color:#fff;\n    border:1px solid #d3d3d3; }\n    :host .select-icons-container .loading{\n      color:#eee;\n      font-size:24px;\n      margin:0 auto;\n      padding:20px 0;\n      text-align:center;\n      width:100%; }\n  :host .i-select-popup{\n    position:absolute;\n    z-index:10000;\n    background-color:#fefefe;\n    padding:5px;\n    height:auto;\n    width:210px;\n    margin-top:-1px;\n    -ms-box-shadow:0 1px 1px rgba(0, 0, 0, 0.04);\n    -o-box-shadow:0 1px 1px rgba(0, 0, 0, 0.04);\n    -webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.04);\n    box-shadow:0 1px 1px rgba(0, 0, 0, 0.04);\n    border:1px solid #E5E5E5; }\n  :host .i-select-search{\n    position:relative; }\n    :host .i-select-search input[type=\"text\"]{\n      text-transform:uppercase;\n      border:1px solid #EDEDED;\n      color:#404040;\n      -ms-box-shadow:none;\n      -o-box-shadow:none;\n      -webkit-box-shadow:none;\n      box-shadow:none;\n      outline:none;\n      width:100%;\n      margin:3px 0;\n      padding:3px;\n      -webkit-box-sizing:border-box;\n              box-sizing:border-box; }\n    :host .i-select-search div{\n      color:#ddd;\n      position:absolute;\n      right:10px;\n      top:7px; }\n  :host input::-webkit-input-placeholder{\n    text-transform:uppercase;\n    color:#ddd; }\n  :host input:-moz-placeholder{\n    text-transform:uppercase;\n    color:#ddd; }\n  :host input::-moz-placeholder{\n    text-transform:uppercase;\n    color:#ddd; }\n  :host input:-ms-input-placeholder{\n    text-transform:uppercase;\n    color:#ddd !important; }\n  :host .select-icon-spin3{\n    position:absolute;\n    top:0;\n    left:0;\n    width:16px !important;\n    height:16px !important;\n    display:inline-block;\n    margin:0 !important;\n    padding:3px !important; }\n  :host .icons-select-error div:before{\n    color:#444; }\n  :host .select-icon-search{\n    cursor:default; }\n  :host .select-icon-cancel{\n    cursor:pointer; }\n  :host .select-icon-block{\n    background-color:#fed0d0;\n    background-size:contain; }\n  :host .current-icon,\n  :host .current-icon:hover,\n  :host .current-icon:focus{\n    border:1px solid #444; }\n  :host .fa{\n    padding:3px 6px;\n    margin-top:5px; }\n"],"providers":[{"__symbolic":"reference","name":"CSSImagePipe"}]}]}],"members":{"searchIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":354,"character":2},"arguments":["searchIcon",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":354,"character":33}}]}]}],"searchInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":355,"character":2},"arguments":["searchInput",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":355,"character":34}}]}]}],"iconContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":356,"character":2},"arguments":["iconContainer",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":356,"character":36}}]}]}],"configID":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":358,"character":2},"arguments":["id"]}]}],"configName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":361,"character":2},"arguments":["name"]}]}],"searchEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":368,"character":2},"arguments":["searchEnabled"]}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":371,"character":2},"arguments":["size"]}]}],"multiselect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":374,"character":2},"arguments":["multiselect"]}]}],"configData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":381,"character":2},"arguments":["entries"]}]}],"onchange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":386,"character":2},"arguments":["onchange"]}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":405,"character":2},"arguments":["window:click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":414,"character":17},{"__symbolic":"reference","module":"@angular/core","name":"Renderer","line":414,"character":46}]}],"ngOnInit":[{"__symbolic":"method"}],"keyboardTracker":[{"__symbolic":"method"}],"performSearch":[{"__symbolic":"method"}],"resetSearch":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"prev":[{"__symbolic":"method"}],"last":[{"__symbolic":"method"}],"first":[{"__symbolic":"method"}],"renderIconContainer":[{"__symbolic":"method"}],"toggleIconSelector":[{"__symbolic":"method"}],"findSelectedIndex":[{"__symbolic":"method"}],"selectIcon":[{"__symbolic":"method"}],"highlightIcon":[{"__symbolic":"method"}],"popIcons":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"CSSImagePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":28,"character":1},"arguments":[{"name":"CSSImage"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":30,"character":32}]}],"transform":[{"__symbolic":"method"}]}},"ISelectDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":15,"character":1},"arguments":[{"selector":"[i-select]"}]}],"members":{"searchEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":2},"arguments":["searchEnabled"]}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":5},"arguments":["change"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":28,"character":25},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":29,"character":18},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":30,"character":36}]}],"ngOnInit":[{"__symbolic":"method"}]}},"ISelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":4}],"declarations":[{"__symbolic":"reference","name":"ISelect"},{"__symbolic":"reference","name":"CSSImagePipe"},{"__symbolic":"reference","name":"ISelectDirective"}],"exports":[{"__symbolic":"reference","name":"ISelect"},{"__symbolic":"reference","name":"CSSImagePipe"},{"__symbolic":"reference","name":"ISelectDirective"}],"entryComponents":[{"__symbolic":"reference","name":"ISelect"}],"providers":[{"__symbolic":"reference","name":"CSSImagePipe"},{"__symbolic":"reference","name":"ISelectDirective"}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA","line":27,"character":12}]}]}],"members":{}}},"origins":{"ISelect":"./src/app/iselect/components/iselect.component","CSSImagePipe":"./src/app/iselect/components/iselect.component","ISelectDirective":"./src/app/iselect/directives/iselect.directive","ISelectModule":"./src/app/iselect/iselect.module"},"importAs":"icon-select"}
+{"__symbolic":"module","version":4,"metadata":{"ISelect":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":40,"character":1},"arguments":[{"selector":"i-select","template":"<div class=\"i-select\" [id]=\"configID\">\n    <div class=\"selected-icon\">\n        <div class=\"select-icon-block\" \n            [style.background]=\"config.selectedItem ? (config.selectedItem.value | CSSImage:true)  : ''\"></div>\n        <div class=\"fa-li fa fa-spinner fa-spin select-icon-spin3\" *ngIf=\"config.loading\"></div>\n    </div>\n    <a href=\"#\" class=\"i-select-button\" \n        (click)=\"popIcons($event)\" \n        (keyup)=\"keyboardTracker($event)\" >\n    <span class=\"off-screen\" id=\"{{configID}}name\" [textContent]=\"configName\"></span>\n    <span class=\"select-icon-down-dir\"></span>\n    </a>\n</div>\n<div class=\"i-select-popup\" [style.display]=\"config.open ? 'block':'none'\" >\n    <div class=\"i-select-search\" (click)=\"searchInput.focus()\" *ngIf=\"searchEnabled\">\n        <input type=\"text\" placeholder=\"placeholder\" #searchInput\n            class=\"icons-search-input\" \n            [class.focused]=\"config.isFocused\"\n            (focus)=\"config.isFocused=true\"\n            (blur)=\"config.isFocused=false\"\n            (keyup)=\"performSearch($event, searchInput.value)\" />\n        <div class=\"select-icon-search\" #searchIcon [class]=\"config.isSearch ? 'select-icon-cancel' : 'select-icon-search'\"></div>\n    </div>\n    <div class=\"clear-fix\"></div>\n    <div role=\"list\" attr.aria-nameledby=\"{{configID}}name\" class=\"select-icons-container\" #iconContainer>\n    <div \n        role=\"listitem\" \n        class=\"select-box\" \n        *ngFor=\"let item of displayItems; let i = index\">\n        <div [class.highlight-icon]=\"highlightIndex==i\"\n            [class.cover]=\"!true\" [title]=\"showIconName ? '':item.name\"\n            [style.background]=\"item.value | CSSImage:true\"\n            (click)=\"selectIcon(i)\"><span class=\"off-screen\" [textContent]=\"item.name\"></span></div>\n    </div>\n    </div>\n    <div class=\"icons-select-error\" *ngIf=\"config.hasError\"><div class=\"select-icon-block\" data-select-value=\"select-icon-block\"></div></div>\n    <div class=\"i-select-footer\" *ngIf=\"config.showFooter\">\n    <div class=\"i-select-arrows\">\n        <div class=\"fa fa-angle-left\"\n            (click)=\"prev($event)\"\n            [class.disabled]=\"config.currentPage==1\">\n            <span class=\"prev\" [textContent]=\"'previous'\"></span>\n        </div>\n        <div class=\"fa fa-angle-double-left\"\n                (click)=\"first($event)\"\n                [class.disabled]=\"config.currentPage==1\">\n            <span class=\"first\" [textContent]=\"'first'\"></span>\n        </div>\n        <div class=\"i-select-pages\"><span [textContent]=\"config.currentPage + ' / ' + config.totalPage\"></span></div>\n        <div class=\"fa fa-angle-double-right\"\n                (click)=\"last($event)\"\n                [class.disabled]=\"config.currentPage==config.totalPage\">\n            <span class=\"last\" [textContent]=\"'last'\"></span>\n        </div>\n        <div class=\"fa fa-angle-right\"\n                (click)=\"next($event)\"\n                [class.disabled]=\"config.currentPage==config.totalPage\">\n            <span class=\"next\" [textContent]=\"'nextPage'\"></span>\n        </div>\n    </div>\n    </div>\n    <div class=\"name\" *ngIf=\"showIconName\" [textContent]=\"config.selectedItem ? config.selectedItem.name : ''\"></div>\n</div>\n","styles":[":host *{\n  margin:0;\n  padding:0;\n  border:0;\n  vertical-align:baseline; }\n\n:host{\n  display:block;\n  text-align:left;\n  vertical-align:middle;\n  margin:2px 0; }\n  :host .off-screen{\n    display:block;\n    text-indent:-9999px;\n    width:0;\n    height:0; }\n  :host .select-box{\n    background-color:#ccc;\n    background-size:contain;\n    display:inline-block;\n    margin:2px;\n    width:60px;\n    line-height:42px;\n    text-align:center;\n    cursor:pointer;\n    vertical-align:top;\n    height:40px;\n    border:1px solid #EFEFEF; }\n    :host .select-box:hover, :host .select-box:focus{\n      border:1px solid #888; }\n    :host .select-box div{\n      background-repeat:repeat;\n      background-color:transparent;\n      background-position:0 0;\n      border:1px solid transparent;\n      height:40px;\n      width:60px; }\n    :host .select-box .highlight-icon{\n      background-repeat:repeat;\n      background-color:transparent;\n      background-position:0 0;\n      border:2px solid red;\n      height:40px;\n      width:60px; }\n  :host .name{\n    color:#444;\n    font-size:0.8em;\n    text-align:center;\n    text-shadow:0 1px 0 #eee; }\n  :host .i-select-footer{\n    line-height:12px;\n    text-align:center; }\n    :host .i-select-footer .i-select-arrows{\n      float:right; }\n      :host .i-select-footer .i-select-arrows div{\n        color:#444;\n        cursor:pointer;\n        display:inline-block;\n        height:16px; }\n        :host .i-select-footer .i-select-arrows div.disabled{\n          color:#ddd;\n          cursor:default;\n          font-weight:bold; }\n        :host .i-select-footer .i-select-arrows div .next,\n        :host .i-select-footer .i-select-arrows div .prev,\n        :host .i-select-footer .i-select-arrows div .last,\n        :host .i-select-footer .i-select-arrows div .first{\n          cursor:pointer;\n          width:auto;\n          display:inline-block;\n          height:39px;\n          text-indent:-99999px;\n          -webkit-box-sizing:border-box;\n                  box-sizing:border-box; }\n        :host .i-select-footer .i-select-arrows div .i-select-pages{\n          font-size:11px; }\n        :host .i-select-footer .i-select-arrows div:hover, :host .i-select-footer .i-select-arrows div:focus{\n          color:#777777; }\n  :host .selected-icon{\n    background-color:#ccc;\n    background-size:contain;\n    display:block;\n    width:60px;\n    height:100%;\n    float:left;\n    position:relative;\n    text-align:center; }\n    :host .selected-icon div{\n      cursor:default;\n      color:#404040;\n      height:100%;\n      width:60px; }\n  :host .i-select{\n    height:22px;\n    background-color:#fff;\n    border:1px solid #ededed;\n    border-radius:0 4px 4px 0; }\n    :host .i-select.focused{\n      border:1px dotted #444; }\n  :host .i-select-category select{\n    border:0;\n    line-height:20px;\n    padding:3px;\n    width:100%;\n    height:40px;\n    -ms-box-sizing:border-box;\n    -o-box-sizing:border-box;\n    -webkit-box-sizing:border-box;\n    box-sizing:border-box;\n    margin-bottom:5px;\n    font-size:12px;\n    display:block;\n    border:1px solid #EDEDED;\n    color:#404040;\n    -ms-box-shadow:none;\n    -o-box-shadow:none;\n    -webkit-box-shadow:none;\n    box-shadow:none;\n    outline:none; }\n    :host .i-select-category select option{\n      padding:10px; }\n  :host .i-select-button{\n    cursor:pointer;\n    display:block;\n    float:left;\n    height:100%;\n    text-align:center;\n    width:20px;\n    background-color:#f4f4f4;\n    border-left:1px solid #e1e1e1;\n    border-radius:0 4px 4px 0; }\n    :host .i-select-button:focus .select-icon-up-dir{\n      border-top:5px solid grey; }\n    :host .i-select-button:focus .select-icon-down-dir{\n      border-top:5px solid grey; }\n    :host .i-select-button:hover, :host .i-select-button:focus{\n      background-color:#f1f1f1 div;\n        background-color-color:#999999; }\n    :host .i-select-button div{\n      color:#aaaaaa;\n      text-shadow:0px 1px 0px #FFF; }\n    :host .i-select-button .select-icon-down-dir{\n      border-left:5px solid transparent;\n      border-right:5px solid transparent;\n      border-top:5px solid black;\n      float:left;\n      height:0;\n      margin:10px 5px;\n      width:0; }\n    :host .i-select-button .select-icon-up-dir{\n      border-left:5px solid transparent;\n      border-right:5px solid transparent;\n      border-top:5px solid black;\n      float:left;\n      height:0;\n      margin:15px 10px;\n      width:0; }\n  :host .select-icons-container{\n    width:100%;\n    -webkit-box-sizing:border-box;\n    box-sizing:border-box;\n    padding:5px;\n    background-color:#fff;\n    border:1px solid #d3d3d3; }\n    :host .select-icons-container .loading{\n      color:#eee;\n      font-size:24px;\n      margin:0 auto;\n      padding:20px 0;\n      text-align:center;\n      width:100%; }\n  :host .i-select-popup{\n    position:absolute;\n    z-index:10000;\n    background-color:#fefefe;\n    padding:5px;\n    height:auto;\n    width:210px;\n    margin-top:-1px;\n    -ms-box-shadow:0 1px 1px rgba(0, 0, 0, 0.04);\n    -o-box-shadow:0 1px 1px rgba(0, 0, 0, 0.04);\n    -webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.04);\n    box-shadow:0 1px 1px rgba(0, 0, 0, 0.04);\n    border:1px solid #E5E5E5; }\n  :host .i-select-search{\n    position:relative; }\n    :host .i-select-search input[type=\"text\"]{\n      text-transform:uppercase;\n      border:1px solid #EDEDED;\n      color:#404040;\n      -ms-box-shadow:none;\n      -o-box-shadow:none;\n      -webkit-box-shadow:none;\n      box-shadow:none;\n      outline:none;\n      width:100%;\n      margin:3px 0;\n      padding:3px;\n      -webkit-box-sizing:border-box;\n              box-sizing:border-box; }\n    :host .i-select-search div{\n      color:#ddd;\n      position:absolute;\n      right:10px;\n      top:7px; }\n  :host input::-webkit-input-placeholder{\n    text-transform:uppercase;\n    color:#ddd; }\n  :host input:-moz-placeholder{\n    text-transform:uppercase;\n    color:#ddd; }\n  :host input::-moz-placeholder{\n    text-transform:uppercase;\n    color:#ddd; }\n  :host input:-ms-input-placeholder{\n    text-transform:uppercase;\n    color:#ddd !important; }\n  :host .select-icon-spin3{\n    position:absolute;\n    top:0;\n    left:0;\n    width:16px !important;\n    height:16px !important;\n    display:inline-block;\n    margin:0 !important;\n    padding:3px !important; }\n  :host .icons-select-error div:before{\n    color:#444; }\n  :host .select-icon-search{\n    cursor:default; }\n  :host .select-icon-cancel{\n    cursor:pointer; }\n  :host .select-icon-block{\n    background-color:#fed0d0;\n    background-size:contain; }\n  :host .current-icon,\n  :host .current-icon:hover,\n  :host .current-icon:focus{\n    border:1px solid #444; }\n  :host .fa{\n    padding:3px 6px;\n    margin-top:5px; }\n"],"providers":[{"__symbolic":"reference","name":"CSSImagePipe"}]}]}],"members":{"searchIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":355,"character":2},"arguments":["searchIcon",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":355,"character":33}}]}]}],"searchInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":356,"character":2},"arguments":["searchInput",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":356,"character":34}}]}]}],"iconContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":357,"character":2},"arguments":["iconContainer",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":357,"character":36}}]}]}],"configID":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":359,"character":2},"arguments":["id"]}]}],"configName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":362,"character":2},"arguments":["name"]}]}],"searchEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":369,"character":2},"arguments":["searchEnabled"]}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":372,"character":2},"arguments":["size"]}]}],"multiselect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":375,"character":2},"arguments":["multiselect"]}]}],"showIconName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":379,"character":2},"arguments":["showIconName"]}]}],"configData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":382,"character":2},"arguments":["entries"]}]}],"onchange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":387,"character":2},"arguments":["onchange"]}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":406,"character":2},"arguments":["window:click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":415,"character":17},{"__symbolic":"reference","module":"@angular/core","name":"Renderer","line":415,"character":46}]}],"ngOnInit":[{"__symbolic":"method"}],"keyboardTracker":[{"__symbolic":"method"}],"performSearch":[{"__symbolic":"method"}],"resetSearch":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"prev":[{"__symbolic":"method"}],"last":[{"__symbolic":"method"}],"first":[{"__symbolic":"method"}],"renderIconContainer":[{"__symbolic":"method"}],"toggleIconSelector":[{"__symbolic":"method"}],"findSelectedIndex":[{"__symbolic":"method"}],"selectIcon":[{"__symbolic":"method"}],"highlightIcon":[{"__symbolic":"method"}],"popIcons":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"CSSImagePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":28,"character":1},"arguments":[{"name":"CSSImage"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":31,"character":32}]}],"transform":[{"__symbolic":"method"}]}},"ISelectDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":15,"character":1},"arguments":[{"selector":"[i-select]"}]}],"members":{"searchEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":2},"arguments":["searchEnabled"]}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":5},"arguments":["change"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":28,"character":25},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":29,"character":18},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":30,"character":36}]}],"ngOnInit":[{"__symbolic":"method"}]}},"ISelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":4}],"declarations":[{"__symbolic":"reference","name":"ISelect"},{"__symbolic":"reference","name":"CSSImagePipe"},{"__symbolic":"reference","name":"ISelectDirective"}],"exports":[{"__symbolic":"reference","name":"ISelect"},{"__symbolic":"reference","name":"CSSImagePipe"},{"__symbolic":"reference","name":"ISelectDirective"}],"entryComponents":[{"__symbolic":"reference","name":"ISelect"}],"providers":[{"__symbolic":"reference","name":"CSSImagePipe"},{"__symbolic":"reference","name":"ISelectDirective"}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA","line":27,"character":12}]}]}],"members":{}}},"origins":{"ISelect":"./src/app/iselect/components/iselect.component","CSSImagePipe":"./src/app/iselect/components/iselect.component","ISelectDirective":"./src/app/iselect/directives/iselect.directive","ISelectModule":"./src/app/iselect/iselect.module"},"importAs":"icon-select"}

package.json

 {
   "name": "icon-select",
-  "version": "0.0.1",
+  "version": "1.1.0",
   "license": "MIT",
@@ -14,3 +14,6 @@ "scripts": {
   "keywords": [
-    "Angular 4",
+    "Angular 2+",
+    "Angular 4+",
+    "Angular 5+",
+    "Angular 6+",
     "select",
@@ -26,6 +29,5 @@ "dropdown",
   "dependencies": {
-    "@angular/common": "^5.0.0 || ^4.0.0 || ^2.0.0",
-    "@angular/compiler": "^5.0.0 || ^4.0.0 || ^2.0.0",
-    "@angular/core": "^5.0.0 || ^4.0.0 || ^2.0.0",
-    "@angular/platform-browser": "^5.2.9",
+    "@angular/common": "^6.0.0 || ^5.0.0 || ^4.0.0 || ^2.0.0",
+    "@angular/compiler": "^6.0.0 || ^5.0.0 || ^4.0.0 || ^2.0.0",
+    "@angular/core": "^6.0.0 || ^5.0.0 || ^4.0.0 || ^2.0.0",
     "core-js": "^2.4.1",
@@ -38,3 +40,5 @@ "font-awesome": "^4.7.0",
     "@angular/cli": "^1.6.7",
-    "@angular/compiler-cli": "^5.0.0 || ^4.0.0 || ^2.0.0",
+    "@angular/compiler-cli": "^6.0.0 || ^5.0.0 || ^4.0.0 || ^2.0.0",
+    "@angular/platform-browser": "^6.0.0 || ^5.0.0 || ^4.0.0 || ^2.0.0",
+    "rxjs": "^6.2.2",
     "@types/node": "^6.0.60",
@@ -41,0 +45,0 @@ "codelyzer": "^3.2.0",

README.md

@@ -5,4 +5,12 @@ # Welcome to ICon Select!
 
-[Live Demo](https://iselect.stackblitz.io) | [Source code](https://github.com/msalehisedeh/iselect)
+**NOTE:** Starting with version 1.1.0 this library is compatible with Angular 6+.
 
+[Live Demo](https://iselect.stackblitz.io) | [Source code](https://github.com/msalehisedeh/iselect/tree/master/src/app) | [Comments/Requests](https://github.com/msalehisedeh/iselect/issues)
+
+# Version 1.1.0
+Updated libraries to become compatible with Angular 6+. 
+
+# Version 1.0.0
+Compiled with AOT option and resolved issues.
+
 # Version 0.0.1
@@ -9,0 +17,0 @@

src/app/iselect/components/iselect.component.d.ts

@@ -28,8 +28,19 @@ import { PipeTransform } from '@angular/core';
     multiselect: boolean;
+    showIconName: boolean;
     configData: IconInfo[];
-    private displayItems;
+    displayItems: IconInfo[];
     onchange: EventEmitter<{}>;
     private highlightIndex;
     private searchedData;
-    private config;
+    config: {
+        totalPage: number;
+        currentPage: number;
+        open: boolean;
+        showFooter: boolean;
+        hasError: boolean;
+        isFocused: boolean;
+        isSearch: boolean;
+        loading: boolean;
+        selectedItem: IconInfo;
+    };
     onClick($event: KeyboardEvent): void;
@@ -36,0 +47,0 @@ private el;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

297958

increased by0.67%

Dependency count

7

decreased by-12.5%

Lines of code

1695

increased by0.89%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

58

increased by16%

Worsened metrics

Dev dependency count

11

increased by22.22%

Dependency changes

• + Added@angular/common@6.1.10(transitive)

• + Added@angular/compiler@6.1.10(transitive)

• + Added@angular/core@6.1.10(transitive)

• + Addedrxjs@6.6.7(transitive)

• - Removed@angular/platform-browser@^5.2.9

• - Removed@angular/common@5.2.11(transitive)

• - Removed@angular/compiler@5.2.11(transitive)

• - Removed@angular/core@5.2.11(transitive)

• - Removed@angular/platform-browser@5.2.11(transitive)

• - Removedrxjs@5.5.12(transitive)

• - Removedsymbol-observable@1.0.1(transitive)

• Updated@angular/common@^6.0.0 || ^5.0.0 || ^4.0.0 || ^2.0.0

• Updated@angular/compiler@^6.0.0 || ^5.0.0 || ^4.0.0 || ^2.0.0

• Updated@angular/core@^6.0.0 || ^5.0.0 || ^4.0.0 || ^2.0.0