@duoduo-oba/ng-devui

Version:

DevUI components based on Angular

1 lines • 39.1 kB

JSON

{"__symbolic":"module","version":4,"metadata":{"SelectComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":28,"character":1},"arguments":[{"selector":"d-select","exportAs":"select","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":33,"character":19},"member":"OnPush"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":36,"character":15},"useExisting":{"__symbolic":"reference","name":"SelectComponent"},"multi":true}],"animations":[{"__symbolic":"reference","module":"ng-devui/utils","name":"fadeInOut","line":42,"character":4}],"template":"<div\r\n class=\"devui-drop{{ popDirection === 'bottom' ? 'down' : 'up' }} {{ size ? 'devui-select-' + size : '' }}\"\r\n [ngClass]=\"{ open: isOpen }\"\r\n>\r\n <div\r\n #selectBox\r\n class=\"devui-form-group devui-has-feedback\"\r\n (click)=\"toggle()\"\r\n (focus)=\"autoToggle($event)\"\r\n [tabindex]=\"0\"\r\n (keydown.esc)=\"onEscKeyup($event)\"\r\n (keydown.ArrowUp)=\"handleKeyUpEvent($event)\"\r\n (keydown.ArrowDown)=\"handleKeyDownEvent($event)\"\r\n (keydown.enter)=\"handleKeyEnterEvent($event)\"\r\n >\r\n <input\r\n #selectInput\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [ngClass]=\"[\r\n size ? 'devui-select-input-' + size : '',\r\n overview === 'underlined' ? 'devui-select-underlined-border' : '',\r\n isOpen ? 'no-radius' : ''\r\n ]\"\r\n type=\"text\"\r\n class=\"devui-form-control devui-select-input\"\r\n [minLength]=\"0\"\r\n autocomplete=\"off\"\r\n [tabindex]=\"-1\"\r\n [readonly]=\"readonly\"\r\n [attr.value]=\"_inputValue\"\r\n *ngIf=\"\r\n !(extraConfig?.labelization?.enable && multiple) &&\r\n !(!extraConfig?.labelization?.enable && extraConfig?.selectedItemWithTemplate?.enable && (inputItemTemplate || itemTemplate))\r\n \"\r\n />\r\n <div\r\n #selectInputWithTemplate\r\n class=\"devui-select-list-wrapper devui-form-control {{ size ? 'input-' + size : '' }}\"\r\n [ngClass]=\"[overview === 'underlined' ? 'devui-select-underlined-border' : '', isOpen ? 'no-radius' : '', disabled ? 'disabled' : '']\"\r\n *ngIf=\"extraConfig?.selectedItemWithTemplate?.enable && (inputItemTemplate || itemTemplate) && !extraConfig?.labelization?.enable\"\r\n >\r\n <div class=\"devui-select-placeholder\" *ngIf=\"!_inputValue\">\r\n {{ placeholder }}\r\n </div>\r\n <div class=\"devui-select-selected-item-with-template\" *ngIf=\"_inputValue\">\r\n <ng-template\r\n [ngTemplateOutlet]=\"inputItemTemplate || itemTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n option: value,\r\n filterKey: filterKey,\r\n position: 'result',\r\n inputValue: _inputValue\r\n }\"\r\n >\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <div\r\n #selectInputWithLabel\r\n class=\"devui-select-list-wrapper devui-form-control {{ size ? 'input-' + size : '' }}\"\r\n [ngClass]=\"[overview === 'underlined' ? 'devui-select-underlined-border' : '', isOpen ? 'no-radius' : '', disabled ? 'disabled' : '']\"\r\n *ngIf=\"extraConfig?.labelization?.enable && multiple\"\r\n >\r\n <div class=\"devui-select-placeholder\" *ngIf=\"multiItems.length === 0\">\r\n {{ placeholder }}\r\n </div>\r\n <ul\r\n class=\"devui-select-tag-list {{ extraConfig?.labelization?.overflow }}\"\r\n [style.maxHeight]=\"extraConfig?.labelization?.containnerMaxHeight\"\r\n *ngIf=\"multiItems.length > 0\"\r\n >\r\n <li\r\n class=\"devui-select-tag-item\"\r\n *ngFor=\"let item of multiItems; let index = index; trackBy: trackByOptionPointer\"\r\n [style.maxWidth]=\"extraConfig?.labelization?.labelMaxWidth\"\r\n [ngClass]=\"{\r\n disabled: optionDisabledKey && item.option[optionDisabledKey]\r\n }\"\r\n >\r\n <span class=\"over-flow-ellipsis\" title=\"{{ valueParser(item.option) }}\">{{ valueParser(item.option) }}</span>\r\n <a\r\n class=\"devui-select-tag-remove-button\"\r\n (click)=\"removeItem(item, $event)\"\r\n *ngIf=\"!(optionDisabledKey && item.option[optionDisabledKey])\"\r\n ></a>\r\n </li>\r\n </ul>\r\n </div>\r\n\r\n <span class=\"devui-form-control-feedback\" [ngClass]=\"{ 'devui-clear-icon-show': isClearIconShow }\">\r\n <span class=\"devui-select-clear-icon\" (mousedown)=\"$event.preventDefault()\" (click)=\"valueClear($event)\"> </span>\r\n <span class=\"devui-select-chevron-icon\">\r\n <svg\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g id=\"chevron_down\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon id=\"chevron_down\" points=\"4.5 5 8 8.76923077 11.5 5 13 6.61538462 8 12 3 6.61538462\"></polygon>\r\n </g>\r\n </svg>\r\n </span>\r\n </span>\r\n </div>\r\n <ng-container *ngIf=\"appendToBody\">\r\n <ng-template\r\n cdk-connected-overlay\r\n [cdkConnectedOverlayOrigin]=\"cdkConnectedOverlayOrigin\"\r\n [cdkConnectedOverlayWidth]=\"width\"\r\n [cdkConnectedOverlayOpen]=\"isOpen\"\r\n (positionChange)=\"onPositionChange($event)\"\r\n (backdropClick)=\"isOpen = false\"\r\n >\r\n <ng-template [ngTemplateOutlet]=\"selectDropdownTpl\"></ng-template>\r\n </ng-template>\r\n </ng-container>\r\n <ng-container *ngIf=\"!appendToBody\">\r\n <ng-template [ngTemplateOutlet]=\"selectDropdownTpl\"></ng-template>\r\n </ng-container>\r\n</div>\r\n\r\n\r\n<ng-template #selectDropdownTpl>\r\n <div\r\n #selectMenu\r\n class=\"devui-dropdown-menu\"\r\n [ngClass]=\"{\r\n 'devui-dropdown-menu-cdk': appendToBody,\r\n 'devui-custom-right': customViewTemplate && customViewDirection === 'right'\r\n }\"\r\n [@fadeInOut]=\"isOpen ? (appendToBody ? menuPosition : popDirection) : 'void'\"\r\n (@fadeInOut.done)=\"animationEnd($event)\"\r\n >\r\n <ul\r\n dLoading\r\n [showLoading]=\"showLoading\"\r\n positionType=\"relative\"\r\n [message]=\"i18nCommonText?.loading\"\r\n [backdrop]=\"true\"\r\n class=\"devui-dropdown-menu-wrap {{ size ? 'devui-dropdown-menu-' + size : '' }}\"\r\n (click)=\"$event.stopPropagation(); $event.preventDefault()\"\r\n >\r\n <li [style.display]=\"isSearch ? 'block' : 'none'\" style=\"padding: 0 5px 5px;\">\r\n <div class=\"devui-form-group devui-has-feedback\" [style.margin]=\"'0'\">\r\n <input\r\n #filterInput\r\n [ngClass]=\"size ? 'devui-select-input-' + size : ''\"\r\n name=\"select\"\r\n type=\"text\"\r\n [ngModel]=\"filter\"\r\n autocomplete=\"off\"\r\n class=\"devui-form-control filter\"\r\n (keydown.ArrowUp)=\"handleKeyUpEvent($event)\"\r\n (keydown.ArrowDown)=\"handleKeyDownEvent($event)\"\r\n (keydown.enter)=\"handleKeyEnterEvent($event)\"\r\n (keydown.esc)=\"onEscKeyup($event)\"\r\n />\r\n <span class=\"devui-form-control-feedback\">\r\n <svg\r\n class=\"svg-icon-search\"\r\n width=\"1em\"\r\n height=\"1em\"\r\n style=\"vertical-align: middle\"\r\n viewBox=\"0 0 1024 1024\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <path\r\n d=\"M1024 900.584l-121.376 123.2L618.672 735.464c-63.44 43.768-140 69.392-222.44 69.392C177.376 804.848 0 624.712 0 402.536 0 180.336 177.376 0.208 396.232 0.208s396.232 180.144 396.232 402.328c0 75.328-20.752 145.576-56.248 205.872L1024 900.584zM396.232 128.944c-148.8 0-269.456 122.504-269.456 273.592 0 151.08 120.656 273.576 269.456 273.576 148.832 0 269.456-122.504 269.456-273.576C665.688 251.448 545.08 128.944 396.232 128.944z\"\r\n ></path>\r\n </svg>\r\n </span>\r\n </div>\r\n </li>\r\n <ul\r\n *ngIf=\"!virtualScroll || enableLazyLoad; else scrollViewTpl\"\r\n class=\"devui-select-list-unstyled devui-scrollbar\"\r\n dLazyLoad\r\n [enableLazyLoad]=\"enableLazyLoad\"\r\n (loadMore)=\"loadMoreEvent($event)\"\r\n [ngStyle]=\"{ 'max-height': scrollHight, width: '100%' }\"\r\n #dropdownUl\r\n >\r\n <ng-template [ngTemplateOutlet]=\"selectAllTpl\"></ng-template>\r\n <ng-container *ngFor=\"let item of availableOptions; let index = index; trackBy: trackByFn\">\r\n <ng-template [ngTemplateOutlet]=\"dropdownItemTpl\" [ngTemplateOutletContext]=\"{ item: item, index: index }\"></ng-template>\r\n </ng-container>\r\n </ul>\r\n <li *ngIf=\"availableOptions.length === 0 && !noResultItemTemplate\" class=\"devui-no-data-tip\">\r\n <ng-container *ngIf=\"!filter\">{{ i18nCommonText?.noData }}</ng-container>\r\n <ng-container *ngIf=\"filter\">{{ i18nCommonText?.noRecordsFound }}</ng-container>\r\n </li>\r\n <li *ngIf=\"availableOptions.length === 0 && noResultItemTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"noResultItemTemplate\" [ngTemplateOutletContext]=\"{ options: options }\"></ng-template>\r\n </li>\r\n </ul>\r\n <ng-container *ngIf=\"customViewTemplate\">\r\n <div class=\"devui-select-custom-area\">\r\n <ng-template [ngTemplateOutlet]=\"customViewTemplate\" [ngTemplateOutletContext]=\"{ $implicit: this, choose: choose}\"></ng-template>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #scrollViewTpl>\r\n <cdk-virtual-scroll-viewport\r\n [ngStyle]=\"{\r\n height: getVirtualScrollHeight(availableOptions.length, size)\r\n }\"\r\n [itemSize]=\"getVirtualScrollItemSize(size)\"\r\n class=\"viewport-wrapper devui-select-list-unstyled devui-scrollbar\"\r\n [ngStyle]=\"{ 'max-height': scrollHight, width: '100%' }\"\r\n #dropdownUl\r\n >\r\n <ng-template [ngTemplateOutlet]=\"selectAllTpl\"></ng-template>\r\n <ng-container *cdkVirtualFor=\"let item of availableOptions; let index = index; trackBy: trackByFn\">\r\n <ng-template [ngTemplateOutlet]=\"dropdownItemTpl\" [ngTemplateOutletContext]=\"{ item: item, index: index }\"></ng-template>\r\n </ng-container>\r\n </cdk-virtual-scroll-viewport>\r\n</ng-template>\r\n\r\n\r\n<ng-template #selectAllTpl>\r\n <li class=\"devui-dropdown-item\" *ngIf=\"showSelectAll()\" (click)=\"selectAll()\">\r\n <span>\r\n <d-checkbox [label]=\"i18nCommonText.checkAll\" [isShowTitle]=\"false\" [halfchecked]=\"halfChecked\" [(ngModel)]=\"allChecked\"></d-checkbox>\r\n </span>\r\n </li>\r\n</ng-template>\r\n\r\n\r\n<ng-template #dropdownItemTpl let-item=\"item\" let-index=\"index\">\r\n <li\r\n title=\"{{ formatter(item.option) }}\"\r\n [ngClass]=\"[\r\n 'devui-dropdown-item',\r\n item.isChecked ? hightLightItemClass : '',\r\n selectIndex === index && item.id !== activeIndex ? 'selected' : '',\r\n optionDisabledKey && item.option[optionDisabledKey] ? 'disabled' : ''\r\n ]\"\r\n (click)=\"choose(item.option, item.id, $event)\"\r\n >\r\n <ng-template\r\n [ngTemplateOutlet]=\"inputItemTemplate || itemTemplate || (multiple ? checkBoxItem : defaultItem)\"\r\n [ngTemplateOutletContext]=\"\r\n multiple\r\n ? {\r\n option: item.option,\r\n checked: item.isChecked,\r\n filterKey: filterKey,\r\n position: 'list',\r\n template: checkBoxItem\r\n }\r\n : {\r\n option: item.option,\r\n filterKey: filterKey,\r\n position: 'list',\r\n template: defaultItem\r\n }\r\n \"\r\n >\r\n </ng-template>\r\n </li>\r\n</ng-template>\r\n\r\n<ng-template #defaultItem let-option=\"option\">\r\n {{ formatter(option) }}\r\n</ng-template>\r\n\r\n<ng-template #checkBoxItem let-option=\"option\" let-checked=\"checked\">\r\n <d-checkbox\r\n [color]=\"color\"\r\n [label]=\"formatter(option)\"\r\n [cssClass]=\"'devui-select-checkbox'\"\r\n [ngModel]=\"checked\"\r\n [disabled]=\"option[optionDisabledKey]\"\r\n >\r\n </d-checkbox>\r\n</ng-template>\r\n","styles":["@charset \"UTF-8\";.devui-dropdown-menu{width:100%}.devui-dropdown-menu.devui-custom-right{min-width:400px;display:-webkit-box!important;display:flex!important}.devui-dropdown-menu.devui-custom-right>.devui-dropdown-menu-wrap{display:inline-block;width:calc(50% - 1px)}.devui-dropdown-menu.devui-custom-right>.devui-select-custom-area{display:inline-block;overflow:auto;width:50%;border-left:1px solid #dfe1e6}.devui-dropdown-menu.devui-custom-right>.devui-select-custom-area::before{display:none}.devui-dropdown-menu .devui-dropdown-menu-wrap{position:initial}.devui-dropdown-menu-cdk{position:static;display:block;border:none}.devui-form-group.devui-has-feedback[tabindex]{outline:0}.devui-form-group.devui-has-feedback:focus .devui-select-list-wrapper.devui-form-control:not(.disabled):not([disabled]),.devui-form-group.devui-has-feedback:focus input.devui-form-control.devui-select-input:not(.disabled):not([disabled]){border-color:#5e7ce0}.devui-select-list-wrapper.devui-form-control,.devui-select-placeholder,.devui-select-selected-item-with-template{font-size:14px}.devui-form-group>input.devui-form-control.devui-select-input{cursor:pointer;padding-right:2em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.devui-select-list-wrapper.devui-form-control{cursor:pointer;height:auto;margin:0;padding:2px 30px 0 2px}.devui-dropdown-item{font-size:14px;display:block;min-height:36px;line-height:20px;width:100%;padding:8px 13px;clear:both;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border:0;color:#252b3a}.devui-dropdown-item input[name=search]{font-size:14px}.devui-dropdown-item ::ng-deep .devui-select-checkbox label{max-width:calc(100%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px}.devui-dropdown-item.selected ::ng-deep .devui-select-checkbox .checkbox-label{color:#5e7ce0}.devui-dropdown-item.active ::ng-deep .devui-select-checkbox .checkbox-label{color:#5e7ce0}.devui-select-lg{font-size:18px;min-height:46px;line-height:28px}.devui-select-lg .devui-select-list-wrapper.devui-form-control,.devui-select-lg .devui-select-placeholder,.devui-select-lg .devui-select-selected-item-with-template{font-size:18px}.devui-select-lg .devui-dropdown-item{font-size:18px;min-height:40px;line-height:28px}.devui-select-lg .devui-dropdown-item input[name=search]{font-size:18px}.devui-select-lg ::ng-deep .devui-checkbox,.devui-select-lg ::ng-deep .devui-select-checkbox label .checkbox-label{font-size:18px;line-height:28px}.devui-select-lg ::ng-deep .devui-checkbox-material{width:18px;height:18px}.devui-select-sm{font-size:12px;min-height:30px;line-height:14px}.devui-select-sm .devui-select-list-wrapper.devui-form-control,.devui-select-sm .devui-select-placeholder,.devui-select-sm .devui-select-selected-item-with-template{font-size:12px}.devui-select-sm .devui-dropdown-item{font-size:12px;min-height:30px;line-height:14px}.devui-select-sm .devui-dropdown-item input[name=search]{font-size:12px}.devui-select-sm ::ng-deep .devui-select-checkbox label .checkbox-label{font-size:12px;line-height:16px}.devui-select-sm ::ng-deep .devui-checkbox-material{width:12px;height:12px}.devui-dropdown-menu-lg .devui-dropdown-item{font-size:18px;min-height:40px;line-height:28px}.devui-dropdown-menu-lg .devui-dropdown-item input[name=search]{font-size:18px}.devui-dropdown-menu-lg ::ng-deep .devui-checkbox,.devui-dropdown-menu-lg ::ng-deep .devui-select-checkbox label .checkbox-label{font-size:18px;line-height:28px}.devui-dropdown-menu-lg ::ng-deep .devui-checkbox-material{width:18px;height:18px}.devui-dropdown-menu-sm .devui-dropdown-item{font-size:12px;min-height:30px;line-height:14px}.devui-dropdown-menu-sm .devui-dropdown-item input[name=search]{font-size:12px}.devui-dropdown-menu-sm ::ng-deep .devui-select-checkbox label .checkbox-label{font-size:12px;line-height:16px}.devui-dropdown-menu-sm ::ng-deep .devui-checkbox-material{width:12px;height:12px}div.devui-dropdown-menu{margin-bottom:5px;cursor:pointer;min-width:auto;box-shadow:0 4px 8px 0 rgba(41,48,64,.2)}div.devui-dropdown-menu .devui-select-list-unstyled,div.devui-dropdown-menu>ul.devui-select-list-unstyled{overflow-y:auto}div.devui-dropdown-menu .devui-select-list-unstyled li:hover:not(.active):not(.disabled),div.devui-dropdown-menu>ul.devui-select-list-unstyled li:hover:not(.active):not(.disabled){background-color:#f2f5fc}div.devui-dropdown-menu .devui-select-list-unstyled li.active,div.devui-dropdown-menu .devui-select-list-unstyled li.active:hover,div.devui-dropdown-menu .devui-select-list-unstyled li.selected,div.devui-dropdown-menu>ul.devui-list-unstyled li.active,div.devui-dropdown-menu>ul.devui-list-unstyled li.active:hover,div.devui-dropdown-menu>ul.devui-select-list-unstyled li.selected{background-color:#f2f5fc;color:#5e7ce0}.devui-has-feedback{z-index:5}.devui-form-control,.devui-form-group .devui-form-control{border-radius:1px;box-shadow:none}.devui-form-control.no-radius,.devui-form-group .devui-form-control.no-radius{border-radius:1px 1px 0 0}.devui-form-control:focus:not(.disabled):not(:disabled),.devui-form-control:hover:not(.disabled):not(:disabled),.devui-form-group .devui-form-control.devui-select-underlined-border:focus:not(.disabled):not(:disabled),.devui-form-group .devui-form-control.devui-select-underlined-border:hover:not(.disabled):not(:disabled),.devui-form-group .devui-form-control:focus:not(.disabled):not(:disabled),.devui-form-group .devui-form-control:hover:not(.disabled):not(:disabled){border-color:#344899}.devui-form-group .devui-form-control.devui-select-underlined-border{border:0;border-bottom:1px solid #adb0b8;border-radius:0}.devui-form-control.devui-select-input-lg{line-height:1.3333333;height:46px}.devui-form-control.devui-select-input-lg+.devui-form-control-feedback{height:46px;width:46px;line-height:46px}.devui-form-control.devui-select-input-sm{line-height:1.5;height:30px}.devui-form-control.devui-select-input-sm+.devui-form-control-feedback{height:30px;width:30px;line-height:30px}.devui-select-list-wrapper .devui-select-selected-item-with-template{height:28px;line-height:28px;padding:0 10px;cursor:pointer}.devui-select-list-wrapper .devui-select-placeholder{height:28px;line-height:28px;color:#8a8e99;padding-left:10px}.devui-select-list-wrapper .devui-select-tag-list{height:28px;margin:0;padding:0;list-style-type:none;overflow:hidden}.devui-select-list-wrapper .devui-select-tag-list.normal{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.devui-select-list-wrapper .devui-select-tag-list.scroll-y{overflow-y:auto;overflow-x:hidden}.devui-select-list-wrapper .devui-select-tag-list.multiple-line{height:auto;overflow-y:auto;overflow-x:hidden;line-height:1.42857143}.devui-select-list-wrapper .devui-select-tag-item{display:inline-block;margin:3px 2px 0;padding:0 5px;min-height:20px;line-height:20px;max-height:20px;border-radius:1px;color:#252b3a;background:#eef0f5;max-width:100%;position:relative}.devui-select-list-wrapper .devui-select-tag-item span{display:inline-block;max-width:100%;padding-right:14px}.devui-select-list-wrapper .devui-select-tag-item.disabled span{padding-right:5px}.devui-select-list-wrapper .devui-select-tag-item .devui-select-tag-remove-button{position:absolute;right:2px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);line-height:20px;color:#252b3a;width:1em;height:1em;display:block;-webkit-transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;pointer-events:auto;cursor:pointer}.devui-select-list-wrapper .devui-select-tag-item .devui-select-tag-remove-button::after,.devui-select-list-wrapper .devui-select-tag-item .devui-select-tag-remove-button::before{position:absolute;content:'';height:.6em;width:.0715em;background-color:#252b3a;left:calc(50% - 1px);top:.25em;-webkit-transform-origin:center;transform-origin:center}.devui-select-list-wrapper .devui-select-tag-item .devui-select-tag-remove-button::before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.devui-select-list-wrapper .devui-select-tag-item .devui-select-tag-remove-button::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.devui-select-list-wrapper .over-flow-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.devui-select-list-wrapper.devui-select-input-lg{line-height:1.3333333}.devui-select-list-wrapper.devui-select-input-lg .devui-select-placeholder,.devui-select-list-wrapper.devui-select-input-lg .devui-select-selected-item-with-template,.devui-select-list-wrapper.devui-select-input-lg .devui-select-tag-list{height:42px}.devui-select-list-wrapper.devui-select-input-lg .devui-select-placeholder,.devui-select-list-wrapper.devui-select-input-lg .devui-select-selected-item-with-template{line-height:42px}.devui-select-list-wrapper.devui-select-input-lg .devui-select-tag-item{margin:7px 3px 0;padding:0 5px;min-height:26px;line-height:26px;max-height:26px}.devui-select-list-wrapper.devui-select-input-sm{line-height:1.5}.devui-select-list-wrapper.devui-select-input-sm .devui-select-placeholder,.devui-select-list-wrapper.devui-select-input-sm .devui-select-selected-item-with-template,.devui-select-list-wrapper.devui-select-input-sm .devui-select-tag-list{height:26px}.devui-select-list-wrapper.devui-select-input-sm .devui-select-placeholder,.devui-select-list-wrapper.devui-select-input-sm .devui-select-selected-item-with-template{line-height:26px}.devui-select-list-wrapper.devui-select-input-sm .devui-select-tag-item{margin:3px 2px 0;padding:0 5px;min-height:18px;line-height:18px;max-height:18px}.devui-dropdown-item.disabled,.devui-dropdown-item.disabled:hover,div.devui-dropdown-menu .devui-select-list-unstyled li.disabled:hover,div.devui-dropdown-menu li.disabled:hover,div.devui-dropdown-menu>ul.devui-select-list-unstyled li.disabled:hover{cursor:not-allowed;opacity:.3;color:#252b3a;background:#fff}div.devui-dropdown-menu .devui-select-list-unstyled li.active.disabled:hover,div.devui-dropdown-menu>ul.devui-select-list-unstyled li.active.disabled:hover{background:#f2f5fc}.devui-dropdown-menu .devui-select-list-unstyled li.disabled ::ng-deep .devui-checkbox.disabled,.devui-dropdown-menu>ul.devui-select-list-unstyled li.disabled ::ng-deep .devui-checkbox.disabled,:host ::ng-deep .devui-dropdown-menu .devui-select-list-unstyled li.disabled .devui-checkbox.disabled,:host ::ng-deep .devui-dropdown-menu>ul.devui-select-list-unstyled li.disabled .devui-checkbox.disabled{opacity:1}.devui-no-data-tip{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:not-allowed;padding:5px 12px;opacity:.3}.devui-form-control.devui-select-input:disabled,.devui-form-group .devui-form-control.devui-select-input:disabled,.devui-select-list-wrapper.devui-form-control.disabled{cursor:not-allowed}.devui-select-list-wrapper.devui-form-control.disabled{opacity:.3}.devui-form-control-feedback .devui-select-chevron-icon{background:0 0}.devui-form-control.devui-select-input:disabled+.devui-form-control-feedback,.devui-select-list-wrapper.devui-form-control.disabled+.devui-form-control-feedback{opacity:.3}.devui-select-custom-area::before{display:block;content:'';width:calc(100% - 20px);margin:0 10px;height:1px;border-top:1px solid #dfe1e6}svg.svg-icon-search>path{fill:#252b3a}.open .devui-select-chevron-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.devui-select-chevron-icon{display:-webkit-inline-box;display:inline-flex;vertical-align:middle;-webkit-transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.devui-select-chevron-icon svg>g>polygon{fill:#252b3a}.devui-form-group.devui-has-feedback:hover .devui-form-control:not(.disabled):not([disabled]){border-color:#344899}.devui-form-group.devui-has-feedback:hover .devui-form-control-feedback.devui-clear-icon-show .devui-select-chevron-icon{display:none}.devui-form-group.devui-has-feedback:hover .devui-form-control-feedback.devui-clear-icon-show .devui-select-clear-icon{display:-webkit-inline-box;display:inline-flex;vertical-align:middle}.devui-select-clear-icon{width:14px;height:14px;display:none;-webkit-transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;pointer-events:auto;cursor:pointer}.devui-select-clear-icon::after,.devui-select-clear-icon::before{position:absolute;content:'';height:14px;width:2px;background-color:#252b3a;left:50%}.devui-select-clear-icon::before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.devui-select-clear-icon::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}input::-ms-clear{display:none}.devui-dropup .devui-dropdown-menu{top:auto;bottom:100%}"]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":3}}]}],"isSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":3}}]}],"toggleOnFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3}}]}],"scrollHight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3}}]}],"hightLightItemClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":3}}]}],"filterKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":3}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":3}}]}],"isSelectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":3}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":3}}]}],"appendToBody":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":103,"character":3}}]}],"templateItemSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":115,"character":3}}]}],"searchFn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":3}}]}],"valueParser":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":132,"character":3}}]}],"formatter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":136,"character":3}}]}],"direction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":137,"character":3}}]}],"overview":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":138,"character":3}}]}],"allowClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":143,"character":3}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":149,"character":3}}]}],"enableLazyLoad":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":153,"character":3}}]}],"virtualScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":158,"character":3}}]}],"inputItemTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":163,"character":3}}]}],"itemTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":165,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":165,"character":16},{"static":false}]}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":170,"character":3}}]}],"toggleChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":176,"character":3}}]}],"loadMore":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":178,"character":3}}]}],"extraConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":180,"character":3}}]}],"optionDisabledKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":198,"character":3}}]}],"optionImmutableKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":202,"character":3}}]}],"noResultItemTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":206,"character":3}}]}],"keepMultipleOrder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":210,"character":3}}]}],"customViewTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":211,"character":3}}]}],"customViewDirection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":215,"character":3}}]}],"autoFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":216,"character":3}}]}],"notAutoScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":217,"character":3}}]}],"selectInputElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":219,"character":3},"arguments":["selectInput",{"static":false}]}]}],"selectMenuElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":220,"character":3},"arguments":["selectMenu",{"static":false}]}]}],"selectBoxElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":221,"character":3},"arguments":["selectBox",{"static":true}]}]}],"selectInputWithTemplateElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":222,"character":3},"arguments":["selectInputWithTemplate",{"static":false}]}]}],"selectInputWithLabelElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":223,"character":3},"arguments":["selectInputWithLabel",{"static":false}]}]}],"filterInputElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":224,"character":3},"arguments":["filterInput",{"static":false}]}]}],"dropdownUl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":225,"character":3},"arguments":["dropdownUl",{"static":false}]}]}],"connectedOverlay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":226,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"CdkConnectedOverlay","line":226,"character":13},{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":262,"character":22},{"__symbolic":"reference","module":"ng-devui/window-ref","name":"WindowRef","line":263,"character":23},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":264,"character":31},{"__symbolic":"reference","module":"ng-devui/i18n","name":"I18nService","line":265,"character":18},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":266,"character":20}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"setI18nText":[{"__symbolic":"method"}],"getVirtualScrollHeight":[{"__symbolic":"method"}],"getVirtualScrollItemSize":[{"__symbolic":"method"}],"resetSource":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"registerFilterChange":[{"__symbolic":"method"}],"searchInputValueChangeEvent":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"writeIntoInput":[{"__symbolic":"method"}],"setAvailableOptions":[{"__symbolic":"method"}],"updateCdkConnectedOverlayOrigin":[{"__symbolic":"method"}],"autoToggle":[{"__symbolic":"method"}],"setMouseEventTrue":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":534,"character":3},"arguments":["mousedown",["$event"]]}]}],"setMouseEventFalse":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":538,"character":3},"arguments":["mouseup",["$event"]]}]}],"toggle":[{"__symbolic":"method"}],"isBottomRectEnough":[{"__symbolic":"method"}],"setDocumentClickListener":[{"__symbolic":"method"}],"onEscKeyup":[{"__symbolic":"method"}],"handleKeyUpEvent":[{"__symbolic":"method"}],"handleKeyDownEvent":[{"__symbolic":"method"}],"scrollToActive":[{"__symbolic":"method"}],"handleKeyEnterEvent":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"selectAll":[{"__symbolic":"method"}],"trackByFn":[{"__symbolic":"method"}],"trackByOptionPointer":[{"__symbolic":"method"}],"loadMoreEvent":[{"__symbolic":"method"}],"loadFinish":[{"__symbolic":"method"}],"loadStart":[{"__symbolic":"method"}],"onPositionChange":[{"__symbolic":"method"}],"animationEnd":[{"__symbolic":"method"}],"setChecked":[{"__symbolic":"method"}],"showSelectAll":[{"__symbolic":"method"}],"forceSearchNext":[{"__symbolic":"method"}],"valueClear":[{"__symbolic":"method"}],"resetStatus":[{"__symbolic":"method"}]}},"SelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":11,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":14,"character":4},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"ScrollingModule","line":16,"character":4},{"__symbolic":"reference","module":"ng-devui/checkbox","name":"CheckBoxModule","line":17,"character":4},{"__symbolic":"reference","module":"ng-devui/loading","name":"LoadingModule","line":18,"character":4},{"__symbolic":"reference","module":"ng-devui/utils","name":"LazyLoadModule","line":19,"character":4}],"exports":[{"__symbolic":"reference","name":"SelectComponent"}],"declarations":[{"__symbolic":"reference","name":"SelectComponent"}],"providers":[{"__symbolic":"reference","module":"ng-devui/window-ref","name":"WindowRef","line":28,"character":4},{"__symbolic":"reference","module":"ng-devui/window-ref","name":"DocumentRef","line":29,"character":4}]}]}],"members":{}}},"origins":{"SelectComponent":"./select.component","SelectModule":"./select.module"},"importAs":"ng-devui/select"}