{"__symbolic":"module","version":4,"metadata":{"DropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":14},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":6,"character":28}],"declarations":[{"__symbolic":"reference","name":"DropdownComponent"}],"exports":[{"__symbolic":"reference","name":"DropdownComponent"}]}]}],"members":{}},"DropdownPlaceholders":{"__symbolic":"interface"},"DropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":35,"character":1},"arguments":[{"selector":"sebng-dropdown","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":18,"character":13},"useExisting":{"__symbolic":"reference","name":"DropdownComponent"},"multi":true}],"template":"<ng-container *ngIf=\"native; else notNative\">\n    <label *ngIf=\"label\" class=\"dropdown-label\" [class.disabled]=\"disabled\">{{ label }}</label>\n    <select\n        [name]=\"name\"\n        [id]=\"id || toggleButtonId\"\n        class=\"form-control custom-select{{ className }}\"\n        [class.disabled]=\"disabled\"\n        [disabled]=\"disabled\"\n        [multiple]=\"multi\"\n        (change)=\"handleNativeOnChange($event)\"\n    >\n        <option disabled hidden value=\"\">{{ placeholder || \"Select ...\" }}</option>\n        <ng-container *ngFor=\"let item of displayList; index as i\">\n            <option\n                *ngIf=\"!multi || (multi && i !== 0)\"\n                [value]=\"item.optionItem.value\"\n                [selected]=\"item.selected\"\n                [disabled]=\"item.optionItem.disabled\"\n            >\n                {{ item.optionItem.label }}\n            </option>\n        </ng-container>\n    </select>\n    <div *ngIf=\"error\" className=\"alert alert-danger\">{{ error }}</div>\n</ng-container>\n\n<ng-template #notNative>\n    <div *ngIf=\"list\" class=\"dropdown custom-dropdown {{ className }}\" [class.disabled]=\"disabled\">\n        <label *ngIf=\"label\" class=\"dropdown-label\">{{ label }}</label>\n\n        <button\n            #dropdownToggleRef\n            type=\"button\"\n            [id]=\"id || toggleButtonId\"\n            class=\"btn btn-secondary dropdown-toggle custom-dropdown-toggle\"\n            [class.disabled]=\"disabled\"\n            [class.open]=\"open\"\n            [ngClass]=\"{ 'more mx-right': ellipsisMode }\"\n            (keydown)=\"handleKeyDownToggle($event)\"\n            (click)=\"handleClickToggle()\"\n            [attr.aria-label]=\"'Dropdown toggle: ' + getTitleLabel()\"\n            [attr.aria-haspopup]=\"true\"\n            [attr.aria-expanded]=\"open\"\n            [tabIndex]=\"disabled ? -1 : 0\"\n        >\n            <ng-container *ngIf=\"ellipsisMode; else notEllipsisMode\">\n                <div class=\"right-items\">\n                    <div class=\"dropdown-icon-holder\">\n                        <svg class=\"dropdown-more-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n                            <path\n                                d=\"M192 256c0 17.7-14.3 32-32 32s-32-14.3-32-32 14.3-32 32-32 32 14.3 32 32zm88-32c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm-240 0c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32z\"\n                            />\n                        </svg>\n                    </div>\n                </div>\n            </ng-container>\n\n            <ng-template #notEllipsisMode>\n                <div class=\"title text-truncate\" [attr.title]=\"getTitleLabel()\">\n                    {{ getTitleLabel() }}\n                </div>\n\n                <div class=\"right-items\">\n                    <div *ngIf=\"clearable && selectedList.length > 0\" class=\"dropdown-icon-holder\" (click)=\"handleClickClear($event)\">\n                        <svg class=\"dropdown-times-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\">\n                            <path\n                                d=\"M217.5 256l137.2-137.2c4.7-4.7 4.7-12.3 0-17l-8.5-8.5c-4.7-4.7-12.3-4.7-17 0L192 230.5 54.8 93.4c-4.7-4.7-12.3-4.7-17 0l-8.5 8.5c-4.7 4.7-4.7 12.3 0 17L166.5 256 29.4 393.2c-4.7 4.7-4.7 12.3 0 17l8.5 8.5c4.7 4.7 12.3 4.7 17 0L192 281.5l137.2 137.2c4.7 4.7 12.3 4.7 17 0l8.5-8.5c4.7-4.7 4.7-12.3 0-17L217.5 256z\"\n                            />\n                        </svg>\n                    </div>\n                    <div class=\"dropdown-icon-holder chevron\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\n                            <path\n                                d=\"M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z\"\n                            />\n                        </svg>\n                    </div>\n                </div>\n            </ng-template>\n        </button>\n\n        <div\n            #dropdownMenuRef\n            class=\"dropdown-menu custom-dropdown-menu\"\n            [class.show]=\"open\"\n            [class.dropdown-menu-right]=\"ellipsisMode\"\n            tabIndex=\"0\"\n            (keydown)=\"handleKeyDownMenu($event)\"\n            [attr.aria-labelledby]=\"id || toggleButtonId\"\n        >\n            <ng-container *ngIf=\"list.length > 0 && searchable\">\n                <input\n                    #searchRef\n                    name=\"search-input\"\n                    type=\"search\"\n                    class=\"search-input\"\n                    [placeholder]=\"placeholders?.searchText || 'Search ...'\"\n                    [value]=\"searchText\"\n                    (keyup)=\"handleOnChangeSearch($event)\"\n                />\n                <div class=\"dropdown-divider blue\"></div>\n            </ng-container>\n\n            <ng-container *ngIf=\"displayList.length > 0; else emptyList\">\n                <ng-container *ngFor=\"let item of displayList; index as i\">\n                    <button\n                        #listRefs\n                        type=\"button\"\n                        class=\"{{ item.className }}\"\n                        [class.highlighted]=\"currentFocused === i\"\n                        [class.disabled]=\"item.optionItem.disabled\"\n                        [disabled]=\"item.optionItem.disabled\"\n                        (mousemove)=\"handleItemOnMouseMove(i)\"\n                        (click)=\"handleItemOnClick($event, i, item)\"\n                    >\n                        <ng-container *ngIf=\"multi; else notMulti\">\n                            <div tabIndex=\"-1\" [class.disabled]=\"item.optionItem.disabled\" class=\"custom-control\">\n                                <input\n                                    tabIndex=\"-1\"\n                                    type=\"checkbox\"\n                                    class=\"custom-control-input\"\n                                    [id]=\"item.id\"\n                                    [name]=\"item.id\"\n                                    [defaultChecked]=\"item.selected\"\n                                    [disabled]=\"item.optionItem.disabled\"\n                                />\n                                <label *ngIf=\"item.optionItem.label\" tabIndex=\"-1\" class=\"custom-control-label\" [attr.for]=\"item.id\">{{\n                                    item.optionItem.label\n                                }}</label>\n                            </div>\n                        </ng-container>\n                        <ng-template #notMulti>\n                            <label *ngIf=\"item.optionItem.label\" tabIndex=\"-1\" class=\"label\">{{ item.optionItem.label }}</label>\n                        </ng-template>\n                    </button>\n\n                    <div *ngIf=\"multi && searchText.length === 0 && i === 0\" class=\"dropdown-divider\"></div>\n                </ng-container>\n            </ng-container>\n\n            <ng-template #emptyList>\n                <a class=\"dropdown-item custom-dropdown-item disabled\">\n                    <div class=\"label\">{{ placeholders?.noResultText || \"No results\" }}</div>\n                </a>\n            </ng-template>\n        </div>\n    </div>\n\n    <div *ngIf=\"error\" class=\"alert alert-danger\">{{ error }}</div>\n</ng-template>\n","styles":[".custom-dropdown>.dropdown-toggle.custom-dropdown-toggle{background-color:#fff;height:44px;min-width:100%;border-color:#adadad;display:flex;align-items:center;justify-content:space-between;padding:0 0 0 16px}.custom-dropdown>.dropdown-toggle.custom-dropdown-toggle:after{content:none}.custom-dropdown>.dropdown-toggle.custom-dropdown-toggle>.title{font-weight:normal;color:#444}.custom-dropdown>.dropdown-toggle.custom-dropdown-toggle>.right-items{display:flex}.custom-dropdown>.dropdown-toggle.custom-dropdown-toggle>.right-items>.dropdown-icon-holder{display:flex;align-items:center;justify-content:center;height:44px;width:44px}.custom-dropdown>.dropdown-toggle.custom-dropdown-toggle>.right-items>.dropdown-icon-holder>svg{will-change:transform;transition:.3s;width:18px;height:18px;fill:#0092e1}.custom-dropdown>.dropdown-toggle.custom-dropdown-toggle.open>.right-items>.dropdown-icon-holder.chevron>svg{transform:rotateX(180deg)}.custom-dropdown>.dropdown-toggle.custom-dropdown-toggle:hover{border-color:#41b0ee;background-color:#fff}.custom-dropdown>.dropdown-toggle.custom-dropdown-toggle:focus{border-color:#007ac7;box-shadow:none;background-color:#fff}.custom-dropdown>.dropdown-toggle.custom-dropdown-toggle:focus:active{color:#444;border-color:#007ac7;box-shadow:none;background-color:#fff}.custom-dropdown>.dropdown-toggle.custom-dropdown-toggle.more{background-color:inherit;height:44px;min-width:44px;max-width:44px;padding:0;border-color:transparent;margin:0 0 0 auto}.custom-dropdown>.dropdown-toggle.custom-dropdown-toggle.more>.right-items>.dropdown-icon-holder>svg{height:calc(44px / 1.2);width:calc(44px / 1.2)}.custom-dropdown>.dropdown-toggle.custom-dropdown-toggle.more>.right-items>.dropdown-icon-holder>svg:focus:active{fill:#fff}.custom-dropdown>.dropdown-toggle.custom-dropdown-toggle.more:hover{background-color:#41b0ee}.custom-dropdown>.dropdown-toggle.custom-dropdown-toggle.more:hover>.right-items>.dropdown-icon-holder>svg{fill:#fff}.custom-dropdown>.dropdown-toggle.custom-dropdown-toggle.more:focus{border-color:#007ac7}.custom-dropdown>.dropdown-toggle.custom-dropdown-toggle.more:focus:active{background-color:#007ac7}.custom-dropdown>.dropdown-toggle.custom-dropdown-toggle.more.open{background-color:#007ac7}.custom-dropdown>.dropdown-toggle.custom-dropdown-toggle.more.open>.right-items>.dropdown-icon-holder>svg{fill:#fff}.custom-dropdown>.custom-dropdown-menu{min-width:100%;border-radius:4px;border:1px solid #007ac7;padding:0;margin:4px 0 14px;outline:none;overflow:auto}.custom-dropdown>.custom-dropdown-menu>.dropdown-divider{margin:0}.custom-dropdown>.custom-dropdown-menu>.dropdown-divider.blue{border-color:#007ac7}.custom-dropdown>.custom-dropdown-menu>.search-input{height:44px;padding:0 0 0 16px;border:none;outline:none}.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item{display:flex;padding-left:16px;background:white;color:#444}.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item>label:not(.form-check-label),.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item>label:not(.custom-checkbox),.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item>label:not(.custom-radio),.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item>label:not(.custom-control-label){cursor:pointer;color:#444;font-weight:normal;margin-bottom:0;line-height:normal;line-height:initial}.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item:focus{outline:none;background:transparent none repeat 0 0 / auto auto padding-box border-box scroll;background:initial;color:#000;color:initial;border:medium none currentColor;border:initial}.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item:hover{background:transparent none repeat 0 0 / auto auto padding-box border-box scroll;background:initial;color:#000;color:initial;border:medium none currentColor;border:initial}.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item .custom-control .custom-control-label,.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item .custom-control .custom-control-input{cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none}.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item .custom-control .custom-control-label:before,.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item .custom-control .custom-control-input:before{border-color:#444;background-color:#fff}.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item .custom-control .custom-control-label:after,.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item .custom-control .custom-control-input:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e\")}.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item.highlighted{background-color:#41b0ee;color:#fff}.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item.highlighted>label{color:#fff}.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item.highlighted .custom-control .custom-control-label{color:#fff}.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item.highlighted.selected{background-color:#007ac7;color:#fff}.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item.highlighted.selected>label.label{color:#fff}.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item.highlighted.selected .custom-control .custom-control-label:before,.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item.highlighted.selected .custom-control .custom-control-input:before{color:#fff;border-color:#fff}.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item.selected{background-color:#fff;color:#007ac7}.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item.selected>label{color:#007ac7}.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item.selected .custom-control .custom-control-label:before,.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item.selected .custom-control .custom-control-input:before{color:#fff;border-color:#007ac7;background-color:#007ac7}.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item.disabled:disabled>label{color:#adadad}.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item.disabled:disabled .custom-control .custom-control-label:before,.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item.disabled:disabled .custom-control .custom-control-input:before{color:#adadad;border-color:#adadad}.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item.disabled:disabled.selected>.custom-control .custom-control-label:before,.custom-dropdown>.custom-dropdown-menu>.custom-dropdown-item.disabled:disabled.selected>.custom-control .custom-control-input:before{background-color:#adadad}.custom-dropdown.disabled{pointer-events:none}.custom-dropdown.disabled>.dropdown-label{color:#adadad}.custom-dropdown.disabled>.custom-dropdown-toggle{border-color:#adadad;background-color:#f8f8f8;cursor:default}.custom-dropdown.disabled>.custom-dropdown-toggle>.title{color:#adadad}.custom-dropdown.disabled>.custom-dropdown-toggle>.right-items>.dropdown-icon-holder>svg{fill:#adadad}.custom-dropdown.disabled>.custom-dropdown-toggle.more{border-color:transparent}.custom-dropdown.disabled>.custom-dropdown-toggle.more:hover{background-color:#f8f8f8}.custom-dropdown.disabled>.custom-dropdown-toggle.more:hover>.right-items>.dropdown-icon-holder>svg{fill:#adadad}.form-control.disabled{border-color:#adadad;color:#adadad;background-color:#fff}.dropdown-label.disabled{color:#adadad}.alert{padding:0 2px;margin:0}.alert.alert-danger{color:#d81a1a;background:none;border:none;border-radius:0;width:100%}input[type=search]::-ms-clear{display:none;width:0;height:0}input[type=search]::-ms-reveal{display:none;width:0;height:0}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}\n"]}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"list":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"error":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":5}}]}],"className":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5}}]}],"native":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":5}}]}],"multi":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":5}}]}],"clearable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":5}}]}],"searchable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":5}}]}],"placeholders":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":5}}]}],"nativeOnChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"ellipsisMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":5}}]}],"block":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":5}}]}],"styles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":75,"character":5},"arguments":["style"]}]}],"dropdownToggleRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":169,"character":5},"arguments":["dropdownToggleRef",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":169,"character":44}}]}]}],"dropdownMenuRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":170,"character":5},"arguments":["dropdownMenuRef",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":170,"character":42}}]}]}],"searchRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":171,"character":5},"arguments":["searchRef",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":171,"character":36}}]}]}],"listRefs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":173,"character":5},"arguments":["listRefs"]}]}],"getRandomId":[{"__symbolic":"method"}],"handleFocus":[{"__symbolic":"method"}],"focusCurrentItem":[{"__symbolic":"method"}],"setInitialFocus":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":209,"character":33}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_generateHelperArrays":[{"__symbolic":"method"}],"handleKeyDownToggle":[{"__symbolic":"method"}],"handleKeyDownMenu":[{"__symbolic":"method"}],"handleClickClear":[{"__symbolic":"method"}],"handleNativeOnChange":[{"__symbolic":"method"}],"handleOnChange":[{"__symbolic":"method"}],"handleClear":[{"__symbolic":"method"}],"handleOnChangeSearch":[{"__symbolic":"method"}],"optionItemSelected":[{"__symbolic":"method"}],"handleClickToggle":[{"__symbolic":"method"}],"handleSelectAll":[{"__symbolic":"method"}],"getTitleLabel":[{"__symbolic":"method"}],"handleItemOnMouseMove":[{"__symbolic":"method"}],"handleItemOnClick":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}]},"statics":{"selectedDisplayLength":2}},"DropdownItem":{"__symbolic":"interface"}},"origins":{"DropdownModule":"./dropdown.module","DropdownPlaceholders":"./dropdown.component","DropdownComponent":"./dropdown.component","DropdownItem":"./dropdown.component"},"importAs":"@sebgroup/ng-components/lib/dropdown"}