angular-dropdown-component
Version:
Even though a dropdown (select-option) is a pretty common utility but it still doesn't support basics such as search.
1 lines • 10.2 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"DropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":8,"character":26}],"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"exports":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"ng-dropdown","template":"<ng-container>\n <div class=\"ng-dropdown\">\n <span *ngIf=\"dTitle\" [innerText]=\"dTitle\" class=\"ng-dropdown__title\"></span>\n <ul class=\"ng-dropdown__container\" tabindex=\"0\" (focus)=\"ifContainerFocused=true\" (blur)=\"onDropdownBlur($event)\" [ngStyle]=\"ifContainerFocused ? containerFocusedStyles: {}\"\n #dropdownMenu>\n <li [ngStyle]=\"ifContainerFocused ? selectedItemFocusedStyles: {}\">\n <a (click)=\"hideDropdown()\">\n <span *ngIf=\"!editable; else ifEditableList\" (focus)=\"onInputFocus($event)\" [innerText]=\"_selectedOption?.name\"></span>\n <ng-template #ifEditableList>\n <input class=\"ng-dropdown__container--editable\" [ngModel]=\"_selectedOption | GetSelectedNamePipe\" (focus)=\"onInputFocus($event)\"/>\n </ng-template>\n <img src=\"assets/downPopup.png\" />\n </a>\n </li>\n <ul class=\"ng-dropdown__container--list\" [ngStyle]=\"ifContainerFocused ? restOfListFocusedStyles: {}\">\n <li *ngIf=\"filter\" [ngStyle]=\"ifContainerFocused ? selectedItemFocusedStyles: {}\">\n <input #dropdownFilter class=\"ng-dropdown__container--list__filter\" placeholder=\"Search\" (keyup)=\"onFilterSearch($event)\" (blur)=\"onDropdownBlur($event)\" />\n </li>\n <ul class=\"ng-dropdown__container--list__sublist\" [ngStyle]=\"ifContainerFocused ? restOfListWithoutFilterFocusedStyles: {}\">\n <ng-container *ngIf=\"_data?.length else noResults\">\n <li *ngFor=\"let option of _data\" [ngClass]=\"_selectedOption?.name == option.name ? 'active' : ''\">\n <a [innerText]=\"option.name\" (click)=\"onDropdownItemSelect($event, option)\"></a>\n </li>\n </ng-container>\n <ng-template #noResults>\n <li>\n <a>No Results Found</a>\n </li>\n </ng-template>\n </ul>\n </ul>\n </ul>\n <div class=\"ng-dropdown__button\" [ngClass]=\"disabled ? 'disabled' : ''\" (mouseup)=\"onDropdownMenuClick($event)\" #dropdownButton>\n <span *ngIf=\"!editable; else ifEditable\" [innerText]=\"_selectedOption?.name\"></span>\n <ng-template #ifEditable>\n <input #dropdownInput (keyup)=\"onInputChange($event)\" [ngModel]=\"_selectedOption | GetSelectedNamePipe\" />\n </ng-template>\n <img src=\"assets/downPopup.png\" />\n </div>\n </div>\n</ng-container>\n","styles":[".ng-dropdown{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;padding-bottom:10px}.ng-dropdown .ng-dropdown__title{padding-bottom:5px}.ng-dropdown .ng-dropdown__button{background:#fff;border:1px solid #c9c9c9;padding:2px 10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;height:18px}.ng-dropdown .ng-dropdown__button span,.ng-dropdown__container>li a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ng-dropdown .ng-dropdown__button img{height:10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ng-dropdown .ng-dropdown__button input,.ng-dropdown .ng-dropdown__container li input.ng-dropdown__container--editable{width:100%;height:100%;border:none;outline:0;overflow:hidden;text-overflow:ellipsis}.ng-dropdown .ng-dropdown__button.disabled{pointer-events:none;opacity:.7}.ng-dropdown .ng-dropdown__container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background:#fff;list-style-type:none;border:1px solid #c9c9c9;position:fixed;left:-10000px;outline:0;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:100000;padding:0;margin:0;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}.ng-dropdown .ng-dropdown__container:focus{left:0}.ng-dropdown .ng-dropdown__container:focus+.ng-dropdown__button{pointer-events:none}.ng-dropdown .ng-dropdown__container li:hover{background-color:#e0e0e0;color:#000}.ng-dropdown .ng-dropdown__container>li:first-child a{height:100%}.ng-dropdown .ng-dropdown__container>li:first-child,.ng-dropdown__container--list>li:first-child{position:fixed;background-color:#fff}.ng-dropdown .ng-dropdown__container>li:first-child a,.ng-dropdown__container--list>li:first-child a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.ng-dropdown .ng-dropdown__container>li:first-child a img,.ng-dropdown__container--list>li:first-child a img{height:10px}.ng-dropdown .ng-dropdown__container>li:first-child:hover,.ng-dropdown__container--list>li:first-child:hover{color:initial}.ng-dropdown .ng-dropdown__container li a,.ng-dropdown__container--list>li:first-child li a{padding:0 10px;height:22px;line-height:22px;cursor:pointer;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:block;text-align:left}.ng-dropdown .ng-dropdown__container li input.ng-dropdown__container--list__filter{width:100%;padding:0 9px;height:22px;outline:0;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0}.ng-dropdown .ng-dropdown__container ul{list-style-type:none;padding:0;margin:0;overflow:auto}.ng-dropdown__container--list__sublist li:first-child{position:initial}.ng-dropdown__container--list__sublist li.active{background-color:#6fbbff;color:#fff}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":3}}]}],"dTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":3}}]}],"selectedOption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":3}}]}],"filter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3}}]}],"editable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3}}]}],"selectedOptionChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":70,"character":3}}]}],"dropdownMenu":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":73,"character":3},"arguments":["dropdownMenu"]}]}],"dropdownButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":74,"character":3},"arguments":["dropdownButton"]}]}],"dropdownInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":75,"character":3},"arguments":["dropdownInput"]}]}],"dropdownFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":76,"character":3},"arguments":["dropdownFilter"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"setDefaultOption":[{"__symbolic":"method"}],"setContainerDimensions":[{"__symbolic":"method"}],"onFilterSearch":[{"__symbolic":"method"}],"setSearchedItems":[{"__symbolic":"method"}],"onInputFocus":[{"__symbolic":"method"}],"onInputChange":[{"__symbolic":"method"}],"onDropdownItemSelect":[{"__symbolic":"method"}],"onDropdownMenuClick":[{"__symbolic":"method"}],"onDropdownBlur":[{"__symbolic":"method"}],"clearSearchFilter":[{"__symbolic":"method"}],"showDropdown":[{"__symbolic":"method"}],"hideDropdown":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"GetSelectedNamePipe"}]}],"members":{"transform":[{"__symbolic":"method"}]}}},"origins":{"DropdownModule":"./src/app/modules/dropdown/dropdown.module","ɵa":"./src/app/modules/dropdown/dropdown.component","ɵb":"./src/app/modules/dropdown/dropdown.pipe"},"importAs":"angular-dropdown-component"}