{"__symbolic":"module","version":4,"metadata":{"NgnMultiSelectComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ngn-multi-select","template":"\n    <div class=\"select\">\n      <div class=\"select__container\">\n        <div\n          class=\"select__selected-items\"\n          *ngIf=\"selectedItems.length\"\n          (click)=\"deletelists()\"\n        >\n          <span class=\"selected-length\">\n            {{\n              selectedItems.length <= 1 ? firstItemSelect : selectedItems.length\n            }}\n            {{ selectedItems.length > 1 ? \"selected\" : \"\" }}\n          </span>\n          <span class=\"delete-icon\">&#10006;</span>\n        </div>\n\n        <input\n          type=\"text\"\n          name=\"select\"\n          class=\"select__input\"\n          [(ngModel)]=\"inputValue\"\n          [autocomplete]=\"autocomplete\"\n          [placeholder]=\"inputValuePlaceholder\"\n          (click)=\"selectItem()\"\n        />\n      </div>\n\n      <ul class=\"select__list scrollbar\" *ngIf=\"isShown\">\n        <li\n          *ngFor=\"let list of lists | filter: inputValue\"\n          (click)=\"listsuggestion(list)\"\n          [class.selected]=\"isSelected(list)\"\n        >\n          {{ list.name }}\n        </li>\n      </ul>\n    </div>\n  ","styles":[".select{text-transform:capitalize;position:relative}.select__container{display:flex;border:1px solid #e6ebf3;border-radius:.25rem}.select__selected-items{font-weight:700;position:relative}.select__selected-items span{cursor:pointer;position:absolute;color:red;top:.7rem;right:.3rem}.select__selected-items span.selected-length{position:static;display:inline-block;width:120px;line-height:2.5rem;text-align:center;padding-right:1rem;padding-left:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#000}.select__input{width:100%;height:2.5rem;background-color:#f7f9fc;padding-right:1.5rem;padding-left:.5rem;border:none;border-radius:.25rem}.select__input::-webkit-input-placeholder{color:#8f9bb3;text-transform:capitalize}.select__input::-moz-placeholder{color:#8f9bb3;text-transform:capitalize}.select__input::-ms-input-placeholder{color:#8f9bb3;text-transform:capitalize}.select__input::placeholder{color:#8f9bb3;text-transform:capitalize}.select__input:focus{box-shadow:none!important;outline:0;border-color:#e6ebf3!important}.select__list{width:100%;max-height:250px;margin-top:.5rem;border:1px solid #f7f9fc;border-radius:.25rem;box-shadow:0 1rem 1rem rgba(0,0,0,.08);overflow-y:scroll;background-color:#fff;position:absolute;bottom:initial;left:0;z-index:9;list-style:none;padding-left:0}.select__list li{padding:.5rem;cursor:pointer}.select__list li:hover{background-color:#e6e6e6}.select__list li.selected{background-color:#4b267f;color:#fff}"]}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"inputValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"inputValuePlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3}}]}],"lists":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"selectedItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"autocomplete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":3}}]}],"isShown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":53,"character":3}}]}],"selectItem":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"listsuggestion":[{"__symbolic":"method"}],"deletelists":[{"__symbolic":"method"}]}},"NgnMultiSelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NgnMultiSelectComponent"},{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule","line":8,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":8,"character":27}],"exports":[{"__symbolic":"reference","name":"NgnMultiSelectComponent"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"filter","pure":false}]}],"members":{"transform":[{"__symbolic":"method"}]}}},"origins":{"NgnMultiSelectComponent":"./lib/ngn-multi-select.component","NgnMultiSelectModule":"./lib/ngn-multi-select.module","ɵa":"./lib/ngn-filter.pipe"},"importAs":"ngn-multi-select"}