[{"__symbolic":"module","version":3,"metadata":{"newEntityLen":3,"SingleSelectComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"SingleSelectComponent"},"multi":true}],"selector":"adm-single-select","styles":["*, *:before, *:after { box-sizing: border-box; } .adm-spinner-container { height: 20px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 20px; } .adm-spinner-container .spinner { background: #666; height: 1px; width: 25%; } .adm-spinner-container .spinner.spinner { left: 50%; opacity: .3; position: absolute; top: 50%; transform-origin: -100% 0; } .adm-spinner-container .spinner.spinner-1 { animation: spinner-animation 0.8s 0.06667s infinite; transform: translate(100%, 0) rotate(30deg); } .adm-spinner-container .spinner.spinner-2 { animation: spinner-animation 0.8s 0.13333s infinite; transform: translate(100%, 0) rotate(60deg); } .adm-spinner-container .spinner.spinner-3 { animation: spinner-animation 0.8s 0.2s infinite; transform: translate(100%, 0) rotate(90deg); } .adm-spinner-container .spinner.spinner-4 { animation: spinner-animation 0.8s 0.26667s infinite; transform: translate(100%, 0) rotate(120deg); } .adm-spinner-container .spinner.spinner-5 { animation: spinner-animation 0.8s 0.33333s infinite; transform: translate(100%, 0) rotate(150deg); } .adm-spinner-container .spinner.spinner-6 { animation: spinner-animation 0.8s 0.4s infinite; transform: translate(100%, 0) rotate(180deg); } .adm-spinner-container .spinner.spinner-7 { animation: spinner-animation 0.8s 0.46667s infinite; transform: translate(100%, 0) rotate(210deg); } .adm-spinner-container .spinner.spinner-8 { animation: spinner-animation 0.8s 0.53333s infinite; transform: translate(100%, 0) rotate(240deg); } .adm-spinner-container .spinner.spinner-9 { animation: spinner-animation 0.8s 0.6s infinite; transform: translate(100%, 0) rotate(270deg); } .adm-spinner-container .spinner.spinner-10 { animation: spinner-animation 0.8s 0.66667s infinite; transform: translate(100%, 0) rotate(300deg); } .adm-spinner-container .spinner.spinner-11 { animation: spinner-animation 0.8s 0.73333s infinite; transform: translate(100%, 0) rotate(330deg); } .adm-spinner-container .spinner.spinner-12 { animation: spinner-animation 0.8s 0.8s infinite; transform: translate(100%, 0) rotate(360deg); } @keyframes spinner-animation { 0% { opacity: .3; } 10% { opacity: 1; } 100% { opacity: .3; } } .adm-select { display: inline-block; position: relative; width: 100%; background: #fff; border: 1px solid #cfd3d7; border-radius: 3px; color: #333; font-size: 14px; vertical-align: middle; } .adm-select__input input[type='text'], .adm-select__input textarea { display: block; width: 100%; border: 0; margin: 0; padding: 0; outline: none !important; border-radius: 0; background: transparent; -webkit-appearance: none; white-space: normal; user-select: none; text-decoration: none; color: inherit; font-family: inherit; font-size: inherit; padding: 8px 30px 8px 16px; line-height: 1.25; resize: none; min-width: 150px; overflow-x: hidden; } .adm-select__input input[type='text'][readonly], .adm-select__input textarea[readonly] { cursor: pointer; } .adm-select__caret { border: 0; padding: 0; box-shadow: none; outline: none !important; background: transparent; border-radius: 0; color: inherit; font-family: inherit; font-size: inherit; position: absolute; top: 0; bottom: 0; right: 0; font-size: 0; color: transparent; width: 30px; border-radius: 0 3px 3px 0; cursor: pointer; } .adm-select__caret:before { content: \"\"; border-color: #888 transparent transparent; border-style: solid; border-width: 5px 4px 0; height: 0; width: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .adm-select__view-item { position: absolute; bottom: 100%; right: 0; margin-bottom: 8px; margin-right: 9px; transition: all .1s linear; opacity: 0; } .adm-select__view-item__btn { border: 0; padding: 0; box-shadow: none; outline: none !important; background: transparent; border-radius: 0; color: inherit; font-family: inherit; font-size: inherit; cursor: pointer; text-decoration: none !important; color: #333 !important; font-size: 13px; } .adm-select__view-item__btn i { font-size: 16px; vertical-align: top; } .adm-select__options { display: none; position: absolute; top: 100%; left: -1px; right: -1px; background: #fff; border: 1px solid #cfd3d7; border-top-width: 0; margin-top: 1px; border-radius: 0 0 3px 3px; z-index: 102; overflow: hidden; } .adm-select__options__list { max-height: 165px; overflow: auto; margin: 0 !important; padding: 0 !important; list-style: none !important; } .adm-select__options__list.clear-selection { border-top: 1px solid #cfd3d7; } .adm-select__options__list.clear-selection li { font-weight: bold; background: transparent !important; } .adm-select__options__list > p { margin: 0; padding: 10px 8px; font-weight: bold; border-top: 1px solid #cfd3d7; line-height: 1; } .adm-select__options__list > p:first-child { border-top: none; } .adm-select__options__list > p.hidden { display: none; } .adm-select__options__list > li, .adm-select__options__list > ol { position: relative; cursor: pointer; display: block; border: none; height: auto; text-align: left; border-top: none; line-height: 1em; padding: 10px 16px; font-size: 13px; text-transform: none; font-weight: normal; box-shadow: none; overflow: hidden; text-overflow: ellipsis; } .adm-select__options__list > li.is-selected, .adm-select__options__list > ol.is-selected { font-weight: 600; } .adm-select__options__list > li.hidden, .adm-select__options__list > ol.hidden { display: none; } .adm-select__options__list > li:hover, .adm-select__options__list > li.is-selected, .adm-select__options__list > li.focused, .adm-select__options__list > ol:hover, .adm-select__options__list > ol.is-selected, .adm-select__options__list > ol.focused { background-color: #eee; } .adm-select__options__list:hover > *.is-selected { background: transparent; } .adm-select__options__list:hover > *.is-selected:hover { background-color: #eee; } .adm-select__options__list b { display: block; margin-top: 5px; font-weight: 700; } .adm-select__add-new-btn { border: 0; padding: 0; box-shadow: none; outline: none !important; background: transparent; border-radius: 0; color: inherit; font-family: inherit; font-size: inherit; padding: 8px 32px; border-top: 1px solid #cfd3d7; width: 100%; position: relative; text-align: left; cursor: pointer; } .adm-select__add-new-btn i { font-size: 16px; position: absolute; top: 8px; left: 11px; } .adm-select__add-new-btn small { font-size: .75em; } .adm-select.is-disabled { pointer-events: none; opacity: .7; user-select: none; } .adm-select.is-disabled:after { content: ''; display: inline-block; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background: #000; position: absolute; border-radius: 3px; opacity: .1; cursor: none; } .adm-select.is-active { border-radius: 3px 3px 0 0; } .adm-select.is-active .adm-select__options { display: block; } .adm-select.is-active .adm-select__caret:before { transform: rotate(180deg); } .adm-select.is-drop-up { border-radius: 0 0 3px 3px; } .adm-select.is-drop-up .adm-select__options { top: auto; bottom: 100%; border-radius: 3px 3px 0 0; border-top-width: 1px; } .adm-select.pending-data-load .adm-select__caret:before, .adm-select.pending-data-load .adm-select__caret:after { display: none; } adm-input-container:hover .adm-select__view-item { opacity: .7; } adm-input-container:hover .adm-select__view-item:hover { opacity: 1; } "],"template":"<!--<pre>{{value|json:2}}</pre>--> <!-- search input --> <div class=\"adm-select__input\" [formGroup]=\"form\"> <textarea spellcheck=\"false\" rows=\"1\" [readonly]=\"disableSearch || isPendingRequest\" [tabindex]=\"disabled ? -1 : 0\" [placeholder]=\"placeholder\" (click)=\"inputClickHandler($event)\" (keyup)=\"inputKeyUpHandler($event)\" (keydown.enter)=\"enterKeydownHandler($event)\" (focus)=\"showResults($event)\" (blur)=\"inputBlurHandler($event)\" formControlName=\"search\"></textarea> <!-- toggle button --> <button class=\"adm-select__caret\" tabindex=\"-1\" type=\"button\" (click)=\"toggleResults($event)\"> toggle <div class=\"adm-spinner-container\" *ngIf=\"!isDataLoaded\"> <div class=\"spinner spinner-1\"></div> <div class=\"spinner spinner-2\"></div> <div class=\"spinner spinner-3\"></div> <div class=\"spinner spinner-4\"></div> <div class=\"spinner spinner-5\"></div> <div class=\"spinner spinner-6\"></div> <div class=\"spinner spinner-7\"></div> <div class=\"spinner spinner-8\"></div> <div class=\"spinner spinner-9\"></div> <div class=\"spinner spinner-10\"></div> <div class=\"spinner spinner-11\"></div> <div class=\"spinner spinner-12\"></div> </div> </button> <!-- / toggle button --> <!-- view link --> <ng-template [ngIf]=\"_viewPath && value\"> <div class=\"adm-select__view-item\"> <a class=\"adm-select__view-item__btn\" target=\"_blank\" href=\"{{_viewPath}}/{{value}}\"> View <i class=\"material-icons\">launch</i> </a> </div> </ng-template> <!-- /view link --> </div> <!-- / search input --> <!-- options list wrapper --> <div class=\"adm-select__options\" *ngIf=\"isResultsShown\" (click)=\"resultsClickHandler($event)\"> <!-- lists results --> <ul class=\"adm-select__options__list\"> <!-- template for list without groups --> <ng-template [ngIf]=\"!isWithGroups\"> <li *ngFor=\"let item of _options; let i = index; trackBy: trackListByFn;\" (mouseover)=\"focusedResultIndex = i;\" [ngClass]=\"{'hidden':item.hidden, 'is-selected':item.value === this.value && item.value !== null, 'focused':focusedResultIndex === i}\" (click)=\"selectItemHandler(item.value, i)\">{{item.label}} </li> </ng-template> <!-- / template for list without groups --> <!-- template for list with groups --> <ng-template [ngIf]=\"isWithGroups\"> <ng-template ngFor let-group [ngForOf]=\"_options\" let-i=\"index\"> <p [ngClass]=\"{'hidden':group.hidden}\">{{group.name}}</p> <li *ngFor=\"let item of group?.values; trackBy: trackListByFn;\" [ngClass]=\"{'hidden':item.hidden, 'is-selected':item.selected}\" (click)=\"selectItemHandler(item.value)\">{{item.label}} </li> </ng-template> </ng-template> <!-- / template for list with groups --> <!-- results el --> <li *ngIf=\"(!allowCreateEntity && isOptionsNotFound) || (allowCreateEntity && isOptionsNotFound && !searchModel.value)\"> {{isPendingRequest ? 'Searching...' : !!serverError ? 'The results could not be loaded.' : 'No results found'}} </li> <!-- add new entity btn --> <li *ngIf=\"allowCreateEntity && isOptionsNotFound && searchModel?.value?.length>0\" (click)=\"addNewEntityToOptions($event);\"> {{searchModel.value}} <b>{{newItemPostfix}}</b> </li> <!-- / add new entity btn --> </ul> <!-- / lists results --> <!-- clear selection btn --> <ul *ngIf=\"allowClear && options.length && !isOptionsNotFound && value\" class=\"adm-select__options__list clear-selection\"> <li (click)=\"clearSelection($event)\">None</li> </ul> <!-- / clear selection btn --> <!-- load more button --> <button *ngIf=\"totalItemsInAjaxResponse > _options.length && !isOptionsNotFound && !isPendingRequest\" class=\"adm-select__add-new-btn\" (click)=\"loadMoreOptionsFromServer($event);\" type=\"button\"> <i class=\"material-icons\">cached</i> Load more items <small>({{_options.length}} from {{totalItemsInAjaxResponse}} shown) </small> </button> <!-- /load more button --> <!-- add new btn --> <button *ngIf=\"showAddNewBtn\" class=\"adm-select__add-new-btn\" type=\"button\" (click)=\"onAddClicked.emit($event); isResultsShown = false;\"> <i class=\"material-icons\">add</i> Add new </button> <!-- / add new btn --> </div> <!-- / options list wrapper --> <!-- validators --> <adm-validator-messages *ngIf=\"allowCreateEntity\" [field]=\"searchModel\"></adm-validator-messages> <!-- / validators --> ","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"host":{"[class.adm-select]":"true","[class.disabled]":"disabled","[class.invalid]":"!isQueryStringValid","[class.is-active]":"isResultsShown","[class.is-drop-up]":"isShowResultsOnTop","[class.pending-data-load]":"!isDataLoaded","[class.has_value]":"!!value","[class.without_value]":"!value","$quoted$":["[class.adm-select]","[class.disabled]","[class.invalid]","[class.is-active]","[class.is-drop-up]","[class.pending-data-load]","[class.has_value]","[class.without_value]"]}}]}],"members":{"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allowClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"entityName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showAddNewBtn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allowCreateEntity":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ajax":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"viewPath":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onNewEntityCreated":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onShown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onHidden":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onAddClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onAjaxResponseReceived":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/http","name":"Http"},{"__symbolic":"reference","module":"./config.service","name":"SingleSelectConfig"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"subscribeToSearchModelChange":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"resetValue":[{"__symbolic":"method"}],"clearSelection":[{"__symbolic":"method"}],"setSelectedItem":[{"__symbolic":"method"}],"selectItemHandler":[{"__symbolic":"method"}],"loadMoreOptionsFromServer":[{"__symbolic":"method"}],"getOptionsFromServer":[{"__symbolic":"method"}],"getRequestParams":[{"__symbolic":"method"}],"sendRequest":[{"__symbolic":"method"}],"responseMapper":[{"__symbolic":"method"}],"filterOptions":[{"__symbolic":"method"}],"filterFlatOptions":[{"__symbolic":"method"}],"filterOptionsWithGroup":[{"__symbolic":"method"}],"showResults":[{"__symbolic":"method"}],"toggleResults":[{"__symbolic":"method"}],"addNewEntityToOptions":[{"__symbolic":"method"}],"setSelectedItemToSearchModel":[{"__symbolic":"method"}],"trimLabel":[{"__symbolic":"method"}],"calculateResultsPosition":[{"__symbolic":"method"}],"calculateTextAreaHeight":[{"__symbolic":"method"}],"enterClickHandler":[{"__symbolic":"method"}],"inputKeyUpHandler":[{"__symbolic":"method"}],"setScrollForList":[{"__symbolic":"method"}],"inputBlurHandler":[{"__symbolic":"method"}],"enterKeydownHandler":[{"__symbolic":"method"}],"inputClickHandler":[{"__symbolic":"method"}],"resultsClickHandler":[{"__symbolic":"method"}],"documentClickHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document: click",["$event"]]}]}],"ngOnDestroy":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"trackListByFn":[{"__symbolic":"method"}],"searchModelValidator":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"newEntityLen":3,"SingleSelectComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"SingleSelectComponent"},"multi":true}],"selector":"adm-single-select","styles":["*, *:before, *:after { box-sizing: border-box; } .adm-spinner-container { height: 20px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 20px; } .adm-spinner-container .spinner { background: #666; height: 1px; width: 25%; } .adm-spinner-container .spinner.spinner { left: 50%; opacity: .3; position: absolute; top: 50%; transform-origin: -100% 0; } .adm-spinner-container .spinner.spinner-1 { animation: spinner-animation 0.8s 0.06667s infinite; transform: translate(100%, 0) rotate(30deg); } .adm-spinner-container .spinner.spinner-2 { animation: spinner-animation 0.8s 0.13333s infinite; transform: translate(100%, 0) rotate(60deg); } .adm-spinner-container .spinner.spinner-3 { animation: spinner-animation 0.8s 0.2s infinite; transform: translate(100%, 0) rotate(90deg); } .adm-spinner-container .spinner.spinner-4 { animation: spinner-animation 0.8s 0.26667s infinite; transform: translate(100%, 0) rotate(120deg); } .adm-spinner-container .spinner.spinner-5 { animation: spinner-animation 0.8s 0.33333s infinite; transform: translate(100%, 0) rotate(150deg); } .adm-spinner-container .spinner.spinner-6 { animation: spinner-animation 0.8s 0.4s infinite; transform: translate(100%, 0) rotate(180deg); } .adm-spinner-container .spinner.spinner-7 { animation: spinner-animation 0.8s 0.46667s infinite; transform: translate(100%, 0) rotate(210deg); } .adm-spinner-container .spinner.spinner-8 { animation: spinner-animation 0.8s 0.53333s infinite; transform: translate(100%, 0) rotate(240deg); } .adm-spinner-container .spinner.spinner-9 { animation: spinner-animation 0.8s 0.6s infinite; transform: translate(100%, 0) rotate(270deg); } .adm-spinner-container .spinner.spinner-10 { animation: spinner-animation 0.8s 0.66667s infinite; transform: translate(100%, 0) rotate(300deg); } .adm-spinner-container .spinner.spinner-11 { animation: spinner-animation 0.8s 0.73333s infinite; transform: translate(100%, 0) rotate(330deg); } .adm-spinner-container .spinner.spinner-12 { animation: spinner-animation 0.8s 0.8s infinite; transform: translate(100%, 0) rotate(360deg); } @keyframes spinner-animation { 0% { opacity: .3; } 10% { opacity: 1; } 100% { opacity: .3; } } .adm-select { display: inline-block; position: relative; width: 100%; background: #fff; border: 1px solid #cfd3d7; border-radius: 3px; color: #333; font-size: 14px; vertical-align: middle; } .adm-select__input input[type='text'], .adm-select__input textarea { display: block; width: 100%; border: 0; margin: 0; padding: 0; outline: none !important; border-radius: 0; background: transparent; -webkit-appearance: none; white-space: normal; user-select: none; text-decoration: none; color: inherit; font-family: inherit; font-size: inherit; padding: 8px 30px 8px 16px; line-height: 1.25; resize: none; min-width: 150px; overflow-x: hidden; } .adm-select__input input[type='text'][readonly], .adm-select__input textarea[readonly] { cursor: pointer; } .adm-select__caret { border: 0; padding: 0; box-shadow: none; outline: none !important; background: transparent; border-radius: 0; color: inherit; font-family: inherit; font-size: inherit; position: absolute; top: 0; bottom: 0; right: 0; font-size: 0; color: transparent; width: 30px; border-radius: 0 3px 3px 0; cursor: pointer; } .adm-select__caret:before { content: \"\"; border-color: #888 transparent transparent; border-style: solid; border-width: 5px 4px 0; height: 0; width: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .adm-select__view-item { position: absolute; bottom: 100%; right: 0; margin-bottom: 8px; margin-right: 9px; transition: all .1s linear; opacity: 0; } .adm-select__view-item__btn { border: 0; padding: 0; box-shadow: none; outline: none !important; background: transparent; border-radius: 0; color: inherit; font-family: inherit; font-size: inherit; cursor: pointer; text-decoration: none !important; color: #333 !important; font-size: 13px; } .adm-select__view-item__btn i { font-size: 16px; vertical-align: top; } .adm-select__options { display: none; position: absolute; top: 100%; left: -1px; right: -1px; background: #fff; border: 1px solid #cfd3d7; border-top-width: 0; margin-top: 1px; border-radius: 0 0 3px 3px; z-index: 102; overflow: hidden; } .adm-select__options__list { max-height: 165px; overflow: auto; margin: 0 !important; padding: 0 !important; list-style: none !important; } .adm-select__options__list.clear-selection { border-top: 1px solid #cfd3d7; } .adm-select__options__list.clear-selection li { font-weight: bold; background: transparent !important; } .adm-select__options__list > p { margin: 0; padding: 10px 8px; font-weight: bold; border-top: 1px solid #cfd3d7; line-height: 1; } .adm-select__options__list > p:first-child { border-top: none; } .adm-select__options__list > p.hidden { display: none; } .adm-select__options__list > li, .adm-select__options__list > ol { position: relative; cursor: pointer; display: block; border: none; height: auto; text-align: left; border-top: none; line-height: 1em; padding: 10px 16px; font-size: 13px; text-transform: none; font-weight: normal; box-shadow: none; overflow: hidden; text-overflow: ellipsis; } .adm-select__options__list > li.is-selected, .adm-select__options__list > ol.is-selected { font-weight: 600; } .adm-select__options__list > li.hidden, .adm-select__options__list > ol.hidden { display: none; } .adm-select__options__list > li:hover, .adm-select__options__list > li.is-selected, .adm-select__options__list > li.focused, .adm-select__options__list > ol:hover, .adm-select__options__list > ol.is-selected, .adm-select__options__list > ol.focused { background-color: #eee; } .adm-select__options__list:hover > *.is-selected { background: transparent; } .adm-select__options__list:hover > *.is-selected:hover { background-color: #eee; } .adm-select__options__list b { display: block; margin-top: 5px; font-weight: 700; } .adm-select__add-new-btn { border: 0; padding: 0; box-shadow: none; outline: none !important; background: transparent; border-radius: 0; color: inherit; font-family: inherit; font-size: inherit; padding: 8px 32px; border-top: 1px solid #cfd3d7; width: 100%; position: relative; text-align: left; cursor: pointer; } .adm-select__add-new-btn i { font-size: 16px; position: absolute; top: 8px; left: 11px; } .adm-select__add-new-btn small { font-size: .75em; } .adm-select.is-disabled { pointer-events: none; opacity: .7; user-select: none; } .adm-select.is-disabled:after { content: ''; display: inline-block; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background: #000; position: absolute; border-radius: 3px; opacity: .1; cursor: none; } .adm-select.is-active { border-radius: 3px 3px 0 0; } .adm-select.is-active .adm-select__options { display: block; } .adm-select.is-active .adm-select__caret:before { transform: rotate(180deg); } .adm-select.is-drop-up { border-radius: 0 0 3px 3px; } .adm-select.is-drop-up .adm-select__options { top: auto; bottom: 100%; border-radius: 3px 3px 0 0; border-top-width: 1px; } .adm-select.pending-data-load .adm-select__caret:before, .adm-select.pending-data-load .adm-select__caret:after { display: none; } adm-input-container:hover .adm-select__view-item { opacity: .7; } adm-input-container:hover .adm-select__view-item:hover { opacity: 1; } "],"template":"<!--<pre>{{value|json:2}}</pre>--> <!-- search input --> <div class=\"adm-select__input\" [formGroup]=\"form\"> <textarea spellcheck=\"false\" rows=\"1\" [readonly]=\"disableSearch || isPendingRequest\" [tabindex]=\"disabled ? -1 : 0\" [placeholder]=\"placeholder\" (click)=\"inputClickHandler($event)\" (keyup)=\"inputKeyUpHandler($event)\" (keydown.enter)=\"enterKeydownHandler($event)\" (focus)=\"showResults($event)\" (blur)=\"inputBlurHandler($event)\" formControlName=\"search\"></textarea> <!-- toggle button --> <button class=\"adm-select__caret\" tabindex=\"-1\" type=\"button\" (click)=\"toggleResults($event)\"> toggle <div class=\"adm-spinner-container\" *ngIf=\"!isDataLoaded\"> <div class=\"spinner spinner-1\"></div> <div class=\"spinner spinner-2\"></div> <div class=\"spinner spinner-3\"></div> <div class=\"spinner spinner-4\"></div> <div class=\"spinner spinner-5\"></div> <div class=\"spinner spinner-6\"></div> <div class=\"spinner spinner-7\"></div> <div class=\"spinner spinner-8\"></div> <div class=\"spinner spinner-9\"></div> <div class=\"spinner spinner-10\"></div> <div class=\"spinner spinner-11\"></div> <div class=\"spinner spinner-12\"></div> </div> </button> <!-- / toggle button --> <!-- view link --> <ng-template [ngIf]=\"_viewPath && value\"> <div class=\"adm-select__view-item\"> <a class=\"adm-select__view-item__btn\" target=\"_blank\" href=\"{{_viewPath}}/{{value}}\"> View <i class=\"material-icons\">launch</i> </a> </div> </ng-template> <!-- /view link --> </div> <!-- / search input --> <!-- options list wrapper --> <div class=\"adm-select__options\" *ngIf=\"isResultsShown\" (click)=\"resultsClickHandler($event)\"> <!-- lists results --> <ul class=\"adm-select__options__list\"> <!-- template for list without groups --> <ng-template [ngIf]=\"!isWithGroups\"> <li *ngFor=\"let item of _options; let i = index; trackBy: trackListByFn;\" (mouseover)=\"focusedResultIndex = i;\" [ngClass]=\"{'hidden':item.hidden, 'is-selected':item.value === this.value && item.value !== null, 'focused':focusedResultIndex === i}\" (click)=\"selectItemHandler(item.value, i)\">{{item.label}} </li> </ng-template> <!-- / template for list without groups --> <!-- template for list with groups --> <ng-template [ngIf]=\"isWithGroups\"> <ng-template ngFor let-group [ngForOf]=\"_options\" let-i=\"index\"> <p [ngClass]=\"{'hidden':group.hidden}\">{{group.name}}</p> <li *ngFor=\"let item of group?.values; trackBy: trackListByFn;\" [ngClass]=\"{'hidden':item.hidden, 'is-selected':item.selected}\" (click)=\"selectItemHandler(item.value)\">{{item.label}} </li> </ng-template> </ng-template> <!-- / template for list with groups --> <!-- results el --> <li *ngIf=\"(!allowCreateEntity && isOptionsNotFound) || (allowCreateEntity && isOptionsNotFound && !searchModel.value)\"> {{isPendingRequest ? 'Searching...' : !!serverError ? 'The results could not be loaded.' : 'No results found'}} </li> <!-- add new entity btn --> <li *ngIf=\"allowCreateEntity && isOptionsNotFound && searchModel?.value?.length>0\" (click)=\"addNewEntityToOptions($event);\"> {{searchModel.value}} <b>{{newItemPostfix}}</b> </li> <!-- / add new entity btn --> </ul> <!-- / lists results --> <!-- clear selection btn --> <ul *ngIf=\"allowClear && options.length && !isOptionsNotFound && value\" class=\"adm-select__options__list clear-selection\"> <li (click)=\"clearSelection($event)\">None</li> </ul> <!-- / clear selection btn --> <!-- load more button --> <button *ngIf=\"totalItemsInAjaxResponse > _options.length && !isOptionsNotFound && !isPendingRequest\" class=\"adm-select__add-new-btn\" (click)=\"loadMoreOptionsFromServer($event);\" type=\"button\"> <i class=\"material-icons\">cached</i> Load more items <small>({{_options.length}} from {{totalItemsInAjaxResponse}} shown) </small> </button> <!-- /load more button --> <!-- add new btn --> <button *ngIf=\"showAddNewBtn\" class=\"adm-select__add-new-btn\" type=\"button\" (click)=\"onAddClicked.emit($event); isResultsShown = false;\"> <i class=\"material-icons\">add</i> Add new </button> <!-- / add new btn --> </div> <!-- / options list wrapper --> <!-- validators --> <adm-validator-messages *ngIf=\"allowCreateEntity\" [field]=\"searchModel\"></adm-validator-messages> <!-- / validators --> ","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"host":{"[class.adm-select]":"true","[class.disabled]":"disabled","[class.invalid]":"!isQueryStringValid","[class.is-active]":"isResultsShown","[class.is-drop-up]":"isShowResultsOnTop","[class.pending-data-load]":"!isDataLoaded","[class.has_value]":"!!value","[class.without_value]":"!value"}}]}],"members":{"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allowClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"entityName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showAddNewBtn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allowCreateEntity":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ajax":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"viewPath":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onNewEntityCreated":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onShown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onHidden":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onAddClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onAjaxResponseReceived":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/http","name":"Http"},{"__symbolic":"reference","module":"./config.service","name":"SingleSelectConfig"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"subscribeToSearchModelChange":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"resetValue":[{"__symbolic":"method"}],"clearSelection":[{"__symbolic":"method"}],"setSelectedItem":[{"__symbolic":"method"}],"selectItemHandler":[{"__symbolic":"method"}],"loadMoreOptionsFromServer":[{"__symbolic":"method"}],"getOptionsFromServer":[{"__symbolic":"method"}],"getRequestParams":[{"__symbolic":"method"}],"sendRequest":[{"__symbolic":"method"}],"responseMapper":[{"__symbolic":"method"}],"filterOptions":[{"__symbolic":"method"}],"filterFlatOptions":[{"__symbolic":"method"}],"filterOptionsWithGroup":[{"__symbolic":"method"}],"showResults":[{"__symbolic":"method"}],"toggleResults":[{"__symbolic":"method"}],"addNewEntityToOptions":[{"__symbolic":"method"}],"setSelectedItemToSearchModel":[{"__symbolic":"method"}],"trimLabel":[{"__symbolic":"method"}],"calculateResultsPosition":[{"__symbolic":"method"}],"calculateTextAreaHeight":[{"__symbolic":"method"}],"enterClickHandler":[{"__symbolic":"method"}],"inputKeyUpHandler":[{"__symbolic":"method"}],"setScrollForList":[{"__symbolic":"method"}],"inputBlurHandler":[{"__symbolic":"method"}],"enterKeydownHandler":[{"__symbolic":"method"}],"inputClickHandler":[{"__symbolic":"method"}],"resultsClickHandler":[{"__symbolic":"method"}],"documentClickHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document: click",["$event"]]}]}],"ngOnDestroy":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"trackListByFn":[{"__symbolic":"method"}],"searchModelValidator":[{"__symbolic":"method"}]}}}}]