{"id":31514072,"url":"https://github.com/kisimediaDE/ionx-search-select","last_synced_at":"2025-10-03T02:04:04.091Z","repository":{"id":317179013,"uuid":"1066199030","full_name":"kisimediaDE/ionx-search-select","owner":"kisimediaDE","description":null,"archived":false,"fork":false,"pushed_at":"2025-09-29T12:06:13.000Z","size":107,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-29T12:09:13.057Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kisimediaDE.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-29T06:55:09.000Z","updated_at":"2025-09-29T12:06:16.000Z","dependencies_parsed_at":"2025-09-29T12:09:28.955Z","dependency_job_id":"34dbcf7d-4533-49c7-a786-e38a6351bfbe","html_url":"https://github.com/kisimediaDE/ionx-search-select","commit_stats":null,"previous_names":["kisimediade/ionx-search-select"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/kisimediaDE/ionx-search-select","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kisimediaDE%2Fionx-search-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kisimediaDE%2Fionx-search-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kisimediaDE%2Fionx-search-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kisimediaDE%2Fionx-search-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kisimediaDE","download_url":"https://codeload.github.com/kisimediaDE/ionx-search-select/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kisimediaDE%2Fionx-search-select/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277585978,"owners_count":25843334,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-29T02:00:09.175Z","response_time":84,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-03T02:01:13.372Z","updated_at":"2025-10-03T02:04:04.086Z","avatar_url":"https://github.com/kisimediaDE.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["UI Library and Framework Ionic"],"readme":"# IonxSearchSelect\n\nA modern **Search \u0026 Select component** for Angular + Ionic.  \nBuilt with **Standalone Components**, **Angular Signals**, and full **CVA (ControlValueAccessor)** support.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"Angular\" src=\"https://img.shields.io/badge/Angular-20+-dd0031?logo=angular\u0026logoColor=white\"\u003e\n  \u003cimg alt=\"Ionic\" src=\"https://img.shields.io/badge/Ionic-8+-3880ff?logo=ionic\u0026logoColor=white\"\u003e\n  \u003cimg alt=\"TypeScript\" src=\"https://img.shields.io/badge/TypeScript-5.9-3178c6?logo=typescript\u0026logoColor=white\"\u003e\n  \u003cimg alt=\"License\" src=\"https://img.shields.io/badge/License-MIT-green\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"demo.gif\" alt=\"IonxSearchSelect Demo\" height=\"400\"\u003e\n\u003c/p\u003e\n\n## ✨ Features\n\n- 🔎 Searchable select with keyboard navigation\n- 🌀 Works with **Reactive Forms** and **Template-driven Forms**\n- 🧩 Can be used standalone without Angular Forms\n- 🌍 Built-in i18n (EN/DE) with overrides\n- 🎨 Ionic design, ships as Angular standalone library\n- ♻️ No RxJS required (pure Signals API)\n\n## 📦 Installation\n\nThis library requires **@ionic/angular** and **ionicons** as peer dependencies.\n\nInstall them step by step:\n\n```bash\nnpm install @ionic/angular ionicons\n```\n\nThen install the library:\n\n```bash\nnpm install ionx-search-select\n```\n\nPeer dependencies:\n\n- Angular ≥ 20\n- Ionic ≥ 8\n\n## 🚀 Usage\n\n### 1. Reactive Forms (`FormControl`)\n\n```ts\n// demo.page.ts\nimport { FormControl } from '@angular/forms';\nimport { SelectOption } from 'ionx-search-select';\n\ntype Id = string;\n\n@Component({\n  /* ... */\n})\nexport class DemoPage {\n  city = new FormControl\u003cId | null\u003e(null);\n\n  cityOptions: SelectOption\u003cId\u003e[] = [\n    { value: 'ber', label: 'Berlin' },\n    { value: 'ham', label: 'Hamburg' },\n    { value: 'muc', label: 'Munich' },\n    { value: 'cgn', label: 'Cologne', disabled: true },\n    { value: 'fra', label: 'Frankfurt' },\n  ];\n}\n```\n\n```html\n\u003cionx-search-select [options]=\"cityOptions\" placeholder=\"Choose a city…\" [formControl]=\"city\"\u003e\n\u003c/ionx-search-select\u003e\n\n\u003cp\u003eSelected: {{ city.value }}\u003c/p\u003e\n```\n\n### 2. Template-driven Forms (`[(ngModel)]`)\n\n```ts\n// demo.page.ts\nselectedCity: string | null = null;\n\ncityOptions: SelectOption\u003cstring\u003e[] = [\n  { value: 'ber', label: 'Berlin' },\n  { value: 'ham', label: 'Hamburg' },\n  { value: 'muc', label: 'Munich' },\n  { value: 'fra', label: 'Frankfurt' },\n];\n```\n\n```html\n\u003cionx-search-select [options]=\"cityOptions\" placeholder=\"Choose a city…\" [(ngModel)]=\"selectedCity\"\u003e\n\u003c/ionx-search-select\u003e\n\n\u003cp\u003eSelected: {{ selectedCity }}\u003c/p\u003e\n```\n\n### 3. Standalone (without Angular Forms)\n\n```ts\n// demo.page.ts\nselectedCity: string | null = null;\n\ncityOptions: SelectOption\u003cstring\u003e[] = [\n  { value: 'ber', label: 'Berlin' },\n  { value: 'ham', label: 'Hamburg' },\n  { value: 'muc', label: 'Munich' },\n];\n```\n\n```html\n\u003cionx-search-select\n  [options]=\"cityOptions\"\n  [value]=\"selectedCity\"\n  (changed)=\"selectedCity = $event\"\n\u003e\n\u003c/ionx-search-select\u003e\n\n\u003cp\u003eSelected: {{ selectedCity }}\u003c/p\u003e\n```\n\n## ⚙️ Inputs\n\n| Input               | Type                               | Default        | Description                      |\n| ------------------- | ---------------------------------- | -------------- | -------------------------------- |\n| `options`           | `SelectOption\u003cT\u003e[]`                | `[]`           | Options to display               |\n| `placeholder`       | `string`                           | `Select…`      | Trigger label \u0026 modal title      |\n| `multiple`          | `boolean`                          | `false`        | Enable multi select              |\n| `clearable`         | `boolean`                          | `true`         | Show **Clear** button            |\n| `closeOnSelect`     | `boolean`                          | `true`         | Auto close after select (single) |\n| `locale`            | `'en' \\| 'de'`                     | `'en'`         | Built-in i18n                    |\n| `i18n`              | `Partial\u003cIonxSearchSelectI18n\u003e`    | `{}`           | Override any text                |\n| `searchPlaceholder` | `string \\| null`                   | `null`         | Explicit search placeholder      |\n| `displayWith`       | `(opt: SelectOption\u003cT\u003e) =\u003e string` | `o =\u003e o.label` | Custom label renderer            |\n| `compareWith`       | `(a: T, b: T) =\u003e boolean`          | `a===b`        | Custom equality fn               |\n| `trackBy`           | `(o: SelectOption\u003cT\u003e) =\u003e unknown`  | `o.value`      | TrackBy fn                       |\n\n## 📤 Outputs\n\n| Output         | Payload            | Description            |\n| -------------- | ------------------ | ---------------------- |\n| `changed`      | `T \\| T[] \\| null` | Value changed          |\n| `openedChange` | `boolean`          | Modal open/close state |\n| `opened`       | `void`             | Modal opened           |\n| `closed`       | `void`             | Modal closed           |\n| `cleared`      | `void`             | Clear clicked          |\n\n## 🔑 Interfaces\n\n```ts\nexport interface SelectOption\u003cT = unknown\u003e {\n  value: T;\n  label: string;\n  disabled?: boolean;\n}\n\nexport type IonxSearchSelectI18n = {\n  clear: string;\n  done: string;\n  selected: string;\n  noResults: string;\n  search: string;\n  searchAriaLabel: string;\n  closeAriaLabel: string;\n};\n```\n\n## 🛠️ Development\n\nBuild the library:\n\n```bash\nng build ionx-search-select\n```\n\nRun the demo app:\n\n```bash\nng serve demo\n```\n\nRun unit tests:\n\n```bash\nng test\n```\n\n## 📄 License\n\nMIT – free to use, modify and distribute.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FkisimediaDE%2Fionx-search-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FkisimediaDE%2Fionx-search-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FkisimediaDE%2Fionx-search-select/lists"}