[{"__symbolic":"module","version":4,"metadata":{"template":"\n<div class=\"sdc-dropdown\" #dropDownWrapper\n    [ngClass]=\"{\n    'headless': type === cIDropDownTypes.Headless,\n    'sdc-dropdown__error': !valid,\n    'open-bottom': show && bottomVisible,\n    'open-top':show && !bottomVisible}\">\n    <label *ngIf=\"label\" class=\"sdc-dropdown__label\" [ngClass]=\"{'required':required}\">{{label}}</label>\n    <div class=\"sdc-dropdown__component-container\">\n\n        <!--[DROP-DOWN AUTO HEADER START]-->\n        <div *ngIf=\"type===cIDropDownTypes.Auto\" class=\"sdc-dropdown-auto__wrapper\">\n            <input class=\"sdc-dropdown__header js-sdc-dropdown--toggle-hook\"\n                    [(ngModel)]=\"this.filterValue\"\n                    (ngModelChange)=\"filterOptions(this.filterValue)\"\n                    placeholder=\"{{this.selectedOption?.label || this.selectedOption?.value || placeHolder}}\">\n                <svg-icon name=\"caret1-down-o\" mode=\"secondary\" size=\"small\" (click)=\"toggleDropdown($event)\"></svg-icon>\n        </div>\n        <!--[DROP-DOWN AUTO HEADER END]-->\n\n        <!--[DROP-DOWN REGULAR HEADER START]-->\n        <button *ngIf=\"type===cIDropDownTypes.Regular\"\n                class=\"sdc-dropdown__header js-sdc-dropdown--toggle-hook\"\n                (click)=\"toggleDropdown($event)\"\n                [ngClass]=\"{'disabled': disabled, 'placeholder':!this.selectedOption}\">\n                {{ this.selectedOption?.label || this.selectedOption?.value || placeHolder}}\n            <svg-icon name=\"caret1-down-o\" mode=\"secondary\" size=\"small\"></svg-icon>\n        </button>\n        <!--[DROP-DOWN HEADER END]-->\n\n        <!--[DROP-DOWN OPTIONS START]-->\n        <div class=\"sdc-dropdown__options-wrapper--frame\" [ngClass]=\"{\n        'sdc-dropdown__options-wrapper--top':!bottomVisible,\n        'sdc-dropdown__options-wrapper--uncollapsed':show\n        }\">\n            <ul #optionsContainerElement *ngIf=\"options\" class=\"sdc-dropdown__options-list\" [ngClass]=\"{\n            'sdc-dropdown__options-list--headless': headless,\n            'sdc-dropdown__options-list--animation-init':animation_init\n            }\">\n                <ng-container *ngFor=\"let option of options; let i = index\">\n                    <!--[Drop down item list or string list start]-->\n                    <li *ngIf=\"option\" class=\"sdc-dropdown__option\"\n                        [ngClass]=\"{\n                            'selected': option == selectedOption,\n                            'sdc-dropdown__option--group':isGroupDesign,\n                            'sdc-dropdown__option--header': option.type && option.type === cIDropDownOptionType.Header,\n                            'sdc-dropdown__option--disabled': option.type && option.type === cIDropDownOptionType.Disable,\n                            'sdc-dropdown__option--hr': option.type && option.type === cIDropDownOptionType.HorizontalLine\n                        }\"\n                        (click)=\"selectOption(option.value, $event)\">{{option.label || String(option.value)}}</li>\n                    <!--[Drop down item list or string list end]-->\n                </ng-container>\n            </ul>\n        </div>\n        <!--[DROP-DOWN OPTIONS END]-->\n\n    </div>\n</div>\n"}}]