import * as i0 from '@angular/core';
import { EventEmitter, Directive, Output, Component, Input } from '@angular/core';
import { NgIf, NgClass, AsyncPipe, NgForOf, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
import * as i2 from '@angular/forms';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import * as i8 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import { Subject, filter, switchMap, fromEvent, throttleTime, takeUntil, Subscription, debounceTime, distinctUntilChanged, startWith } from 'rxjs';
import * as i3 from '@ngx-translate/core';
import { TranslateModule } from '@ngx-translate/core';
import * as i1 from '@angular/material/select';
import { MatSelectModule } from '@angular/material/select';
import * as i7 from '@angular/material/chips';
import { MatChipsModule } from '@angular/material/chips';
import * as i6 from '@angular/material/core';
import { MatOptionModule } from '@angular/material/core';
import * as i9 from '@angular/material/tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';
import { LanguageEnum } from '@testlocallibrary/shared-kernel/models/enums';
import { IdFormatPipe } from '@testlocallibrary/shared-kernel/pipes';
import * as i1$1 from '@testlocallibrary/shared-kernel/services/language';
import * as i4 from '@angular/material/form-field';

class LdcSelectScrollBottomDirective {
    constructor(matSelect) {
        this.matSelect = matSelect;
        this.reachedBottom = new EventEmitter();
        this.unsubscribeAll = new Subject();
        this.BOTTOM_SCROLL_OFFSET = 25;
        this.matSelect.openedChange
            .pipe(filter(isOpened => !!isOpened), switchMap(() => fromEvent(this.matSelect.panel.nativeElement, "scroll").pipe(throttleTime(50))), takeUntil(this.unsubscribeAll))
            .subscribe((event) => {
            if (event.target.scrollTop >=
                event.target.scrollHeight -
                    event.target.offsetHeight -
                    this.BOTTOM_SCROLL_OFFSET) {
                this.reachedBottom.emit();
            }
        });
    }
    ngOnDestroy() {
        this.unsubscribeAll.next(true);
        this.unsubscribeAll.complete();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LdcSelectScrollBottomDirective, deps: [{ token: i1.MatSelect }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LdcSelectScrollBottomDirective, isStandalone: true, selector: "[libLdcSelectScrollBottom]", outputs: { reachedBottom: "appMatSelectScrollBottom" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LdcSelectScrollBottomDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: "[libLdcSelectScrollBottom]",
                    standalone: true,
                }]
        }], ctorParameters: function () { return [{ type: i1.MatSelect }]; }, propDecorators: { reachedBottom: [{
                type: Output,
                args: ["appMatSelectScrollBottom"]
            }] } });

class LdcDropDownComponent {
    clearControllerValue() {
        this.controller.setValue(null);
    }
    constructor(languageService) {
        this.languageService = languageService;
        this.language = LanguageEnum.En;
        this.LanguageEnum = LanguageEnum;
        this.options = [];
        this.isMultiple = false;
        this.isSearchable = false;
        this.isDisplayClearBtn = false;
        this.isDisabled = false;
        this.placeholder = '';
        this.isDisplayChips = false;
        this.isShowTooltip = false;
        this.isWhiteMode = false;
        this.isDisplayButton = false;
        this.isDisplayNone = false;
        this.isLoading = false;
        this.textNone = 'None';
        this.inputId = '';
        this.onChange = new EventEmitter();
        this.onScroll = new EventEmitter();
        this.onSearch = new EventEmitter();
        this.onClear = new EventEmitter();
        this.onRemoveChip = new EventEmitter();
        this.onControlValueChange = new EventEmitter();
        this.onButtonClick = new EventEmitter();
        this.subscription = new Subscription();
        this.searchCtrl = new FormControl();
        this.list = [];
    }
    ngOnInit() {
        this.search();
        this.language = this.languageService.getLanguage();
    }
    search() {
        if (this.searchValue != null) {
            this.searchCtrl.setValue(this.searchValue);
        }
        this.subscription.add(this.searchCtrl?.valueChanges
            .pipe(debounceTime(500), distinctUntilChanged(), filter(value => value !== null), startWith(''))
            .subscribe({
            next: (value) => {
                this.list = this.options.filter((item) => item[this.value].toLowerCase().includes(value.toLowerCase()));
                this.onSearch.emit(value);
                if (this.isMultiple && this.controllerValue.length) {
                    this.controller.setValue(this.controllerValue.map((item) => item.key));
                    this.onChange.emit({ value: this.controller.value });
                }
            },
        }));
    }
    // ngOnDestroy(): void {
    //   this._destroyAll$.next(null);
    //   this._destroyAll$.complete();
    // }
    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
    clearSearch() {
        if (this.searchCtrl.value.length) {
            this.searchCtrl.reset();
            this.list = this.options;
        }
    }
    emitClear(event) {
        this.onClear.emit(event);
    }
    changeSelection($event) {
        this.onChange.emit($event);
    }
    optionChosen(option) {
        if (!this.isMultiple) {
            this.controllerValue = [];
            this.controllerValue.push({
                key: option[this.key],
                value: option[this.value],
            });
        }
        else {
            const index = this.controllerValue.findIndex((item) => item.key === option[this.key]);
            if (index > -1) {
                this.controllerValue.splice(index, 1);
                this.onRemoveChip.emit({
                    key: option[this.key],
                    value: option[this.value],
                });
            }
            else {
                this.controllerValue.push({
                    key: option[this.key],
                    value: option[this.value],
                });
                // set value after change any thing
                this.setControllerValueInChipsMode();
            }
        }
    }
    remove(value) {
        const index = this.controllerValue.indexOf(value);
        if (index >= 0) {
            this.controllerValue.splice(index, 1);
            this.controller.setValue(this.controllerValue.map((item) => item.key));
        }
        else {
            this.controllerValue = [];
        }
        // set value after change any thing
        this.setControllerValueInChipsMode();
    }
    setControllerValueInChipsMode() {
        this.onControlValueChange.emit(this.controllerValue);
        // if(this.isMultiple){
        //   this.controller.setValue(this.controllerValue.map(item => item.key));
        // }
    }
    getDisplayChips() {
        return this.controllerValue
            ?.map((item) => {
            return item.value;
        })
            .join(',');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LdcDropDownComponent, deps: [{ token: i1$1.LanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LdcDropDownComponent, isStandalone: true, selector: "lib-ldc-drop-down", inputs: { controller: "controller", label: "label", value: "value", key: "key", options: "options", optionsObservable: "optionsObservable", isObservable: "isObservable", isRequired: "isRequired", isDependent: "isDependent", isMultiple: "isMultiple", isSearchable: "isSearchable", isDisplayClearBtn: "isDisplayClearBtn", isDisabled: "isDisabled", placeholder: "placeholder", searchOptions: "searchOptions", controllerValue: "controllerValue", isDisplayChips: "isDisplayChips", isShowTooltip: "isShowTooltip", isWhiteMode: "isWhiteMode", isDisplayButton: "isDisplayButton", isDisplayNone: "isDisplayNone", isLoading: "isLoading", searchValue: "searchValue", textButton: "textButton", textNone: "textNone", inputId: "inputId" }, outputs: { onChange: "onChange", onScroll: "onScroll", onSearch: "onSearch", onClear: "onClear", onRemoveChip: "onRemoveChip", onControlValueChange: "onControlValueChange", onButtonClick: "onButtonClick" }, ngImport: i0, template: "<mat-label class=\"stc-label\">{{ label | translate }}\r\n  <small *ngIf=\"isRequired\" class=\"font-14 text-danger\">*</small>\r\n</mat-label>\r\n<mat-form-field\r\n  appearance=\"outline\"\r\n  class=\"w-100 form-field\"\r\n  [ngClass]=\"isWhiteMode ? 'ldc-bg-white' : 'ldc-bg-gray'\"\r\n  [class.hide-placeholder]=\"isMultiple\"\r\n>\r\n  <label class=\"mat-form-content\" [ngClass]=\"{'ar-mat-form-content' : language === LanguageEnum.Ar }\">\r\n    <div class=\"chips-placeholder\" *ngIf=\"isMultiple\">\r\n      {{ getDisplayChips() }}\r\n    </div>\r\n    <mat-select\r\n      libLdcSelectScrollBottom\r\n      (appMatSelectScrollBottom)=\"\r\n        onScroll.emit({\r\n          event: $event,\r\n          controller: controller,\r\n          scrollEnd: true\r\n        })\r\n      \"\r\n      (selectionChange)=\"changeSelection($event)\"\r\n      [formControl]=\"controller\"\r\n      [multiple]=\"isMultiple\"\r\n      [attr.disabled]=\"isDisabled\"\r\n      [placeholder]=\"controllerValue?.length ? '' : placeholder | translate\"\r\n      [id]=\"inputId | IdFormat\"\r\n    >\r\n      <div class=\"custom-input-search\" *ngIf=\"isSearchable\">\r\n        <mat-icon matSuffix (click)=\"clearSearch()\">{{\r\n          searchCtrl?.value?.length > 0 ? \"close\" : \"search\"\r\n        }}</mat-icon>\r\n        <input\r\n          class=\"custom-select-search\"\r\n          [placeholder]=\"\r\n            searchOptions?.placeholder ? searchOptions?.placeholder :\r\n            'search' | translate\r\n          \"\r\n          [formControl]=\"searchCtrl\"\r\n          (keydown)=\"$event.stopPropagation()\"\r\n        />\r\n      </div>\r\n      <ng-container *ngIf=\"isObservable\">\r\n        <ng-container *ngIf=\"optionsObservable | async as options$\">\r\n          <mat-option\r\n            *ngIf=\"!isMultiple && isDisplayNone\"\r\n            (click)=\"clearControllerValue()\"\r\n            [value]=\"null\"\r\n            class=\"bg-danger\"\r\n            >{{ textNone }}</mat-option\r\n          >\r\n\r\n          <mat-option\r\n            (click)=\"optionChosen(option)\"\r\n            *ngFor=\"let option of options$\"\r\n            [value]=\"option[key]\"\r\n            [matTooltip]=\"isShowTooltip ? option[value] : ''\"\r\n          >\r\n            {{ option[value] }}\r\n          </mat-option>\r\n          <mat-option\r\n            class=\"text-center remove-checked\"\r\n            *ngIf=\"!options$?.length\"\r\n            disabled\r\n          >\r\n            {{\r\n              searchOptions?.noEntriesFound\r\n                ? searchOptions?.noEntriesFound\r\n                : \"No Data\"\r\n            }}\r\n          </mat-option>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!isObservable\">\r\n        <div class=\"header-action\" >\r\n          <mat-option\r\n            *ngIf=\"!isMultiple && isDisplayNone\"\r\n            (click)=\"clearControllerValue()\"\r\n            [value]=\"null\"\r\n            class=\"bg-danger\"\r\n            >{{ textNone }}</mat-option\r\n          >\r\n          <mat-option\r\n            (click)=\"optionChosen(option)\"\r\n            *ngFor=\"let option of list\"\r\n            [value]=\"option[key]\"\r\n            [matTooltip]=\"isShowTooltip ? option[value] : ''\"\r\n            [ngClass]=\"{'ar-redirection' : language === LanguageEnum.Ar}\"\r\n          >\r\n          <span>{{option[value] }}</span>\r\n          </mat-option>\r\n        </div>\r\n\r\n        <mat-option\r\n          class=\"text-center remove-checked\"\r\n          *ngIf=\"!options?.length\"\r\n          disabled\r\n        >\r\n          {{\r\n            searchOptions?.noEntriesFound\r\n              ? searchOptions?.noEntriesFound\r\n              : \"No Data\"\r\n          }}\r\n        </mat-option>\r\n      </ng-container>\r\n      <footer\r\n        class=\"d-flex justify-content-end footer-action\"\r\n        *ngIf=\"isDisplayButton || isLoading\"\r\n      >\r\n        <div class=\"ldc-add\" *ngIf=\"isDisplayButton\">\r\n          <button class=\"ldc-btn\" (click)=\"onButtonClick.emit($event)\">\r\n            <mat-icon>add</mat-icon>\r\n            {{ textButton }}\r\n          </button>\r\n        </div>\r\n        <!--        <div class=\"py-5\" *ngIf=\"isLoading\">-->\r\n        <!--          <lib-muk-loading-spinner></lib-muk-loading-spinner>-->\r\n        <!--        </div>-->\r\n      </footer>\r\n    </mat-select>\r\n  </label>\r\n  <mat-icon matSuffix *ngIf=\"isDisplayClearBtn\" (click)=\"emitClear($event)\"\r\n    >close</mat-icon\r\n  >\r\n</mat-form-field>\r\n<ng-container *ngIf=\"controllerValue?.length && isDisplayChips\">\r\n  <mat-chip-row\r\n    *ngFor=\"let value of controllerValue\"\r\n    (removed)=\"remove(value); onRemoveChip.emit(value)\"\r\n    [editable]=\"false\"\r\n  >\r\n    {{ value?.value }}\r\n    <button matChipRemove [attr.aria-label]=\"'remove ' + value?.value\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </mat-chip-row>\r\n</ng-container>\r\n", styles: [":host{flex-grow:1}label{display:unset!important}.ar-mat-form-content{text-align:right}.ar-redirection{direction:rtl}.custom-input-search{position:relative;padding:10px}.custom-input-search mat-icon{position:absolute;right:15px;top:15px;cursor:pointer}.custom-input-search input{height:10%;width:100%;padding:8px 0 8px 8px;background-clip:padding-box;border:1px solid #e8e8e8!important;appearance:none;border-radius:.375rem}.remove-checked .mat-pseudo-checkbox{display:none}::ng-deep .mdc-evolution-chip__text-label{color:#4f008c!important}::ng-deep .mat-mdc-standard-chip{margin:6px!important;border-radius:3px!important;background-color:#4e008b08!important}::ng-deep .mat-mdc-chip-remove .mat-icon{color:#000;font-weight:600}::ng-deep .hide-placeholder .mat-mdc-select-value-text{display:none}::ng-deep .ar-mat-form-content .mat-mdc-select-value{text-align:right;font-family:Noto Kufi Arabic,sans-serif}::ng-deep .mat-mdc-select-placeholder{font-family:Noto Kufi Arabic,sans-serif}.chips-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:absolute;width:95%;line-height:1.8}.chips-placeholder .mat-mdc-standard-chip{margin:6px!important;border-radius:3px!important;background-color:#4e008b08!important}.chips-placeholder .mat-mdc-chip-remove .mat-icon{color:#000!important;font-weight:600}::ng-deep .stc-bg-white .mdc-text-field--filled:not(.mdc-text-field--disabled){background:white!important;border:2px solid #f3f3f3}::ng-deep .stc-bg-white .mat-mdc-form-field-focus-overlay{background-color:transparent!important}::ng-deep .stc-bg-white .mdc-line-ripple:before,::ng-deep .stc-bg-white .mdc-line-ripple:after{border:none!important}::ng-deep .stc-bg-gray .mdc-text-field--filled:not(.mdc-text-field--disabled){background:#f9f9f9!important;border:1px solid #f9f9f9}::ng-deep .stc-bg-gray .mat-mdc-form-field-focus-overlay{background-color:transparent!important}::ng-deep .stc-bg-gray .mdc-line-ripple:before,::ng-deep .stc-bg-gray .mdc-line-ripple:after{border:none!important}.stc-label{margin:0!important}::ng-deep .mat-mdc-form-field-infix{min-height:14px!important;padding-top:8px!important;padding-bottom:8px!important}::ng-deep .mat-mdc-select-arrow svg{left:0!important}::ng-deep .mdc-list-item__primary-text{width:100%}.footer-action{padding:0 8px!important;max-height:150px;position:sticky;background-color:#fafafa!important;border-top:1px solid #eee;z-index:10;bottom:0}.footer-action:hover{background-color:#fafafa!important;z-index:10;opacity:1}.footer-action .stc-add{width:100%;display:flex;justify-content:flex-end}.footer-action .stc-add .stc-btn{color:#ff375e!important;background-color:transparent;padding:10px 22px!important;font-size:15px;display:flex;align-items:center}::ng-deep div.mat-mdc-select-panel{overflow-y:hidden;padding-bottom:0!important}::ng-deep div.mat-mdc-select-panel .mdc-button__label{display:flex;text-align:center;align-items:center;gap:.25rem}::ng-deep div.mat-mdc-select-panel .mat-mdc-unelevated-button:not(:disabled){color:inherit!important}::ng-deep div.mat-mdc-select-panel .mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple:before{background-color:#80808033!important}::ng-deep div.mat-mdc-select-panel .mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple:after{background-color:#80808033!important}::ng-deep div.mat-mdc-select-panel .mat-mdc-unelevated-button:not(:disabled){background-color:inherit!important}.mat-mdc-option{border-bottom:1px solid rgba(238,238,238,.9333333333)!important;background-color:#fafafa!important}::ng-deep .mat-mdc-select-arrow-wrapper{border:solid #94a3b8;border-width:0 3px 3px 0;height:unset!important;display:inline-block;padding:3px;transform:rotate(45deg)}::ng-deep .mat-mdc-select-arrow{display:none!important}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:max(16px,var(--mdc-outlined-text-field-container-shape))!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "directive", type: LdcSelectScrollBottomDirective, selector: "[libLdcSelectScrollBottom]", outputs: ["appMatSelectScrollBottom"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: IdFormatPipe, name: "IdFormat" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LdcDropDownComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-ldc-drop-down', standalone: true, imports: [
                        ReactiveFormsModule,
                        MatButtonModule,
                        TranslateModule,
                        NgIf,
                        NgClass,
                        NgSwitch,
                        NgSwitchCase,
                        NgSwitchDefault,
                        MatSelectModule,
                        AsyncPipe,
                        MatChipsModule,
                        LdcSelectScrollBottomDirective,
                        MatIconModule,
                        MatInputModule,
                        MatOptionModule,
                        NgForOf,
                        MatTooltipModule,
                        MatInputModule,
                        IdFormatPipe
                    ], template: "<mat-label class=\"stc-label\">{{ label | translate }}\r\n  <small *ngIf=\"isRequired\" class=\"font-14 text-danger\">*</small>\r\n</mat-label>\r\n<mat-form-field\r\n  appearance=\"outline\"\r\n  class=\"w-100 form-field\"\r\n  [ngClass]=\"isWhiteMode ? 'ldc-bg-white' : 'ldc-bg-gray'\"\r\n  [class.hide-placeholder]=\"isMultiple\"\r\n>\r\n  <label class=\"mat-form-content\" [ngClass]=\"{'ar-mat-form-content' : language === LanguageEnum.Ar }\">\r\n    <div class=\"chips-placeholder\" *ngIf=\"isMultiple\">\r\n      {{ getDisplayChips() }}\r\n    </div>\r\n    <mat-select\r\n      libLdcSelectScrollBottom\r\n      (appMatSelectScrollBottom)=\"\r\n        onScroll.emit({\r\n          event: $event,\r\n          controller: controller,\r\n          scrollEnd: true\r\n        })\r\n      \"\r\n      (selectionChange)=\"changeSelection($event)\"\r\n      [formControl]=\"controller\"\r\n      [multiple]=\"isMultiple\"\r\n      [attr.disabled]=\"isDisabled\"\r\n      [placeholder]=\"controllerValue?.length ? '' : placeholder | translate\"\r\n      [id]=\"inputId | IdFormat\"\r\n    >\r\n      <div class=\"custom-input-search\" *ngIf=\"isSearchable\">\r\n        <mat-icon matSuffix (click)=\"clearSearch()\">{{\r\n          searchCtrl?.value?.length > 0 ? \"close\" : \"search\"\r\n        }}</mat-icon>\r\n        <input\r\n          class=\"custom-select-search\"\r\n          [placeholder]=\"\r\n            searchOptions?.placeholder ? searchOptions?.placeholder :\r\n            'search' | translate\r\n          \"\r\n          [formControl]=\"searchCtrl\"\r\n          (keydown)=\"$event.stopPropagation()\"\r\n        />\r\n      </div>\r\n      <ng-container *ngIf=\"isObservable\">\r\n        <ng-container *ngIf=\"optionsObservable | async as options$\">\r\n          <mat-option\r\n            *ngIf=\"!isMultiple && isDisplayNone\"\r\n            (click)=\"clearControllerValue()\"\r\n            [value]=\"null\"\r\n            class=\"bg-danger\"\r\n            >{{ textNone }}</mat-option\r\n          >\r\n\r\n          <mat-option\r\n            (click)=\"optionChosen(option)\"\r\n            *ngFor=\"let option of options$\"\r\n            [value]=\"option[key]\"\r\n            [matTooltip]=\"isShowTooltip ? option[value] : ''\"\r\n          >\r\n            {{ option[value] }}\r\n          </mat-option>\r\n          <mat-option\r\n            class=\"text-center remove-checked\"\r\n            *ngIf=\"!options$?.length\"\r\n            disabled\r\n          >\r\n            {{\r\n              searchOptions?.noEntriesFound\r\n                ? searchOptions?.noEntriesFound\r\n                : \"No Data\"\r\n            }}\r\n          </mat-option>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!isObservable\">\r\n        <div class=\"header-action\" >\r\n          <mat-option\r\n            *ngIf=\"!isMultiple && isDisplayNone\"\r\n            (click)=\"clearControllerValue()\"\r\n            [value]=\"null\"\r\n            class=\"bg-danger\"\r\n            >{{ textNone }}</mat-option\r\n          >\r\n          <mat-option\r\n            (click)=\"optionChosen(option)\"\r\n            *ngFor=\"let option of list\"\r\n            [value]=\"option[key]\"\r\n            [matTooltip]=\"isShowTooltip ? option[value] : ''\"\r\n            [ngClass]=\"{'ar-redirection' : language === LanguageEnum.Ar}\"\r\n          >\r\n          <span>{{option[value] }}</span>\r\n          </mat-option>\r\n        </div>\r\n\r\n        <mat-option\r\n          class=\"text-center remove-checked\"\r\n          *ngIf=\"!options?.length\"\r\n          disabled\r\n        >\r\n          {{\r\n            searchOptions?.noEntriesFound\r\n              ? searchOptions?.noEntriesFound\r\n              : \"No Data\"\r\n          }}\r\n        </mat-option>\r\n      </ng-container>\r\n      <footer\r\n        class=\"d-flex justify-content-end footer-action\"\r\n        *ngIf=\"isDisplayButton || isLoading\"\r\n      >\r\n        <div class=\"ldc-add\" *ngIf=\"isDisplayButton\">\r\n          <button class=\"ldc-btn\" (click)=\"onButtonClick.emit($event)\">\r\n            <mat-icon>add</mat-icon>\r\n            {{ textButton }}\r\n          </button>\r\n        </div>\r\n        <!--        <div class=\"py-5\" *ngIf=\"isLoading\">-->\r\n        <!--          <lib-muk-loading-spinner></lib-muk-loading-spinner>-->\r\n        <!--        </div>-->\r\n      </footer>\r\n    </mat-select>\r\n  </label>\r\n  <mat-icon matSuffix *ngIf=\"isDisplayClearBtn\" (click)=\"emitClear($event)\"\r\n    >close</mat-icon\r\n  >\r\n</mat-form-field>\r\n<ng-container *ngIf=\"controllerValue?.length && isDisplayChips\">\r\n  <mat-chip-row\r\n    *ngFor=\"let value of controllerValue\"\r\n    (removed)=\"remove(value); onRemoveChip.emit(value)\"\r\n    [editable]=\"false\"\r\n  >\r\n    {{ value?.value }}\r\n    <button matChipRemove [attr.aria-label]=\"'remove ' + value?.value\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </mat-chip-row>\r\n</ng-container>\r\n", styles: [":host{flex-grow:1}label{display:unset!important}.ar-mat-form-content{text-align:right}.ar-redirection{direction:rtl}.custom-input-search{position:relative;padding:10px}.custom-input-search mat-icon{position:absolute;right:15px;top:15px;cursor:pointer}.custom-input-search input{height:10%;width:100%;padding:8px 0 8px 8px;background-clip:padding-box;border:1px solid #e8e8e8!important;appearance:none;border-radius:.375rem}.remove-checked .mat-pseudo-checkbox{display:none}::ng-deep .mdc-evolution-chip__text-label{color:#4f008c!important}::ng-deep .mat-mdc-standard-chip{margin:6px!important;border-radius:3px!important;background-color:#4e008b08!important}::ng-deep .mat-mdc-chip-remove .mat-icon{color:#000;font-weight:600}::ng-deep .hide-placeholder .mat-mdc-select-value-text{display:none}::ng-deep .ar-mat-form-content .mat-mdc-select-value{text-align:right;font-family:Noto Kufi Arabic,sans-serif}::ng-deep .mat-mdc-select-placeholder{font-family:Noto Kufi Arabic,sans-serif}.chips-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:absolute;width:95%;line-height:1.8}.chips-placeholder .mat-mdc-standard-chip{margin:6px!important;border-radius:3px!important;background-color:#4e008b08!important}.chips-placeholder .mat-mdc-chip-remove .mat-icon{color:#000!important;font-weight:600}::ng-deep .stc-bg-white .mdc-text-field--filled:not(.mdc-text-field--disabled){background:white!important;border:2px solid #f3f3f3}::ng-deep .stc-bg-white .mat-mdc-form-field-focus-overlay{background-color:transparent!important}::ng-deep .stc-bg-white .mdc-line-ripple:before,::ng-deep .stc-bg-white .mdc-line-ripple:after{border:none!important}::ng-deep .stc-bg-gray .mdc-text-field--filled:not(.mdc-text-field--disabled){background:#f9f9f9!important;border:1px solid #f9f9f9}::ng-deep .stc-bg-gray .mat-mdc-form-field-focus-overlay{background-color:transparent!important}::ng-deep .stc-bg-gray .mdc-line-ripple:before,::ng-deep .stc-bg-gray .mdc-line-ripple:after{border:none!important}.stc-label{margin:0!important}::ng-deep .mat-mdc-form-field-infix{min-height:14px!important;padding-top:8px!important;padding-bottom:8px!important}::ng-deep .mat-mdc-select-arrow svg{left:0!important}::ng-deep .mdc-list-item__primary-text{width:100%}.footer-action{padding:0 8px!important;max-height:150px;position:sticky;background-color:#fafafa!important;border-top:1px solid #eee;z-index:10;bottom:0}.footer-action:hover{background-color:#fafafa!important;z-index:10;opacity:1}.footer-action .stc-add{width:100%;display:flex;justify-content:flex-end}.footer-action .stc-add .stc-btn{color:#ff375e!important;background-color:transparent;padding:10px 22px!important;font-size:15px;display:flex;align-items:center}::ng-deep div.mat-mdc-select-panel{overflow-y:hidden;padding-bottom:0!important}::ng-deep div.mat-mdc-select-panel .mdc-button__label{display:flex;text-align:center;align-items:center;gap:.25rem}::ng-deep div.mat-mdc-select-panel .mat-mdc-unelevated-button:not(:disabled){color:inherit!important}::ng-deep div.mat-mdc-select-panel .mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple:before{background-color:#80808033!important}::ng-deep div.mat-mdc-select-panel .mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple:after{background-color:#80808033!important}::ng-deep div.mat-mdc-select-panel .mat-mdc-unelevated-button:not(:disabled){background-color:inherit!important}.mat-mdc-option{border-bottom:1px solid rgba(238,238,238,.9333333333)!important;background-color:#fafafa!important}::ng-deep .mat-mdc-select-arrow-wrapper{border:solid #94a3b8;border-width:0 3px 3px 0;height:unset!important;display:inline-block;padding:3px;transform:rotate(45deg)}::ng-deep .mat-mdc-select-arrow{display:none!important}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:max(16px,var(--mdc-outlined-text-field-container-shape))!important}\n"] }]
        }], ctorParameters: function () { return [{ type: i1$1.LanguageService }]; }, propDecorators: { controller: [{
                type: Input
            }], label: [{
                type: Input
            }], value: [{
                type: Input,
                args: [{ required: true }]
            }], key: [{
                type: Input,
                args: [{ required: true }]
            }], options: [{
                type: Input
            }], optionsObservable: [{
                type: Input
            }], isObservable: [{
                type: Input
            }], isRequired: [{
                type: Input
            }], isDependent: [{
                type: Input
            }], isMultiple: [{
                type: Input
            }], isSearchable: [{
                type: Input
            }], isDisplayClearBtn: [{
                type: Input
            }], isDisabled: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], searchOptions: [{
                type: Input
            }], controllerValue: [{
                type: Input
            }], isDisplayChips: [{
                type: Input
            }], isShowTooltip: [{
                type: Input
            }], isWhiteMode: [{
                type: Input
            }], isDisplayButton: [{
                type: Input
            }], isDisplayNone: [{
                type: Input
            }], isLoading: [{
                type: Input
            }], searchValue: [{
                type: Input
            }], textButton: [{
                type: Input
            }], textNone: [{
                type: Input
            }], inputId: [{
                type: Input
            }], onChange: [{
                type: Output
            }], onScroll: [{
                type: Output
            }], onSearch: [{
                type: Output
            }], onClear: [{
                type: Output
            }], onRemoveChip: [{
                type: Output
            }], onControlValueChange: [{
                type: Output
            }], onButtonClick: [{
                type: Output
            }] } });

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

export { LdcDropDownComponent, LdcSelectScrollBottomDirective };
//# sourceMappingURL=testlocallibrary-shared-kernel-components-ldc-form-ldc-fields-ldc-drop-down.mjs.map
