@sd-angular/core/fesm2015/sd-angular-core-select.js

Sd Angular Core Lib

import { Directive, TemplateRef, EventEmitter, Component, ChangeDetectionStrategy, ChangeDetectorRef, Inject, Optional, ViewChild, Input, ContentChild, Output, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Validators, NgForm, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInput, MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { __classPrivateFieldGet, __awaiter, __classPrivateFieldSet } from 'tslib';
import { SdFormControl, FORM_CONFIG, SdLabelDefDirective, SdViewDefDirective, SdCommonModule } from '@sd-angular/core/common';
import hash from 'object-hash';
import { Subject, BehaviorSubject, Subscription, combineLatest } from 'rxjs';
import { startWith, debounceTime, switchMap, map } from 'rxjs/operators';
import { v4 } from 'uuid';
import { MatSelectModule } from '@angular/material/select';
import { SdTranslateModule } from '@sd-angular/core/translate';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { SdPopoverModule } from '@sd-angular/core/popover';

class SdSelectDisplayDefDirective {
    constructor(templateRef) {
        this.templateRef = templateRef;
    }
}
SdSelectDisplayDefDirective.decorators = [
    { type: Directive, args: [{
                selector: '[sdSelectDisplayDef]'
            },] }
];
SdSelectDisplayDefDirective.ctorParameters = () => [
    { type: TemplateRef }
];

var _input, _name, _form, _itemsChanges, _delay, _validator, _subscription, _allItems, _allItem, _cache, _updateValidator, _loadSelectedItems, _loadItems, _onChange, _customValidator, _hashedValue, _getCopyText;
class SdSelect {
    constructor(ref, formConfig) {
        this.ref = ref;
        this.formConfig = formConfig;
        _input.set(this, void 0);
        _name.set(this, v4());
        this.disableErrorMessage = false;
        this.formControl = new SdFormControl();
        this.searchTerm$ = new Subject();
        _form.set(this, void 0);
        // Items
        _itemsChanges.set(this, new BehaviorSubject([]));
        // Server search
        this.loading = false;
        _delay.set(this, 200); // Sau khoảng thời gian delay nếu không có thay đổi thì thì mới bắt đầu thực hiện gọi hàm
        // Validator
        this.isRequired = false;
        _validator.set(this, void 0);
        this.multiple = false;
        this.limit = 100;
        this.filtered = false;
        this.selectAll = false;
        this.copyable = false;
        this.copied = false;
        this.modelChange = new EventEmitter();
        this.sdChange = new EventEmitter();
        this.sdSelection = new EventEmitter();
        _subscription.set(this, new Subscription());
        _allItems.set(this, void 0);
        _allItem.set(this, {});
        this.allSelected = false;
        _cache.set(this, {});
        this.isFocused = false;
        _updateValidator.set(this, () => {
            this.formControl.clearValidators();
            this.formControl.clearAsyncValidators();
            const validators = [];
            const asyncValidators = [];
            if (this.isRequired) {
                validators.push(Validators.required);
            }
            if (__classPrivateFieldGet(this, _validator)) {
                asyncValidators.push(__classPrivateFieldGet(this, _customValidator).call(this, __classPrivateFieldGet(this, _validator)));
            }
            if (this.inlineError) {
                validators.push(this.customInlineErrorValidator());
            }
            this.formControl.setValidators(validators);
            this.formControl.setAsyncValidators(asyncValidators);
            this.formControl.updateValueAndValidity();
        });
        _loadSelectedItems.set(this, (value, items) => __awaiter(this, void 0, void 0, function* () {
            if (!(value === null || value === void 0 ? void 0 : value.toString())) {
                return [];
            }
            const values = Array.isArray(value) ? value : [value];
            if (!this.valueField && !this.displayField) {
                return values;
            }
            this.loading = true;
            if (values.some(val => __classPrivateFieldGet(this, _allItem)[val] === undefined)) {
                const results = yield items(value, true)
                    .catch(() => [])
                    .finally(() => (this.loading = false));
                const objItem = Array.toObject(results, this.valueField);
                const objValue = Array.toObject(values.map(val => ({ [val === null || val === void 0 ? void 0 : val.toString()]: { [this.valueField]: val, [this.displayField]: val } })), this.valueField);
                __classPrivateFieldSet(this, _allItem, Object.assign(Object.assign(Object.assign({}, objValue), __classPrivateFieldGet(this, _allItem)), objItem));
            }
            return values.map(val => { var _a; return (_a = __classPrivateFieldGet(this, _allItem)[val === null || val === void 0 ? void 0 : val.toString()]) !== null && _a !== void 0 ? _a : { [this.valueField]: val, [this.displayField]: val }; });
        }));
        _loadItems.set(this, (searchText, items) => __awaiter(this, void 0, void 0, function* () {
            searchText = (searchText === null || searchText === void 0 ? void 0 : searchText.toString()) || '';
            const key = hash({
                checksum: this.cacheChecksum || null,
                searchText,
            });
            if (__classPrivateFieldGet(this, _cache)[key] === undefined && this.isFocused) {
                this.loading = true;
                const results = yield items(searchText)
                    .catch(() => [])
                    .finally(() => (this.loading = false));
                const objItem = Array.toObject(results, this.valueField);
                __classPrivateFieldSet(this, _allItem, Object.assign(Object.assign({}, __classPrivateFieldGet(this, _allItem)), objItem));
                __classPrivateFieldGet(this, _cache)[key] = results.union(this.valueField);
            }
            const selectedItems = yield __classPrivateFieldGet(this, _loadSelectedItems).call(this, this.formControl.value, items);
            // Đưa những selectedItems lên đầu nếu không mat-select-trigger sẽ không work
            return [...selectedItems, ...(__classPrivateFieldGet(this, _cache)[key] || [])].union(this.valueField);
        }));
        this.onSelectionChange = (change) => {
            var _a;
            this.allSelected = !this.select.options.some(e => !e.selected);
            const value = (_a = change === null || change === void 0 ? void 0 : change.value) !== null && _a !== void 0 ? _a : '';
            if (this.multiple) {
                this.formControl.setValue(value || []);
                __classPrivateFieldGet(this, _onChange).call(this, value || []);
            }
            else {
                this.searchTerm$.next('');
                this.formControl.setValue(value);
                __classPrivateFieldGet(this, _onChange).call(this, value);
            }
        };
        this.reValidate = () => {
            this.formControl.updateValueAndValidity({ emitEvent: true });
        };
        _onChange.set(this, (value) => __awaiter(this, void 0, void 0, function* () {
            if (Array.isArray(value)) {
                this.modelChange.emit(value);
                // this.sdChange.emit(value);
                // this.sdSelection.emit({
                //   value: value,
                //   items: value.map(val => this.#allItem[val?.toString()]),
                // });
            }
            else {
                this.modelChange.emit(value);
                // this.sdChange.emit(value);
                this.sdSelection.emit({
                    value: value,
                    item: __classPrivateFieldGet(this, _allItem)[value === null || value === void 0 ? void 0 : value.toString()],
                });
            }
        }));
        this.clear = ($event) => {
            $event === null || $event === void 0 ? void 0 : $event.stopPropagation();
            if (this.multiple) {
                this.formControl.setValue([]);
                this.modelChange.emit([]);
                this.sdChange.emit([]);
                this.sdSelection.emit({
                    value: [],
                    items: [],
                });
            }
            else {
                this.formControl.setValue(null);
                this.modelChange.emit(null);
                this.sdChange.emit(null);
                this.sdSelection.emit({
                    value: null,
                    item: null,
                });
            }
        };
        this.onClick = () => {
            var _a;
            if ((_a = this.sdView) === null || _a === void 0 ? void 0 : _a.templateRef) {
                if (!this.formControl.disabled && !this.isFocused) {
                    this.focus();
                }
            }
        };
        this.focus = () => {
            this.isFocused = true;
            setTimeout(() => {
                var _a, _b;
                (_a = this.select) === null || _a === void 0 ? void 0 : _a.focus();
                (_b = this.select) === null || _b === void 0 ? void 0 : _b.open();
            }, 100);
        };
        _customValidator.set(this, (func) => {
            return (c) => __awaiter(this, void 0, void 0, function* () {
                const value = c.value || null;
                if (func && typeof func === 'function') {
                    const result = func(value);
                    if (result instanceof Promise) {
                        const message = yield result;
                        if (message) {
                            return {
                                customValidator: message,
                            };
                        }
                        return null;
                    }
                    if (result) {
                        return {
                            customValidator: result,
                        };
                    }
                    return null;
                }
                return null;
            });
        });
        _hashedValue.set(this, void 0);
        this.onOpenedChange = (isOpened) => {
            var _a, _b;
            if (isOpened) {
                this.isFocused = true;
                if (__classPrivateFieldGet(this, _input)) {
                    __classPrivateFieldGet(this, _input).value = null;
                }
                __classPrivateFieldSet(this, _hashedValue, hash({
                    value: this.formControl.value,
                }));
                this.searchTerm$.next('');
            }
            else {
                this.isFocused = false;
                const hashedValue = hash({
                    value: this.formControl.value,
                });
                // Khi panel close, bắn event sdChange, sdSelection nếu có thay đổi giá trị
                if (__classPrivateFieldGet(this, _hashedValue) !== hashedValue) {
                    this.sdChange.emit(this.formControl.value);
                    if (this.multiple) {
                        this.sdSelection.emit({
                            value: this.formControl.value,
                            items: ((_a = this.formControl.value) === null || _a === void 0 ? void 0 : _a.map(val => __classPrivateFieldGet(this, _allItem)[val === null || val === void 0 ? void 0 : val.toString()])) || [],
                        });
                    }
                    else {
                        this.sdSelection.emit({
                            value: this.formControl.value,
                            item: __classPrivateFieldGet(this, _allItem)[(_b = this.formControl.value) === null || _b === void 0 ? void 0 : _b.toString()],
                        });
                    }
                }
                __classPrivateFieldSet(this, _hashedValue, undefined);
            }
        };
        this.onOptionChange = (tooltip) => {
            tooltip === null || tooltip === void 0 ? void 0 : tooltip.hide();
        };
        this.trackByKey = (index, item) => {
            if (this.valueField) {
                return item === null || item === void 0 ? void 0 : item[this.valueField];
            }
            return item;
        };
        this.onCopyText = (event) => {
            event === null || event === void 0 ? void 0 : event.stopPropagation();
            const text = __classPrivateFieldGet(this, _getCopyText).call(this);
            SdUtility.copyToClipboard(text);
            this.copied = true;
            setTimeout(() => {
                this.copied = false;
                this.ref.markForCheck();
            }, 2000);
        };
        _getCopyText.set(this, () => {
            var _a;
            const value = this.formControl.value;
            let text = (_a = value === null || value === void 0 ? void 0 : value.toString()) !== null && _a !== void 0 ? _a : '';
            if (typeof this.copyText === 'function') {
                if (Array.isArray(value)) {
                    text = this.copyText(value, value.map(val => __classPrivateFieldGet(this, _allItem)[val === null || val === void 0 ? void 0 : val.toString()]));
                }
                else {
                    text = this.copyText(value, __classPrivateFieldGet(this, _allItem)[value === null || value === void 0 ? void 0 : value.toString()]);
                }
            }
            else if (this.copyText) {
                text = this.copyText;
            }
            return text;
        });
    }
    set input(input) {
        if (__classPrivateFieldGet(this, _input) !== input) {
            __classPrivateFieldSet(this, _input, input);
            __classPrivateFieldGet(this, _input).value = null;
        }
    }
    set name(val) {
        if (val) {
            __classPrivateFieldSet(this, _name, val);
        }
    }
    set _disableErrorMessage(val) {
        this.disableErrorMessage = val === '' || val;
        val = val === '' || val;
    }
    set form(val) {
        if (val) {
            if (val instanceof NgForm) {
                __classPrivateFieldSet(this, _form, val.form);
            }
            else {
                __classPrivateFieldSet(this, _form, val);
            }
        }
    }
    set _label(val) {
        this.label = val;
        this.qcId = hash({
            selector: 'sd-select',
            label: val,
        });
    }
    set model(value) {
        // if (this.formControl.value !== value) {
        //   this.formControl.setValue(value);
        // }
        // if(this.formControl.disabled) {
        //   this.formControl.enable({
        //     emitEvent: false
        //   });
        //   this.formControl.setValue(value);
        //   this.formControl.disable({
        //     emitEvent: false
        //   });
        // } else {
        //   this.formControl.setValue(value);
        // }
        // this.formControl.setValue(value);
        if (this.formControl.value !== value) {
            this.formControl.setValue(value);
        }
    }
    set items(items) {
        __classPrivateFieldSet(this, _delay, 0);
        if (!items) {
            __classPrivateFieldGet(this, _itemsChanges).next([]);
        }
        else if (Array.isArray(items)) {
            __classPrivateFieldGet(this, _itemsChanges).next(items.filter(e => e !== null && e !== undefined));
        }
        else {
            __classPrivateFieldSet(this, _delay, 500);
            __classPrivateFieldGet(this, _itemsChanges).next(items);
        }
        this.searchTerm$.next('');
    }
    set required(val) {
        this.isRequired = val === '' || val;
        __classPrivateFieldGet(this, _updateValidator).call(this);
    }
    set validator(validator) {
        __classPrivateFieldSet(this, _validator, validator);
        __classPrivateFieldGet(this, _updateValidator).call(this);
    }
    set _inlineError(val) {
        this.inlineError = val;
        __classPrivateFieldGet(this, _updateValidator).call(this);
    }
    // Optional
    set disabled(val) {
        val = val === '' || val;
        if (val) {
            this.formControl.disable();
        }
        else {
            this.formControl.enable();
        }
    }
    set _multiple(val) {
        this.multiple = val === '' || val;
    }
    set _filtered(val) {
        this.filtered = val === '' || val;
    }
    set _selectAll(val) {
        this.selectAll = val === '' || val;
    }
    set _copyable(val) {
        this.copyable = val === '' || val;
    }
    ngOnInit() {
        var _a;
        this.appearance = this.appearance || ((_a = this.formConfig) === null || _a === void 0 ? void 0 : _a.appearance);
        __classPrivateFieldGet(this, _subscription).add(this.formControl.sdChanges.subscribe(() => {
            this.ref.markForCheck();
        }));
        __classPrivateFieldSet(this, _allItems, combineLatest([
            __classPrivateFieldGet(this, _itemsChanges).asObservable(),
            this.searchTerm$.asObservable().pipe(startWith(''), debounceTime(__classPrivateFieldGet(this, _delay))),
            this.formControl.valueChanges.pipe(startWith(this.formControl.value)),
        ]).pipe(switchMap(([items, val, formValue]) => __awaiter(this, void 0, void 0, function* () {
            formValue = this.formControl.value;
            if (typeof items === 'function') {
                return yield __classPrivateFieldGet(this, _loadItems).call(this, val, items);
            }
            __classPrivateFieldSet(this, _allItem, items.toObject(this.valueField));
            const isArray = Array.isArray(formValue);
            const hasFields = !!this.valueField && !!this.displayField;
            const filteredItems = items.filter(item => {
                const value = hasFields ? item[this.valueField] : item;
                const display = hasFields ? item[this.displayField] : item;
                if (String.aliasIncludes(value, val) || String.aliasIncludes(display, val)) {
                    return true;
                }
                if (isArray) {
                    return formValue.some(e => e === value);
                }
                return formValue === value;
            });
            if (items.length <= this.limit) {
                return filteredItems;
            }
            // Đưa những selectedItems lên đầu nếu không mat-select-trigger sẽ không work
            return filteredItems.sort((current, next) => {
                const value1 = hasFields ? current[this.valueField] : current;
                const value2 = hasFields ? next[this.valueField] : next;
                let flag1 = 0;
                let flag2 = 0;
                if (isArray) {
                    flag1 = formValue.some(e => e === value1) ? 1 : 0;
                    flag2 = formValue.some(e => e === value2) ? 1 : 0;
                    return flag2 - flag1;
                }
                flag1 = formValue === value1 ? 1 : 0;
                flag2 = formValue === value2 ? 1 : 0;
                return flag2 - flag1;
            });
        }))));
        this.selectedItems = combineLatest([
            __classPrivateFieldGet(this, _itemsChanges).asObservable(),
            this.formControl.valueChanges.pipe(startWith(this.formControl.value)),
        ]).pipe(switchMap(([items, val]) => __awaiter(this, void 0, void 0, function* () {
            // Vì một số lý do chưa xác định mà khi sử dụng sdViewDef thì khi chuyển sang dạng view sẽ trigger val = null
            // Nhưng formControl.value vẫn có giá trị đúng nên thực hiện gán val = this.formControl.value;
            val = this.formControl.value;
            if (!(val === null || val === void 0 ? void 0 : val.toString())) {
                return [];
            }
            const values = Array.isArray(val) ? val : [val];
            if (!this.valueField) {
                return values;
            }
            if (typeof items === 'function') {
                return yield __classPrivateFieldGet(this, _loadSelectedItems).call(this, val, items);
            }
            return values.map(value => {
                return ((items === null || items === void 0 ? void 0 : items.find(item => item[this.valueField] === value)) || {
                    [this.valueField]: value,
                    [this.displayField]: value,
                });
            });
        })));
        this.filteredItems = __classPrivateFieldGet(this, _allItems).pipe(map(allItems => allItems.paging(this.limit)));
        this.display = this.selectedItems.pipe(map(selectedItems => { var _a; return (_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => (this.displayField ? item[this.displayField] : item))) === null || _a === void 0 ? void 0 : _a.join(', '); }));
        // Lấy dữ liệu cho tooltip
        __classPrivateFieldGet(this, _subscription).add(this.selectedItems.subscribe(selectedItems => {
            var _a;
            return (this.tooltip = (_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => (this.valueField ? `• ${item[this.valueField]} - ${item[this.displayField]}` : `• ${item}`))) === null || _a === void 0 ? void 0 : _a.join('\n'));
        }));
    }
    ngAfterViewInit() {
        var _a;
        (_a = __classPrivateFieldGet(this, _form)) === null || _a === void 0 ? void 0 : _a.addControl(__classPrivateFieldGet(this, _name), this.formControl);
    }
    ngOnDestroy() {
        var _a;
        (_a = __classPrivateFieldGet(this, _form)) === null || _a === void 0 ? void 0 : _a.removeControl(__classPrivateFieldGet(this, _name));
        __classPrivateFieldGet(this, _subscription).unsubscribe();
    }
    // Hàm tạo Validators tùy chỉnh cho inlineError
    customInlineErrorValidator() {
        return (control) => {
            return { inlineError: true };
        };
    }
    onSelectAll() {
        if (this.allSelected) {
            this.formControl.setValue(this.select.options.map(e => e.value));
        }
        else {
            this.formControl.setValue([]);
        }
        __classPrivateFieldGet(this, _onChange).call(this, this.formControl.value);
    }
}
_input = new WeakMap(), _name = new WeakMap(), _form = new WeakMap(), _itemsChanges = new WeakMap(), _delay = new WeakMap(), _validator = new WeakMap(), _subscription = new WeakMap(), _allItems = new WeakMap(), _allItem = new WeakMap(), _cache = new WeakMap(), _updateValidator = new WeakMap(), _loadSelectedItems = new WeakMap(), _loadItems = new WeakMap(), _onChange = new WeakMap(), _customValidator = new WeakMap(), _hashedValue = new WeakMap(), _getCopyText = new WeakMap();
SdSelect.decorators = [
    { type: Component, args: [{
                selector: 'sd-select',
                template: "<ng-container *ngIf=\"!appearance && sdLabelDef?.templateRef\">\r\n  <ng-container *ngTemplateOutlet=\"sdLabelDef.templateRef\"> </ng-container>\r\n</ng-container>\r\n<label *ngIf=\"!appearance && label && !sdLabelDef?.templateRef\" class=\"d-block mb-0 T14M\"\r\n  >{{ label }} <span class=\"text-danger mb-2\" *ngIf=\"isRequired\">*</span></label\r\n>\r\n<div\r\n  class=\"d-flex align-items-center\"\r\n  [class.sd-view]=\"sdView?.templateRef\"\r\n  [class.c-focused]=\"isFocused\"\r\n  [class.c-disabled]=\"formControl.disabled\"\r\n  (click)=\"onClick()\">\r\n  <ng-container *ngIf=\"sdView?.templateRef && !isFocused; else default\">\r\n    <ng-container *ngTemplateOutlet=\"sdView.templateRef; context: { value: formControl.value, selectedItems: selectedItems | async }\">\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #default>\r\n    <mat-form-field\r\n      class=\"sd-md\"\r\n      [ngClass]=\"{ 'sd-sm': size === 'sm', 'no-padding-wrapper': disableErrorMessage }\"\r\n      [appearance]=\"appearance || 'outline'\">\r\n      <mat-label *ngIf=\"appearance && label\">{{ label }}</mat-label>\r\n      <mat-select\r\n        *ngIf=\"multiple\"\r\n        #select\r\n        [formControl]=\"formControl\"\r\n        [placeholder]=\"placeholder || (appearance ? label : '')\"\r\n        multiple\r\n        (selectionChange)=\"onSelectionChange($event)\"\r\n        disableOptionCentering=\"true\"\r\n        panelClass=\"sd-select-panel\"\r\n        [class.sd-selected]=\"!isRequired && formControl?.value?.length\"\r\n        [required]=\"isRequired\"\r\n        (openedChange)=\"onOpenedChange($event)\"\r\n        [attr.data-qclabel]=\"label\"\r\n        [attr.data-qcid]=\"qcId\"\r\n        matTooltipClass=\"sd-multiline-tooltip\"\r\n        [matTooltipDisabled]=\"!formControl.disabled || !formControl?.value?.length\"\r\n        [matTooltip]=\"tooltip\">\r\n        <mat-select-trigger>\r\n          {{ display | async }}\r\n        </mat-select-trigger>\r\n        <mat-option *ngIf=\"filtered\" class=\"sd-filtered-input\" (keyup.Space)=\"$event.stopPropagation()\" disabled=\"true\">\r\n          <mat-form-field class=\"sd-md\" appearance=\"outline\">\r\n            <mat-icon matPrefix>search</mat-icon>\r\n            <input\r\n              aria-hidden=\"true\"\r\n              #input\r\n              placeholder=\"{{ 'Search' | sdTranslate }}\"\r\n              matInput\r\n              autocomplete=\"off\"\r\n              (keydown)=\"$event.stopPropagation()\"\r\n              (keyup)=\"searchTerm$.next($event.target.value)\" />\r\n          </mat-form-field>\r\n        </mat-option>\r\n        <ng-container *ngIf=\"multiple && selectAll\">\r\n          <mat-checkbox class=\"mat-option\" [(ngModel)]=\"allSelected\" [ngModelOptions]=\"{ standalone: true }\" (change)=\"onSelectAll()\">\r\n            T\u1EA5t c\u1EA3</mat-checkbox\r\n          >\r\n        </ng-container>\r\n        <ng-container *ngIf=\"valueField && displayField\">\r\n          <mat-option *ngFor=\"let item of filteredItems | async; trackBy: trackByKey\" [value]=\"item[valueField]\">\r\n            <div matTooltipPosition=\"above\" [matTooltip]=\"item[displayField]\">\r\n              <ng-container *ngIf=\"selectDisplayDef?.templateRef\">\r\n                <ng-container *ngTemplateOutlet=\"selectDisplayDef.templateRef; context: { item: item }\"> </ng-container>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"!selectDisplayDef?.templateRef\">\r\n                {{ item[displayField] }}\r\n              </ng-container>\r\n            </div>\r\n          </mat-option>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!valueField && !displayField\">\r\n          <mat-option *ngFor=\"let item of filteredItems | async; trackBy: trackByKey\" [value]=\"item\">\r\n            <div matTooltipPosition=\"above\" [matTooltip]=\"item\">\r\n              <ng-container *ngIf=\"selectDisplayDef?.templateRef\">\r\n                <ng-container *ngTemplateOutlet=\"selectDisplayDef.templateRef; context: { item: item }\"> </ng-container>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"!selectDisplayDef?.templateRef\">\r\n                {{ item }}\r\n              </ng-container>\r\n            </div>\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n      <mat-select\r\n        *ngIf=\"!multiple\"\r\n        #select\r\n        [formControl]=\"formControl\"\r\n        [placeholder]=\"placeholder || (appearance ? label : '')\"\r\n        (selectionChange)=\"onSelectionChange($event)\"\r\n        disableOptionCentering=\"true\"\r\n        panelClass=\"sd-select-panel\"\r\n        [class.sd-selected]=\"!isRequired && formControl?.value != null\"\r\n        [required]=\"isRequired\"\r\n        (openedChange)=\"onOpenedChange($event)\"\r\n        [attr.data-qclabel]=\"label\"\r\n        [attr.data-qcid]=\"qcId\">\r\n        <mat-select-trigger>\r\n          {{ display | async }}\r\n        </mat-select-trigger>\r\n        <mat-option *ngIf=\"filtered\" class=\"sd-filtered-input\" (keyup.Space)=\"$event.stopPropagation()\" disabled=\"true\">\r\n          <mat-form-field class=\"sd-md\" appearance=\"outline\">\r\n            <mat-icon matPrefix>search</mat-icon>\r\n            <input\r\n              aria-hidden=\"true\"\r\n              #input\r\n              placeholder=\"{{ 'Search' | sdTranslate }}\"\r\n              matInput\r\n              autocomplete=\"off\"\r\n              (keydown)=\"$event.stopPropagation()\"\r\n              (keyup)=\"searchTerm$.next($event.target.value)\" />\r\n          </mat-form-field>\r\n        </mat-option>\r\n        <ng-container *ngIf=\"valueField && displayField\">\r\n          <mat-option *ngFor=\"let item of filteredItems | async; trackBy: trackByKey\" [value]=\"item[valueField]\">\r\n            <div matTooltipPosition=\"above\" [matTooltip]=\"item[displayField]\">\r\n              <ng-container *ngIf=\"selectDisplayDef?.templateRef\">\r\n                <ng-container *ngTemplateOutlet=\"selectDisplayDef.templateRef; context: { item: item }\"> </ng-container>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"!selectDisplayDef?.templateRef\">\r\n                {{ item[displayField] }}\r\n              </ng-container>\r\n            </div>\r\n          </mat-option>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!valueField && !displayField\">\r\n          <mat-option *ngFor=\"let item of filteredItems | async; trackBy: trackByKey\" [value]=\"item\">\r\n            <div matTooltipPosition=\"above\" [matTooltip]=\"item\">\r\n              <ng-container *ngIf=\"selectDisplayDef?.templateRef\">\r\n                <ng-container *ngTemplateOutlet=\"selectDisplayDef.templateRef; context: { item: item }\"> </ng-container>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"!selectDisplayDef?.templateRef\">\r\n                {{ item }}\r\n              </ng-container>\r\n            </div>\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n      <ng-content select=\"[sdSuffixIcon]\" matSuffix></ng-content>\r\n      <svg\r\n        #copyTooltip=\"matTooltip\"\r\n        *ngIf=\"(multiple ? formControl?.value?.length : formControl?.value != null) && copyable\"\r\n        matSuffix\r\n        [matTooltip]=\"copied ? 'Copied' : 'Copy'\"\r\n        class=\"icon-copy\"\r\n        focusable=\"false\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 448 512\"\r\n        (click)=\"onCopyText($event)\">\r\n        <path\r\n          d=\"M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z\"></path>\r\n      </svg>\r\n      \r\n      <mat-icon\r\n        *ngIf=\"(multiple ? formControl?.value?.length : formControl?.value != null) && !isRequired && !formControl.disabled\"\r\n        class=\"pointer sd-suffix-icon\"\r\n        (click)=\"clear($event)\"\r\n        matSuffix\r\n        >cancel\r\n      </mat-icon>\r\n      <mat-error *ngIf=\"formControl.errors?.required\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ 'This field is required' | sdTranslate }}</ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.customValidator\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ formControl?.errors?.customValidator }}</ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl.errors?.inlineError\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ inlineError }}</ng-container>\r\n      </mat-error>\r\n    </mat-form-field>\r\n  </ng-template>\r\n</div>\r\n<!-- <sd-popover #popoverValues=\"sdPopover\" width=\"auto\">\r\n  <ng-container *ngIf=\"formControl?.value?.length\">\r\n    <ng-container *sdLet=\"selectedItems | async as items\">\r\n      <div *ngFor=\"let item of items\">\r\n        <strong>{{ item[valueField] }}</strong> - {{ item[displayField] }}\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n</sd-popover> -->\r\n",
                changeDetection: ChangeDetectionStrategy.OnPush,
                styles: [":host{display:block;padding-top:5px}:host ::ng-deep .mat-form-field.mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:none}:host ::ng-deep .sd-selected .mat-select-arrow{border:none}:host ::ng-deep .mat-form-field.no-padding-wrapper .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .mat-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline{background:#f6f6f6;color:#e9e9e9}:host ::ng-deep .mat-form-field mat-select.mat-select-disabled .mat-select-value{color:#4d4d4d!important}:host ::ng-deep .mat-form-field .mat-placeholder-required{color:#f82c13}:host ::ng-deep .mat-form-field:hover .icon-copy{opacity:1}:host ::ng-deep .mat-form-field .icon-copy{cursor:pointer;fill:rgba(0,0,0,.5);height:.9em;opacity:0;transition:opacity .2s linear;width:.9em}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}::ng-deep .sd-select-panel .mat-option.sd-filtered-input{background-color:#fff;position:-webkit-sticky;position:sticky;top:0;z-index:10}::ng-deep .sd-select-panel .mat-option.sd-filtered-input .mat-form-field.mat-form-field-appearance-outline{width:100%}::ng-deep .sd-select-panel .mat-option.sd-filtered-input mat-pseudo-checkbox{display:none}::ng-deep .mat-select-panel .mat-option.sd-filtered-input{height:auto}::ng-deep .sd-select-panel .mat-option.sd-filtered-input input{color:#000}::ng-deep .sd-select-panel .mat-option.sd-filtered-input .mat-form-field-prefix .mat-icon{margin-right:0}::ng-deep .sd-select-panel .mat-option.sd-filtered-input .mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper{padding:10px 0}::ng-deep .sd-select-panel .mat-option.sd-filtered-input .mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper .mat-form-field-outline{background-color:rgba(0,0,0,.04)}::ng-deep .sd-multiline-tooltip{white-space:pre-line}::ng-deep .mat-select-panel{overflow:auto!important}"]
            },] }
];
SdSelect.ctorParameters = () => [
    { type: ChangeDetectorRef },
    { type: undefined, decorators: [{ type: Inject, args: [FORM_CONFIG,] }, { type: Optional }] }
];
SdSelect.propDecorators = {
    input: [{ type: ViewChild, args: [MatInput,] }],
    select: [{ type: ViewChild, args: ['select',] }],
    name: [{ type: Input }],
    appearance: [{ type: Input }],
    _disableErrorMessage: [{ type: Input, args: ['disableErrorMessage',] }],
    size: [{ type: Input }],
    form: [{ type: Input }],
    _label: [{ type: Input, args: ['label',] }],
    placeholder: [{ type: Input }],
    model: [{ type: Input }],
    items: [{ type: Input }],
    valueField: [{ type: Input }],
    displayField: [{ type: Input }],
    cacheChecksum: [{ type: Input }],
    required: [{ type: Input }],
    validator: [{ type: Input }],
    _inlineError: [{ type: Input, args: ['inlineError',] }],
    disabled: [{ type: Input }],
    _multiple: [{ type: Input, args: ['multiple',] }],
    limit: [{ type: Input }],
    _filtered: [{ type: Input, args: ['filtered',] }],
    selectDisplayDef: [{ type: ContentChild, args: [SdSelectDisplayDefDirective,] }],
    _selectAll: [{ type: Input, args: ['selectAll',] }],
    copyTooltip: [{ type: ViewChild, args: ['copyTooltip',] }],
    _copyable: [{ type: Input, args: ['copyable',] }],
    copyText: [{ type: Input }],
    modelChange: [{ type: Output }],
    sdChange: [{ type: Output }],
    sdSelection: [{ type: Output }],
    sdLabelDef: [{ type: ContentChild, args: [SdLabelDefDirective,] }],
    sdView: [{ type: ContentChild, args: [SdViewDefDirective,] }]
};

class SdSelectModule {
}
SdSelectModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule,
                    FormsModule,
                    ReactiveFormsModule,
                    MatInputModule,
                    MatTooltipModule,
                    MatFormFieldModule,
                    MatIconModule,
                    MatSelectModule,
                    MatProgressSpinnerModule,
                    MatCheckboxModule,
                    SdTranslateModule,
                    SdCommonModule,
                    SdPopoverModule
                ],
                declarations: [
                    SdSelect,
                    SdSelectDisplayDefDirective
                ],
                exports: [
                    SdSelect,
                    SdSelectDisplayDefDirective,
                    SdCommonModule
                ],
                providers: []
            },] }
];

/*
 * Public API Surface of superdev-angular-core
 */

/**
 * Generated bundle index. Do not edit.
 */

export { SdSelect, SdSelectDisplayDefDirective, SdSelectModule };
//# sourceMappingURL=sd-angular-core-select.js.map