{"id":44724693,"url":"https://github.com/sametacar/smt-select","last_synced_at":"2026-02-23T00:58:47.548Z","repository":{"id":331214724,"uuid":"1125405369","full_name":"sametacar/smt-select","owner":"sametacar","description":"Customizable Angular select component with built-in search functionality.","archived":false,"fork":false,"pushed_at":"2025-12-31T09:12:40.000Z","size":195,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-04T13:18:28.284Z","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/sametacar.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-12-30T17:06:49.000Z","updated_at":"2025-12-31T09:12:43.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/sametacar/smt-select","commit_stats":null,"previous_names":["sametacar/smt-select"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/sametacar/smt-select","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sametacar%2Fsmt-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sametacar%2Fsmt-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sametacar%2Fsmt-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sametacar%2Fsmt-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sametacar","download_url":"https://codeload.github.com/sametacar/smt-select/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sametacar%2Fsmt-select/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29536527,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-17T05:00:25.817Z","status":"ssl_error","status_checked_at":"2026-02-17T04:57:16.126Z","response_time":100,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":"2026-02-15T17:00:26.114Z","updated_at":"2026-02-17T07:01:23.792Z","avatar_url":"https://github.com/sametacar.png","language":"TypeScript","readme":"# smt-select 👆\n\nA high-performance, lightweight, and customizable **Angular Select Component** with built-in Virtual Scroll and Search capabilities.\n\n## ✨ Features\n\n- **🔍 Searchable**: Quickly filter through thousands of options.\n- **⚡ Virtual Scroll**: Built-in support for high-performance rendering of large datasets.\n- **✅ Multi-Select**: Support for multiple selection out of the box.\n- **☑️ Select All**: Optional \"Select All\" toggle for multi-select mode.\n- **⌨️ Keyboard Navigation**: Full keyboard support (Arrow keys, Enter, Escape).\n- **🚫 Disabled Options**: Mark options as non-selectable.\n- **❌ Clearable**: Optional clear button to reset selection.\n- **🎨 Custom Styling**: Fully customizable via SCSS tokens.\n- **📱 Responsive**: Works seamlessly across mobile and desktop.\n- **🛡️ Type Safe**: Developed with strict TypeScript.\n\n---\n\n## 📺 Demo\n\n![smt-select demo](assets/smt-select_muti_demo.gif)\n\n---\n\n## 🧩 Angular Compatibility\n\n| Angular Version | Support |\n|-----------------|---------|\n| 21.x            | ✅ Yes  |\n| 20.x            | ✅ Yes  |\n| 19.x            | ✅ Yes  |\n| 18.x            | ✅ Yes  |\n\n\n## 🚀 Installation\n\n```bash\nnpm install smt-select\n```\n\n\u003e **Note**: Angular CDK is a peer dependency and will be automatically installed by npm 7+. Make sure it matches your Angular version.\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 Manual CDK Installation (if needed)\u003c/summary\u003e\n\nIf you're using npm 6 or need a specific CDK version:\n\n```bash\n# Install CDK first (version should match your Angular version)\nnpm install @angular/cdk@^21.0.0\n\n# Then install smt-select\nnpm install smt-select\n```\n\u003c/details\u003e\n\n---\n\n## 📦 Usage\n\n### 1. Component Logic (app.component.ts)\n```typescript\nimport { SmtSelectComponent, SmtSelectOption, SmtSelectConfig } from 'smt-select';\n\n@Component({\n  standalone: true,\n  imports: [SmtSelectComponent],\n  selector: 'app-root',\n  templateUrl: './app.component.html'\n})\nexport class AppComponent {\n  myOptions: SmtSelectOption[] = [\n    { value: 1, label: 'Option 1' },\n    { value: 2, label: 'Option 2', disabled: true }, // Disabled option\n    { value: 3, label: 'Option 3' }\n  ];\n\n  selectConfig: SmtSelectConfig = {\n    placeholder: 'Choose an item...',\n    virtualScroll: true,\n    isMultiSelect: false,\n    clearable: true, // Enable clear button\n    noResultsMessage: 'No items found' // Custom no results message\n  };\n\n  // Multi-select configuration with Select All\n  multiSelectConfig: SmtSelectConfig = {\n    placeholder: 'Choose multiple items...',\n    virtualScroll: true,\n    isMultiSelect: true,\n    showSelectAll: true, // Enable Select All option\n    clearable: true\n  };\n\n  selectedValue: any = null;\n\n  onSelection(value: any) {\n    console.log('Selected value:', value);\n  }\n}\n```\n\n### 2. Template (app.component.html)\n```html\n\u003csmt-select\n  [options]=\"myOptions\"\n  [config]=\"selectConfig\"\n  [(selectedValue)]=\"selectedValue\"\n  (selectionChange)=\"onSelection($event)\"\u003e\n\u003c/smt-select\u003e\n```\n\n---\n\n## 🎨 Customization\n\nYou can customize the component's appearance by providing custom colors:\n\n```typescript\nselectConfig: SmtSelectConfig = {\n  placeholder: 'Choose an item...',\n  virtualScroll: true,\n  isMultiSelect: false,\n  // Custom theme colors\n  optionActiveBackgroundColor: '#ff6b6b',\n  optionActiveTextColor: '#ffffff',\n  hoverBackgroundColor: '#ffe0e0',\n  optionTextColor: '#333333',\n  optionBackgroundColor: 'transparent',\n  inputTextColor: '#000000', // Placeholder automatically uses 60% opacity\n  borderColor: '#cccccc',\n  errorBorderColor: '#d9534f',\n  borderRadius: 8 // Can be number (px) or string ('8px', '0.5rem')\n};\n```\n\n---\n\n## ⚙️ API Reference\n\n### Inputs\n| Property | Type | Default | Description |\n|----------|------|---------|-------------|\n| `options` | `SmtSelectOption[]` | `[]` | Array of options to display. |\n| `config` | `SmtSelectConfig` | `{}` | Configuration object for the component. |\n| `selectedValue` | `any \\| any[]` | `null` | The currently selected value(s). Supports two-way binding. |\n| `errorMessage` | `string \\| null` | `undefined` | Error message to display below the component. |\n| `isInvalid` | `boolean` | `false` | Manually trigger error state if `errorMessage` is not provided. |\n| `visibility` | `SmtVisibilityType` | `ENABLED` | Controls accessibility (`ENABLED`, `READONLY`, `HIDDEN`). |\n\n### Outputs\n| Event | Payload | Description |\n|-------|---------|-------------|\n| `selectionChange` | `any \\| any[]` | Fired when the selected value changes. |\n| `selectedValueChange` | `any \\| any[]` | Fired when the selected value changes (for two-way binding support). |\n| `pocketOpen` | `boolean` | Fired when the dropdown is opened or closed. |\n\n### Option Structure (`SmtSelectOption`)\n| Property | Type | Required | Description |\n|----------|------|----------|-------------|\n| `value` | `any` | Yes | The value of the option. |\n| `label` | `string` | Yes | Display text for the option. |\n| `disabled` | `boolean` | No | Mark option as non-selectable (default: `false`). |\n\n### Configuration (`SmtSelectConfig`)\n| Property | Type | Description |\n|----------|------|-------------|\n| `fieldID` | `string \\| number` | Unique ID for the wrapper element. |\n| `placeholder` | `string` | Text to show when no value is selected. |\n| `virtualScroll` | `boolean` | Enable/Disable CDK Virtual Scroll for large datasets. |\n| `isMultiSelect` | `boolean` | Enable multiple item selection. |\n| `clearable` | `boolean` | Show clear button to reset selection (default: `false`). |\n| `showSelectAll` | `boolean` | Show \"Select All\" option in multi-select mode (default: `false`). Only visible when `isMultiSelect` is true. |\n| `noResultsMessage` | `string` | Custom message when no results found (default: `'No results found'`). |\n| **Theme Colors** | | |\n| `optionActiveBackgroundColor` | `string` | Background color for selected options (default: `#005f87`). |\n| `optionActiveTextColor` | `string` | Text color for selected options (default: `#fff`). |\n| `hoverBackgroundColor` | `string` | Background color for hovered items (default: `#f0faff`). |\n| `optionTextColor` | `string` | Text color for normal options (default: `#333`). |\n| `optionBackgroundColor` | `string` | Background color for normal options (default: `transparent`). |\n| `inputTextColor` | `string` | Text color for search input, selected value, and placeholder (with 60% opacity) (default: `#333`). |\n| `borderColor` | `string` | Border color for the component and dropdown (default: `#ccc`). |\n| `errorBorderColor` | `string` | Border color when in error state (default: `#d9534f`). |\n| `borderRadius` | `string \\| number` | Border radius for the component and dropdown. Number will be converted to px (default: `4px`). |\n\n---\n\n## ⌨️ Keyboard Shortcuts\n\nWhen the dropdown is open:\n- **Arrow Down** / **Arrow Up**: Navigate through options\n- **Enter**: Select highlighted option\n- **Escape**: Close dropdown\n- **Type to search**: Filter options in real-time\n\n---\n\n## 📄 License\n\nMIT © [Samet Acar](LICENSE)\n","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Form Controls"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsametacar%2Fsmt-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsametacar%2Fsmt-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsametacar%2Fsmt-select/lists"}