ngx-mat-dropdown
Version:
Angular Dropdown with search/filter option
968 lines (957 loc) • 36.5 kB
JavaScript
import { Injectable, ɵɵdefineInjectable, EventEmitter, Component, Input, Output, ViewChild, ElementRef, forwardRef, ChangeDetectionStrategy, Inject, ChangeDetectorRef, Optional, HostBinding, NgModule } from '@angular/core';
import { FormControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatSelect, MatSelectModule } from '@angular/material/select';
import { ReplaySubject, Subject } from 'rxjs';
import { takeUntil, take, delay } from 'rxjs/operators';
import { MatOption } from '@angular/material/core';
import { CommonModule } from '@angular/common';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';
import { MatCheckboxModule } from '@angular/material/checkbox';
/**
* @fileoverview added by tsickle
* Generated from: lib/mat-dropdown.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MatDropdownService {
constructor() { }
}
MatDropdownService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
MatDropdownService.ctorParameters = () => [];
/** @nocollapse */ MatDropdownService.ɵprov = ɵɵdefineInjectable({ factory: function MatDropdownService_Factory() { return new MatDropdownService(); }, token: MatDropdownService, providedIn: "root" });
/**
* @fileoverview added by tsickle
* Generated from: lib/dropdown-settings.model.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class DropdownSettingsModel {
/**
* @param {?=} id
* @param {?=} multiple
* @param {?=} placeholder
* @param {?=} labelKey
* @param {?=} keyValue
* @param {?=} tooltip
*/
constructor(id = "", multiple = false, placeholder = "Search", labelKey = "name", keyValue = "key", tooltip = "Code") {
this.id = id;
this.multiple = multiple;
this.placeholder = placeholder;
this.labelKey = labelKey;
this.keyValue = keyValue;
this.tooltip = tooltip ? tooltip : labelKey;
}
}
if (false) {
/** @type {?} */
DropdownSettingsModel.prototype.id;
/** @type {?} */
DropdownSettingsModel.prototype.multiple;
/** @type {?} */
DropdownSettingsModel.prototype.placeholder;
/** @type {?} */
DropdownSettingsModel.prototype.labelKey;
/** @type {?} */
DropdownSettingsModel.prototype.keyValue;
/** @type {?} */
DropdownSettingsModel.prototype.tooltip;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/mat-dropdown.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MatDropdownComponent {
constructor() {
this.dropdownCtrl = new FormControl();
this.appearance = "outline";
/**
* control for the MatSelect filter keyword
*/
this.FilterCtrl = new FormControl();
this.dropdownList = [];
this.onselectItems = new EventEmitter();
this.filteredBanks = new ReplaySubject(1);
/**
* Subject that emits when the component has been destroyed.
*/
this._onDestroy = new Subject();
}
/**
* @param {?} isTrue
* @return {?}
*/
set dropdownDisabled(isTrue) {
if (isTrue) {
this.dropdownCtrl.disable();
}
else {
this.dropdownCtrl.enable();
}
}
/**
* @param {?} list
* @return {?}
*/
set getdropdownList(list) {
if (list) {
this.dropdownList = list;
this.filteredBanks.next(list.slice());
}
else {
}
}
/**
* @param {?} evt
* @return {?}
*/
set onselect(evt) {
if (evt) {
this.selectedItems = evt;
// console.log(evt, this.preBind);
this.dropdownCtrl.setValue(evt);
}
else {
if (this.dropdownSettings.multiple) {
this.selectedItems = [];
}
else
this.selectedItems = null;
this.dropdownCtrl.setValue(evt);
}
}
/**
* @return {?}
*/
ngOnInit() {
// set intial value
// listen for search field value changes
this.FilterCtrl.valueChanges
.pipe(takeUntil(this._onDestroy))
.subscribe((/**
* @return {?}
*/
() => {
/** @type {?} */
let evt = this.FilterCtrl.value;
this._filter(evt);
}));
}
/**
* @private
* @param {?} evt
* @return {?}
*/
_filter(evt) {
if (evt)
this.filteredBanks.next(this.dropdownList.filter((/**
* @param {?} x
* @return {?}
*/
(x) => x[this.dropdownSettings.labelKey]
.toLowerCase()
.includes(evt.val.toLowerCase()))));
else
this.filteredBanks.next(this.dropdownList.slice());
}
/**
* @return {?}
*/
ngAfterViewInit() {
//this.dropdownCtrl.setValue(this.selectedItems);
if (!this.dropdownSettings.multiple)
this.setInitialValue();
}
/**
* @return {?}
*/
ngOnDestroy() {
this._onDestroy.next();
this._onDestroy.complete();
}
/**
* @private
* @return {?}
*/
setInitialValue() {
this.filteredBanks
.pipe(take(1), takeUntil(this._onDestroy))
.subscribe((/**
* @return {?}
*/
() => {
this.singleSelect.compareWith = (/**
* @param {?} a
* @param {?} b
* @return {?}
*/
(a, b) => {
if (a && b)
return (a[this.dropdownSettings.keyValue] ===
b[this.dropdownSettings.keyValue]);
});
}));
}
/**
* @param {?} evt
* @return {?}
*/
OnSelectedEvent(evt) {
this.onselectItems.emit(evt.source);
//if (evt.isUserInput) {
// this.onselectItems.emit(evt.source);
//} else {
// this.onselectItems.emit({ value: null });
//}
}
// multi
/**
* @param {?} checked
* @return {?}
*/
AllClicked(checked) {
//console.log(checked, this.multidropdownCtrl)
if (checked.checked) {
// this.multidropdownCtrl.patchValue([...this.dropdownList.map(item => item.key), 0]);
/** @type {?} */
let items = this.dropdownList.map((/**
* @param {?} item
* @return {?}
*/
(item) => item));
this.dropdownCtrl.setValue(items);
}
else {
// this.multidropdownCtrl.patchValue([]);
this.dropdownCtrl.setValue([]);
}
this.onselectItems.emit(this.dropdownCtrl);
}
/**
* @param {?} check
* @return {?}
*/
ischecked(check) {
/** @type {?} */
let selected = this.dropdownCtrl.value;
return (this.dropdownList &&
selected &&
selected.length > 0 &&
this.dropdownList.length == selected.length);
}
/**
* @return {?}
*/
isIndeterminate() {
/** @type {?} */
let selected = this.dropdownCtrl.value;
return (this.dropdownList &&
selected &&
selected.length > 0 &&
selected.length < this.dropdownList.length);
}
/**
* @return {?}
*/
openedChange() {
if (!this.innerSelectAll || !this.innerSelectAll.nativeElement) {
return;
}
/** @type {?} */
let SelectAllElement = this.innerSelectAll.nativeElement;
/** @type {?} */
let SelectAllPanelElement;
while ((SelectAllElement = SelectAllElement.parentElement)) {
if (SelectAllElement.classList.contains("mat-select-panel")) {
SelectAllPanelElement = SelectAllElement;
break;
}
}
if (SelectAllPanelElement) {
this.innerSelectAll.nativeElement.style.width =
SelectAllPanelElement.clientWidth + "px";
/** @type {?} */
let children = this.innerSelectAll.nativeElement.childNodes;
//if (children)
// children[0].childNodes[0].style.width = SelectallpanelElement.clientWidth + 'px';
}
}
}
MatDropdownComponent.decorators = [
{ type: Component, args: [{
selector: "ngx-mat-dropdown",
template: "<mat-form-field appearance=\"{{appearance}}\">\r\n <mat-label>{{dropdownSettings?.placeholder}}</mat-label>\r\n <mat-select disableOptionCentering [formControl]=\"dropdownCtrl\" [attr.id]=\"dropdownSettings?.id\" \r\n (selectionChange)=\"OnSelectedEvent($event)\"\r\n [placeholder]=\"dropdownSettings.placeholder \" \r\n #singleSelect [multiple]=\"dropdownSettings?.multiple\" \r\n matTooltip=\"{{selectedItems ? selectedItems[dropdownSettings.labelKey] : ''}}\"\r\n [multiple]=\"dropdownSettings?.multiple\">\r\n <mat-select-search [formControl]=\"FilterCtrl\" [multiple]=\"dropdownSettings?.multiple\" *ngIf=\"dropdownList.length > 5\"></mat-select-search>\r\n <div #innerSelectall [style.top.px]=\"dropdownList?.length <= 5 ? 0 : 44\" class=\"mat-select-all-inner\" *ngIf=\"dropdownList?.length !== 0 && dropdownSettings.multiple\" >\r\n <mat-checkbox class=\"mat-option mat-select-checkbox\" [disableRipple]=\"true\" [indeterminate]=\"isIndeterminate()\" [checked]=\"ischecked(check)\" (change)=\"AllClicked($event)\" #check>\r\n {{ check.checked ? ('Unselect All' ) : ('Select All' ) }}\r\n </mat-checkbox>\r\n </div>\r\n <mat-option *ngIf=\"dropdownList.length && !dropdownSettings.multiple\">None</mat-option>\r\n <mat-option *ngFor=\"let item of filteredBanks | async\" [value]=\"item\" \r\n matTooltip=\"{{item[dropdownSettings.labelKey]}}\">\r\n {{ item[dropdownSettings.labelKey] }}\r\n </mat-option>\r\n </mat-select>\r\n</mat-form-field>",
styles: [`
.mat-select-all-inner {
position: absolute;
top: 52px;
width: calc(100% + 3px);
background: white;
z-index: 100;
font-size: inherit;
box-shadow: none;
border-radius: 0;
-webkit-transform: translate3d(0,0,0);
}
`]
}] }
];
/** @nocollapse */
MatDropdownComponent.ctorParameters = () => [];
MatDropdownComponent.propDecorators = {
dropdownCtrl: [{ type: Input, args: ["ctrl",] }],
appearance: [{ type: Input }],
dropdownSettings: [{ type: Input, args: ["dropdownSettings",] }],
dropdownDisabled: [{ type: Input, args: ["disabled",] }],
getdropdownList: [{ type: Input, args: ["dropdownList",] }],
onselect: [{ type: Input, args: ["selectedItems",] }],
onselectItems: [{ type: Output, args: ["onselectItems",] }],
singleSelect: [{ type: ViewChild, args: ["singleSelect", { read: ElementRef },] }],
innerSelectAll: [{ type: ViewChild, args: ["innerSelectall", { read: ElementRef, static: true },] }]
};
if (false) {
/** @type {?} */
MatDropdownComponent.prototype.dropdownCtrl;
/** @type {?} */
MatDropdownComponent.prototype.appearance;
/**
* control for the MatSelect filter keyword
* @type {?}
*/
MatDropdownComponent.prototype.FilterCtrl;
/** @type {?} */
MatDropdownComponent.prototype.dropdownSettings;
/** @type {?} */
MatDropdownComponent.prototype.dropdownList;
/** @type {?} */
MatDropdownComponent.prototype.selectedItems;
/** @type {?} */
MatDropdownComponent.prototype.onselectItems;
/** @type {?} */
MatDropdownComponent.prototype.filteredBanks;
/** @type {?} */
MatDropdownComponent.prototype.singleSelect;
/** @type {?} */
MatDropdownComponent.prototype.innerSelectAll;
/**
* Subject that emits when the component has been destroyed.
* @type {?}
* @private
*/
MatDropdownComponent.prototype._onDestroy;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/mat-select-search/mat-select-search.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MatSelectSearchComponent {
/**
* @param {?} matSelect
* @param {?} changeDetectorRef
* @param {?=} matOption
*/
constructor(matSelect, changeDetectorRef, matOption = null) {
this.matSelect = matSelect;
this.changeDetectorRef = changeDetectorRef;
this.matOption = matOption;
/**
* Label of the search placeholder
*/
this.placeholderLabel = 'Search';
this.multiple = false;
this.showSearch = true;
/**
* Label to be shown when no entries are found. Set to null if no message should be shown.
*/
this.noEntriesFoundLabel = 'No Data';
this.onChange = (/**
* @param {?} _
* @return {?}
*/
(_) => { });
this.onTouched = (/**
* @param {?} _
* @return {?}
*/
(_) => { });
/**
* Whether the backdrop class has been set
*/
this.overlayClassSet = false;
/**
* Event that emits when the current value changes
*/
this.change = new EventEmitter();
this.AllClicked = new EventEmitter();
/**
* Subject that emits when the component has been destroyed.
*/
this._onDestroy = new Subject();
}
//@ViewChild('innerSelectall', { read: ElementRef }) innerSelectall: ElementRef;
/**
* @return {?}
*/
get isInsideMatOption() {
return !!this.matOption;
}
/**
* Current search value
* @return {?}
*/
get value() {
return this._value;
}
/**
* @return {?}
*/
ngOnInit() {
// set custom panel class
/** @type {?} */
const panelClass = 'mat-select-search-panel';
if (this.matSelect.panelClass) {
if (Array.isArray(this.matSelect.panelClass)) {
this.matSelect.panelClass.push(panelClass);
}
else if (typeof this.matSelect.panelClass === 'string') {
this.matSelect.panelClass = [this.matSelect.panelClass, panelClass];
}
else if (typeof this.matSelect.panelClass === 'object') {
this.matSelect.panelClass[panelClass] = true;
}
}
else {
this.matSelect.panelClass = panelClass;
}
// set custom mat-option class if the component was placed inside a mat-option
if (this.matOption) {
this.matOption.disabled = true;
this.matOption._getHostElement().classList.add('contains-mat-select-search');
}
// when the select dropdown panel is opened or closed
this.matSelect.openedChange
// .pipe(takeUntil(this._onDestroy))
.pipe(delay(1), takeUntil(this._onDestroy))
.subscribe((/**
* @param {?} opened
* @return {?}
*/
(opened) => {
if (opened) {
// focus the search field when opening
this.getWidth();
this._focus();
}
else {
// clear it when closing
this._reset();
}
}));
// set the first item active after the options changed
this.matSelect.openedChange
.pipe(take(1))
.pipe(takeUntil(this._onDestroy))
.subscribe((/**
* @return {?}
*/
() => {
this._options = this.matSelect.options;
this._options.changes
.pipe(takeUntil(this._onDestroy))
.subscribe((/**
* @return {?}
*/
() => {
/** @type {?} */
const keyManager = this.matSelect._keyManager;
if (keyManager && this.matSelect.panelOpen) {
// avoid "expression has been changed" error
setTimeout((/**
* @return {?}
*/
() => {
keyManager.setFirstItemActive();
this.getWidth();
// set no entries found class on mat option
if (this.matOption) {
if (this._noEntriesFound()) {
this.matOption._getHostElement().classList.add('mat-select-search-no-entries-found');
}
else {
this.matOption._getHostElement().classList.remove('mat-select-search-no-entries-found');
}
}
}), 1);
}
}));
}));
// detect changes when the input changes
this.change
.pipe(takeUntil(this._onDestroy))
.subscribe((/**
* @return {?}
*/
() => {
this.changeDetectorRef.detectChanges();
}));
this.initMultipleHandling();
}
/**
* @return {?}
*/
ngOnDestroy() {
this._onDestroy.next();
this._onDestroy.complete();
}
/**
* @return {?}
*/
ngAfterViewInit() {
setTimeout((/**
* @return {?}
*/
() => {
this.setOverlayClass();
}));
this.matSelect.openedChange
.pipe(take(1), takeUntil(this._onDestroy)).subscribe((/**
* @return {?}
*/
() => {
this.matSelect.options.changes
.pipe(takeUntil(this._onDestroy))
.subscribe((/**
* @return {?}
*/
() => {
this.changeDetectorRef.markForCheck();
}));
}));
}
/**
* @param {?} event
* @return {?}
*/
_handleKeydown(event) {
if (event.keyCode === 32) {
// do not propagate spaces to MatSelect, as this would select the currently active option
event.stopPropagation();
}
}
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
/** @type {?} */
const valueChanged = value !== this._value;
if (valueChanged) {
this._value = value;
this.change.emit({ type: 'Text', val: value });
}
}
/**
* @param {?} value
* @return {?}
*/
onInputChange(value) {
/** @type {?} */
const valueChanged = value !== this._value;
if (valueChanged) {
this._value = value;
this.onChange({ type: 'Text', val: value });
this.change.emit({ type: 'Text', val: value });
}
}
/**
* @param {?} value
* @return {?}
*/
onBlur(value) {
this.writeValue(value);
this.onTouched();
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this.onTouched = fn;
}
/**
* @return {?}
*/
_focus() {
if (!this.searchSelectInput || !this.matSelect.panel) {
return;
}
// save and restore scrollTop of panel, since it will be reset by focus()
// note: this is hacky
/** @type {?} */
const panel = this.matSelect.panel.nativeElement;
/** @type {?} */
const scrollTop = panel.scrollTop;
// focus
this.searchSelectInput.nativeElement.focus();
panel.scrollTop = scrollTop;
}
/**
* Resets the current search value
* {boolean} focus whether to focus after resetting
*
* @param {?=} focus
* @return {?}
*/
_reset(focus) {
if (!this.searchSelectInput) {
return;
}
this.searchSelectInput.nativeElement.value = '';
this.onInputChange('');
if (focus) {
this._focus();
}
}
/**
* Sets the overlay class to correct offsetY
* so that the selected option is at the position of the select box when opening
* @private
* @return {?}
*/
setOverlayClass() {
if (this.overlayClassSet) {
return;
}
/** @type {?} */
const overlayClasses = ['cdk-overlay-pane-select-search'];
if (!this.matOption) {
// add offset to panel if component is not placed inside mat-option
overlayClasses.push('cdk-overlay-pane-select-search-with-offset');
}
this.matSelect.overlayDir.attach
.pipe(takeUntil(this._onDestroy))
.subscribe((/**
* @return {?}
*/
() => {
// note: this is hacky, but currently there is no better way to do this
// note: this is hacky, but currently there is no better way to do this
/** @type {?} */
let element;
/** @type {?} */
let overlayElement;
if (this.searchSelectInput) {
element = this.searchSelectInput.nativeElement;
while (element = element.parentElement) {
if (element.classList.contains('cdk-overlay-pane')) {
overlayElement = element;
break;
}
}
}
if (overlayElement) {
overlayClasses.forEach((/**
* @param {?} overlayClass
* @return {?}
*/
overlayClass => {
overlayElement.classList.add(overlayClass);
}));
}
}));
this.overlayClassSet = true;
}
/**
* Initializes handling <mat-select [multiple]="true">
* Note: to improve this code, mat-select should be extended to allow disabling resetting the selection while filtering.
* @private
* @return {?}
*/
initMultipleHandling() {
// if <mat-select [multiple]="true">
// store previously selected values and restore them when they are deselected
// because the option is not available while we are currently filtering
this.matSelect.valueChange
.pipe(takeUntil(this._onDestroy))
.subscribe((/**
* @param {?} values
* @return {?}
*/
(values) => {
if (this.matSelect.multiple) {
/** @type {?} */
let restoreSelectedValues = false;
if (this._value && this._value.length
&& this.previousSelectedValues && Array.isArray(this.previousSelectedValues)) {
if (!values || !Array.isArray(values)) {
values = [];
}
/** @type {?} */
const optionValues = this.matSelect.options.map((/**
* @param {?} option
* @return {?}
*/
option => option.value));
this.previousSelectedValues.forEach((/**
* @param {?} previousValue
* @return {?}
*/
previousValue => {
if (values.indexOf(previousValue) === -1 && optionValues.indexOf(previousValue) === -1) {
// if a value that was selected before is deselected and not found in the options, it was deselected
// due to the filtering, so we restore it.
values.push(previousValue);
restoreSelectedValues = true;
}
}));
}
if (restoreSelectedValues) {
this.matSelect._onChange(values);
}
this.previousSelectedValues = values;
}
}));
}
/**
* @private
* @return {?}
*/
getWidth() {
if (!this.innerSelectSearch || !this.innerSelectSearch.nativeElement) {
return;
}
/** @type {?} */
let element = this.innerSelectSearch.nativeElement;
/** @type {?} */
let panelElement;
while (element = element.parentElement) {
if (element.classList.contains('mat-select-panel')) {
panelElement = element;
break;
}
}
if (panelElement) {
this.innerSelectSearch.nativeElement.style.width = panelElement.clientWidth + 'px';
}
////innerSelectall
//if (!this.innerSelectall || !this.innerSelectall.nativeElement) {
// return;
//}
//let Selectallelement: HTMLElement = this.innerSelectall.nativeElement;
//let SelectallpanelElement: HTMLElement;
//while (Selectallelement = Selectallelement.parentElement) {
// if (Selectallelement.classList.contains('mat-select-panel')) {
// SelectallpanelElement = Selectallelement;
// break;
// }
//}
//if (SelectallpanelElement) {
// this.innerSelectall.nativeElement.style.width = SelectallpanelElement.clientWidth + 'px';
//}
}
/**
* @return {?}
*/
_noEntriesFound() {
if (!this._options) {
return;
}
if (this.matOption) {
return this.noEntriesFoundLabel && this.value && this._options.length === 1;
}
else {
return this.noEntriesFoundLabel && this.value && this._options.length === 0;
}
}
/**
* @param {?} change
* @param {?} check
* @return {?}
*/
toggleSelection(change, check) {
if (change.checked) {
//this.model.update.emit(this.values);
this.onChange({ type: 'Check', val: change.checked });
this.change.emit({ type: 'Check', val: change.checked });
}
else {
this.onChange({ type: 'Check', val: change.checked });
this.change.emit({ type: 'Check', val: change.checked });
}
}
/**
* @param {?} check
* @return {?}
*/
ischecked(check) {
console.log(this.matSelect.options, this.matSelect.value);
/** @type {?} */
let selected = this.matSelect.selected;
return this.matSelect.options && selected && selected.length > 0 && this.matSelect.options.length == selected.length;
}
/**
* @return {?}
*/
isIndeterminate() {
/** @type {?} */
let selected = this.matSelect.selected;
return this.matSelect.options && selected.length > 0 && selected.length < this.matSelect.options.length;
}
}
MatSelectSearchComponent.decorators = [
{ type: Component, args: [{
selector: 'mat-select-search',
template: "\r\n<input *ngIf=\"showSearch\" matInput class=\"mat-select-search-input mat-select-search-hidden\" />\r\n<input matInput class=\"mat-select-checkbox mat-select-search-hidden\"*ngIf=\"multiple\" />\r\n\r\n<div #innerSelectSearch class=\"mat-select-search-inner\" *ngIf=\"showSearch\"\r\n [ngClass]=\"{'mat-select-search-inner-multiple': matSelect.multiple}\">\r\n <input matInput autocomplete=\"off\"\r\n class=\"mat-select-search-input\"\r\n #searchSelectInput\r\n (keydown)=\"_handleKeydown($event)\"\r\n (input)=\"onInputChange($event.target.value)\"\r\n (blur)=\"onBlur($event.target.value)\"\r\n placeholder=\"Search\" />\r\n <button mat-button *ngIf=\"value\"\r\n mat-icon-button\r\n aria-label=\"Clear\"\r\n (click)=\"_reset(true)\"\r\n class=\"mat-select-search-clear\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n</div>\r\n\r\n<div *ngIf=\"noEntriesFoundLabel && value && _options?.length === 0\"\r\n class=\"mat-select-search-no-entries-found\">\r\n {{noEntriesFoundLabel}}\r\n</div>\r\n",
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => MatSelectSearchComponent)),
multi: true
}
],
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [".mat-select-search-hidden{visibility:hidden}.mat-select-search-inner{position:absolute;top:0;width:calc(100% + 3px);border-bottom:1px solid #ccc;background:#fff;z-index:100;font-size:inherit;box-shadow:none;border-radius:0;-webkit-transform:translate3d(0,0,0)}.mat-select-search-inner.mat-select-search-inner-multiple{width:100%}::ng-deep .mat-select-search-panel{transform:none!important;overflow-x:hidden}.mat-select-search-input{padding:10px 30px 10px 10px;box-sizing:border-box}.mat-select-checkbox{padding:10px;box-sizing:border-box}.mat-select-search-no-entries-found{padding:10px}.mat-select-search-clear{position:absolute;right:4px;top:5px}:host.mat-select-search-inside-mat-option .mat-select-search-input{padding-top:0;padding-bottom:0;height:3em;line-height:3em}:host.mat-select-search-inside-mat-option .mat-select-checkbox{padding-top:0;padding-bottom:0;height:3em;line-height:3em}:host.mat-select-search-inside-mat-option .mat-select-search-clear{top:3px}::ng-deep .cdk-overlay-pane-select-search.cdk-overlay-pane-select-search-with-offset{margin-top:0}::ng-deep .mat-option[aria-disabled=true].contains-mat-select-search{position:static;padding:0}::ng-deep .mat-option[aria-disabled=true].contains-mat-select-search .mat-icon{margin-right:0}::ng-deep .mat-option[aria-disabled=true].contains-mat-select-search .mat-option-pseudo-checkbox{display:none}::ng-deep .mat-option[aria-disabled=true].contains-mat-select-search.mat-select-search-no-entries-found{height:6em}.mat-select-all-inner{position:absolute;top:52px;width:calc(100% + 3px);background:#fff;z-index:100;font-size:inherit;box-shadow:none;border-radius:0;-webkit-transform:translate3d(0,0,0)}"]
}] }
];
/** @nocollapse */
MatSelectSearchComponent.ctorParameters = () => [
{ type: MatSelect, decorators: [{ type: Inject, args: [MatSelect,] }] },
{ type: ChangeDetectorRef },
{ type: MatOption, decorators: [{ type: Optional }, { type: Inject, args: [MatOption,] }] }
];
MatSelectSearchComponent.propDecorators = {
placeholderLabel: [{ type: Input }],
multiple: [{ type: Input, args: ['multiple',] }],
showSearch: [{ type: Input, args: ['showSearch',] }],
noEntriesFoundLabel: [{ type: Input }],
searchSelectInput: [{ type: ViewChild, args: ['searchSelectInput', { read: ElementRef },] }],
innerSelectSearch: [{ type: ViewChild, args: ['innerSelectSearch', { read: ElementRef },] }],
isInsideMatOption: [{ type: HostBinding, args: ['class.mat-select-search-inside-mat-option',] }]
};
if (false) {
/**
* Label of the search placeholder
* @type {?}
*/
MatSelectSearchComponent.prototype.placeholderLabel;
/** @type {?} */
MatSelectSearchComponent.prototype.multiple;
/** @type {?} */
MatSelectSearchComponent.prototype.showSearch;
/**
* Label to be shown when no entries are found. Set to null if no message should be shown.
* @type {?}
*/
MatSelectSearchComponent.prototype.noEntriesFoundLabel;
/**
* Reference to the search input field
* @type {?}
*/
MatSelectSearchComponent.prototype.searchSelectInput;
/** @type {?} */
MatSelectSearchComponent.prototype.innerSelectSearch;
/**
* @type {?}
* @private
*/
MatSelectSearchComponent.prototype._value;
/** @type {?} */
MatSelectSearchComponent.prototype.onChange;
/** @type {?} */
MatSelectSearchComponent.prototype.onTouched;
/**
* Reference to the MatSelect options
* @type {?}
*/
MatSelectSearchComponent.prototype._options;
/**
* Previously selected values when using <mat-select [multiple]="true">
* @type {?}
* @private
*/
MatSelectSearchComponent.prototype.previousSelectedValues;
/**
* Whether the backdrop class has been set
* @type {?}
* @private
*/
MatSelectSearchComponent.prototype.overlayClassSet;
/**
* Event that emits when the current value changes
* @type {?}
* @private
*/
MatSelectSearchComponent.prototype.change;
/**
* @type {?}
* @private
*/
MatSelectSearchComponent.prototype.AllClicked;
/**
* Subject that emits when the component has been destroyed.
* @type {?}
* @private
*/
MatSelectSearchComponent.prototype._onDestroy;
/** @type {?} */
MatSelectSearchComponent.prototype.matSelect;
/**
* @type {?}
* @private
*/
MatSelectSearchComponent.prototype.changeDetectorRef;
/** @type {?} */
MatSelectSearchComponent.prototype.matOption;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/mat-dropdown.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MatDropdownModule {
}
MatDropdownModule.decorators = [
{ type: NgModule, args: [{
declarations: [MatDropdownComponent, MatSelectSearchComponent],
imports: [
CommonModule,
FormsModule, ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
MatIconModule,
MatCheckboxModule,
MatSelectModule, MatTooltipModule
],
exports: [MatDropdownComponent]
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: public_api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ngx-mat-dropdown.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { DropdownSettingsModel, MatDropdownComponent, MatDropdownModule, MatDropdownService, MatSelectSearchComponent as ɵa };
//# sourceMappingURL=ngx-mat-dropdown.js.map