{"_id":"@amro93/ngb-select","_rev":"5-157cc263ec7c0dd252911bd0a375e764","name":"@amro93/ngb-select","dist-tags":{"latest":"0.1.7"},"versions":{"0.1.1":{"name":"@amro93/ngb-select","version":"0.1.1","keywords":["angular","angular-select","bootstrap","bootstrap-5","select","dropdown","combobox","standalone","ngb-select"],"author":{"name":"amro93"},"license":"MIT","_id":"@amro93/ngb-select@0.1.1","maintainers":[{"name":"amro93","email":"amro.samy93@gmail.com"}],"homepage":"https://github.com/amro93/ngb-select#readme","bugs":{"url":"https://github.com/amro93/ngb-select/issues"},"dist":{"shasum":"dc2e78007916936083c5d0e2eea1bc3b5a5462ea","tarball":"https://registry.npmjs.org/@amro93/ngb-select/-/ngb-select-0.1.1.tgz","fileCount":5,"integrity":"sha512-lNg+CZQbOtHHDd6ctbE1RfH8vwBaXMogUiABNa8xLZBFUo64pSWxofH9cu9naILm55nnyD2o8288ZNJGVoxrSA==","signatures":[{"sig":"MEQCIFFkFNSyW3eFLD8SZUIZNLJn3RHMxZxKNSvzg6QdhhaOAiBeKGRzK74af0jiK0A72g9sm7LpZH+HwdOl16KRKNV57Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":217151},"type":"module","module":"fesm2022/amro93-ngb-select.mjs","exports":{".":{"types":"./types/amro93-ngb-select.d.ts","default":"./fesm2022/amro93-ngb-select.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"6323692864aba962a15a4ad8169d7b0cfd7f8620","typings":"types/amro93-ngb-select.d.ts","_npmUser":{"name":"amro93","email":"amro.samy93@gmail.com"},"repository":{"url":"git+https://github.com/amro93/ngb-select.git","type":"git"},"_npmVersion":"11.9.0","description":"Lightweight, accessible, standalone Angular Select dropdown component built with pure Bootstrap 5","directories":{},"sideEffects":false,"_nodeVersion":"24.14.0","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"bootstrap":">=5.0.0","@angular/core":">=18.0.0","@angular/forms":">=18.0.0","@angular/common":">=18.0.0"},"peerDependenciesMeta":{"bootstrap":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/ngb-select_0.1.1_1788176247532_0.18309602648118717","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@amro93/ngb-select","version":"0.1.3","keywords":["angular","angular-select","bootstrap","bootstrap-5","select","dropdown","combobox","standalone","ngb-select"],"author":{"name":"amro93"},"license":"MIT","_id":"@amro93/ngb-select@0.1.3","maintainers":[{"name":"amro93","email":"amro.samy93@gmail.com"}],"homepage":"https://github.com/amro93/ngb-select#readme","bugs":{"url":"https://github.com/amro93/ngb-select/issues"},"dist":{"shasum":"86a9cd77234c5812cb6ffcd2c574b56ff7bbceca","tarball":"https://registry.npmjs.org/@amro93/ngb-select/-/ngb-select-0.1.3.tgz","fileCount":5,"integrity":"sha512-/oEteHPMPbpxxa8ueK83QRYKfZasc+00W0krvwNj5aLkvN1edWX2jr3P1UUOI615sldATgLyqaL1evg7Mkrzeg==","signatures":[{"sig":"MEYCIQC9tKXi21aFBfrCu9VSR/+DckgHogwiuLNW3rbtIqGHwQIhAPixxUJocqYHyN1DDW6TeHEHozFQ+kS2jewH4l52zSVj","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":217151},"type":"module","module":"fesm2022/amro93-ngb-select.mjs","exports":{".":{"types":"./types/amro93-ngb-select.d.ts","default":"./fesm2022/amro93-ngb-select.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"6323692864aba962a15a4ad8169d7b0cfd7f8620","typings":"types/amro93-ngb-select.d.ts","_npmUser":{"name":"amro93","email":"amro.samy93@gmail.com"},"repository":{"url":"git+https://github.com/amro93/ngb-select.git","type":"git"},"_npmVersion":"11.9.0","description":"Lightweight, accessible, standalone Angular Select dropdown component built with pure Bootstrap 5","directories":{},"sideEffects":false,"_nodeVersion":"24.14.0","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"bootstrap":">=5.0.0","@angular/core":">=18.0.0","@angular/forms":">=18.0.0","@angular/common":">=18.0.0"},"peerDependenciesMeta":{"bootstrap":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/ngb-select_0.1.3_1788176345931_0.5704422853175575","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@amro93/ngb-select","version":"0.1.4","keywords":["angular","angular-select","bootstrap","bootstrap-5","select","dropdown","combobox","standalone","ngb-select"],"author":{"name":"amro93"},"license":"MIT","_id":"@amro93/ngb-select@0.1.4","maintainers":[{"name":"amro93","email":"amro.samy93@gmail.com"}],"homepage":"https://github.com/amro93/ngb-select#readme","bugs":{"url":"https://github.com/amro93/ngb-select/issues"},"dist":{"shasum":"9d26826b8e7d1c81fb6339566f7f672cafdc9ac9","tarball":"https://registry.npmjs.org/@amro93/ngb-select/-/ngb-select-0.1.4.tgz","fileCount":5,"integrity":"sha512-Mh7jJcmdLwaoewLWLgNTC2dcNbn6RD54UlPdURAiBtG9iYOdxiXylucYNluNmVCVl3XIk66lU41FasMLMgjbpQ==","signatures":[{"sig":"MEUCICsuZH1Ec0X3lCYTWI/hSjwybMYu/QRVgRt62YJkbh+LAiEAoUpJa/C6bqIiCJz+fnTl2h0YUpVDEu1K7o+puPQsQ3o=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@amro93%2fngb-select@0.1.4","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":220566},"type":"module","module":"fesm2022/amro93-ngb-select.mjs","exports":{".":{"types":"./types/amro93-ngb-select.d.ts","default":"./fesm2022/amro93-ngb-select.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"f4e4a5fc7864eff81e0f780d419d2a5e28e846b5","typings":"types/amro93-ngb-select.d.ts","_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:a3f13011-7bc8-427b-bb12-4fa984810e06"}},"repository":{"url":"git+https://github.com/amro93/ngb-select.git","type":"git"},"_npmVersion":"12.0.2","description":"Lightweight, accessible, standalone Angular Select dropdown component built with pure Bootstrap 5","directories":{},"sideEffects":false,"_nodeVersion":"22.23.2","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"bootstrap":">=5.0.0","@angular/core":">=18.0.0","@angular/forms":">=18.0.0","@angular/common":">=18.0.0"},"peerDependenciesMeta":{"bootstrap":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/ngb-select_0.1.4_1788178621970_0.519279167932716","host":"s3://npm-registry-packages-npm-production"}},"0.1.6":{"name":"@amro93/ngb-select","version":"0.1.6","keywords":["angular","angular-select","bootstrap","bootstrap-5","select","dropdown","combobox","standalone","ngb-select"],"author":{"name":"amro93"},"license":"MIT","_id":"@amro93/ngb-select@0.1.6","maintainers":[{"name":"amro93","email":"amro.samy93@gmail.com"}],"homepage":"https://github.com/amro93/ngb-select#readme","bugs":{"url":"https://github.com/amro93/ngb-select/issues"},"dist":{"shasum":"89cca9ae18d69b69a8266317e27e18e3baad476e","tarball":"https://registry.npmjs.org/@amro93/ngb-select/-/ngb-select-0.1.6.tgz","fileCount":5,"integrity":"sha512-PQ1tTRjSM6vHG3HMTEM60MK/BInqr2NeZ43SVwqY3teN77KEVav5jLYCg1/h2Bx/LchdNa1O9xQcF6noAjq23A==","signatures":[{"sig":"MEUCIDA+LjLCm8LTCJyzrmV3kHGPPV+bs0QbYNfTzR9ajD8vAiEAwmqdiNIOoK/K3PIXxYN5Jatt8PaSA/t+eaoB5zshKIA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@amro93%2fngb-select@0.1.6","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":236402},"type":"module","module":"fesm2022/amro93-ngb-select.mjs","exports":{".":{"types":"./types/amro93-ngb-select.d.ts","default":"./fesm2022/amro93-ngb-select.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"abbf2e49c1ddff0da5aebfe1905e4b001c0b3605","typings":"types/amro93-ngb-select.d.ts","_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:a3f13011-7bc8-427b-bb12-4fa984810e06"}},"repository":{"url":"git+https://github.com/amro93/ngb-select.git","type":"git"},"_npmVersion":"12.0.2","description":"Lightweight, accessible, standalone Angular Select dropdown component built with pure Bootstrap 5","directories":{},"sideEffects":false,"_nodeVersion":"22.23.2","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"bootstrap":">=5.0.0","@angular/core":">=18.0.0","@angular/forms":">=18.0.0","@angular/common":">=18.0.0"},"peerDependenciesMeta":{"bootstrap":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/ngb-select_0.1.6_1788242348741_0.3883810884683385","host":"s3://npm-registry-packages-npm-production"}},"0.1.7":{"name":"@amro93/ngb-select","version":"0.1.7","description":"Lightweight, accessible, standalone Angular Select dropdown component built with pure Bootstrap 5","keywords":["angular","angular-select","bootstrap","bootstrap-5","select","dropdown","combobox","standalone","ngb-select"],"author":{"name":"amro93"},"repository":{"type":"git","url":"git+https://github.com/amro93/ngb-select.git"},"bugs":{"url":"https://github.com/amro93/ngb-select/issues"},"homepage":"https://github.com/amro93/ngb-select#readme","license":"MIT","publishConfig":{"access":"public"},"peerDependencies":{"@angular/common":">=18.0.0","@angular/core":">=18.0.0","@angular/forms":">=18.0.0","bootstrap":">=5.0.0"},"peerDependenciesMeta":{"bootstrap":{"optional":true}},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"module":"fesm2022/amro93-ngb-select.mjs","typings":"types/amro93-ngb-select.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./types/amro93-ngb-select.d.ts","default":"./fesm2022/amro93-ngb-select.mjs"}},"type":"module","gitHead":"b041efb21a1b3ca537fd604b43214044980b0670","_id":"@amro93/ngb-select@0.1.7","_nodeVersion":"22.23.2","_npmVersion":"12.0.2","dist":{"integrity":"sha512-x1O10kED4cezAgFWH1FFdMGlITYJY5YSzJgOIYqbh+gPu480Ksjik/k2+S6sQDHXytawLoByzWuE4Z8q6ajXSw==","shasum":"4cf5533c2c26775c7a696864506ab45d36233fd8","tarball":"https://registry.npmjs.org/@amro93/ngb-select/-/ngb-select-0.1.7.tgz","fileCount":5,"unpackedSize":252061,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@amro93%2fngb-select@0.1.7","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAa49KR9Nh8M3P4XUcYZcN9WE0mLYt2ZstDHLtF6OK9CAiAJ6Lw985CL0YwVpk/hYXmJ85ghfhLshprg8/he0ZoMDw=="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:a3f13011-7bc8-427b-bb12-4fa984810e06"}},"directories":{},"maintainers":[{"name":"amro93","email":"amro.samy93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ngb-select_0.1.7_1788350919230_0.08218772190814128"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-31T11:37:27.321Z","modified":"2026-09-02T12:08:39.704Z","0.1.1":"2026-08-31T11:37:27.664Z","0.1.3":"2026-08-31T11:39:06.074Z","0.1.4":"2026-08-31T12:17:02.114Z","0.1.6":"2026-09-01T05:59:08.872Z","0.1.7":"2026-09-02T12:08:39.391Z"},"bugs":{"url":"https://github.com/amro93/ngb-select/issues"},"author":{"name":"amro93"},"license":"MIT","homepage":"https://github.com/amro93/ngb-select#readme","keywords":["angular","angular-select","bootstrap","bootstrap-5","select","dropdown","combobox","standalone","ngb-select"],"repository":{"type":"git","url":"git+https://github.com/amro93/ngb-select.git"},"description":"Lightweight, accessible, standalone Angular Select dropdown component built with pure Bootstrap 5","maintainers":[{"name":"amro93","email":"amro.samy93@gmail.com"}],"readme":"# Ngb-Select (Angular Bootstrap Select Component)\n\n[![NPM Version](https://img.shields.io/npm/v/@amro93/ngb-select.svg)](https://www.npmjs.com/package/@amro93/ngb-select)\n[![CI/CD Pipeline](https://github.com/amro93/ngb-select/actions/workflows/deploy.yml/badge.svg)](https://github.com/amro93/ngb-select/actions)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nA comprehensive, lightweight Angular Standalone select component that utilizes **pure Bootstrap 5 classes** (no external UI libraries required). It covers all advanced features found in modern select components, optimized for standard Bootstrap environments.\n\n---\n\n## 🚀 Features at a Glance\n\n- 📦 **Standalone Architecture** - Modern Angular 15+ design, easy to import without NgModules.\n- 🎨 **Pure Bootstrap 5** - Uses `.form-select`, `.dropdown-menu`, and `.list-group` internally. No extra CSS payload.\n- 🔍 **Filtering & Match Modes** - Fast, client-side search supporting `contains`, `startsWith`, `endsWith`, `equals`.\n- 🗂️ **Grouping** - Categorize options with nested headers.\n- 🛠️ **Advanced Templating** - Replace default text with fully custom DOM for items, headers, footers, and selected states.\n- ⌨️ **Forms Native & Signals** - Implements `ControlValueAccessor` for seamless `ngModel`, `FormControl` (Reactive Forms), and modern Angular `model()` Signal support.\n- 🛡️ **Robust Fallbacks** - Defensively programmed to gracefully handle `null`, `undefined`, and empty strings across inputs.\n- ♿ **Accessible** - ARIA roles implemented (`combobox`, `listbox`, `option`) alongside keyboard navigation.\n- ⚡ **Editable Combobox** - Allows custom user typing directly into the select input.\n- 🎯 **Focus on Open** - Programmatically scroll and focus a specific option index when the popup opens.\n\n---\n\n## 📦 Installation\n\nInstall `@amro93/ngb-select` along with peer dependencies:\n\n```bash\nnpm install @amro93/ngb-select bootstrap bootstrap-icons\n```\n\nEnsure Bootstrap 5 CSS is included in your `angular.json` or `src/styles.scss`:\n\n```scss\n@import 'bootstrap/scss/bootstrap';\n@import 'bootstrap-icons/font/bootstrap-icons.css';\n```\n\n---\n\n## 💻 Usage Examples\n\n### 1. Basic Setup (Template Driven)\n\n```typescript\nimport { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgbSelectComponent } from '@amro93/ngb-select';\n\n@Component({\n standalone: true,\n imports: [NgbSelectComponent, FormsModule],\n template: `\n \n \n `,\n})\nexport class AppComponent {\n cities = [\n { name: 'New York', code: 'NY' },\n { name: 'Rome', code: 'RM' },\n { name: 'London', code: 'LDN' },\n ];\n selectedCity: string = 'NY';\n}\n```\n\n---\n\n### 2. Reactive Forms with Validation\n\n```typescript\nimport { Component } from '@angular/core';\nimport { ReactiveFormsModule, FormGroup, FormControl, Validators } from '@angular/forms';\nimport { NgbSelectComponent } from '@amro93/ngb-select';\n\n@Component({\n standalone: true,\n imports: [NgbSelectComponent, ReactiveFormsModule],\n template: `\n
\n \n \n \n `,\n})\nexport class AppComponent {\n form = new FormGroup({\n selectedCountry: new FormControl(null, [Validators.required]),\n });\n}\n```\n\n---\n\n### 3. Filtering and Custom Search Modes\n\n```html\n\n\n```\n\n---\n\n### 4. Custom Templating\n\nOverride default rendering for options and the selected value using ``:\n\n```html\n\n \n \n
\n \n {{ user.name }}\n
\n \n\n \n \n
\n
\n \n
\n
{{ user.name }}
\n {{ user.email }}\n
\n
\n {{ user.role }}\n
\n \n\n```\n\n---\n\n### 5. Searchable Multi-Select with Checkboxes & Chips\n\n```html\n\n\n```\n\n---\n\n### 6. Grouped Options\n\n```html\n\n\n```\n\n---\n\n### 7. RTL (Right-to-Left) & Arabic Support\n\n```html\n
\n \n \n
\n```\n\n---\n\n## 📖 Documentation & Links\n\n- 🌐 **[Live Demo & Showcase](https://amro93.github.io/ngb-select/)**\n- ⚡ **[StackBlitz Sandbox](https://stackblitz.com/github/amro93/ngb-select)**\n- 📘 **[Architecture & Features Guide](https://github.com/amro93/ngb-select/blob/main/docs/01-architecture-and-features.md)**\n- 📘 **[API & Interfaces Reference](https://github.com/amro93/ngb-select/blob/main/docs/02-api-and-interfaces.md)**\n- 📘 **[Installation & Setup Guide](https://github.com/amro93/ngb-select/blob/main/docs/08-installation-guide.md)**\n\n---\n\n## 📄 License\n\nDistributed under the MIT License. See [LICENSE](https://github.com/amro93/ngb-select/blob/main/LICENSE) for more information.\n","readmeFilename":"README.md"}