{"id":30823060,"url":"https://github.com/bugMaker-237/ngx-tw","last_synced_at":"2025-09-06T11:08:21.185Z","repository":{"id":250775947,"uuid":"835437996","full_name":"bugMaker-237/ngx-tw","owner":"bugMaker-237","description":null,"archived":false,"fork":false,"pushed_at":"2025-09-03T17:55:47.000Z","size":651,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-03T19:39:18.323Z","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/bugMaker-237.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2024-07-29T20:55:49.000Z","updated_at":"2025-09-03T17:55:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"866766b6-bb23-4362-a07f-532d8d5e5239","html_url":"https://github.com/bugMaker-237/ngx-tw","commit_stats":null,"previous_names":["bugmaker-237/ngx-tw"],"tags_count":1551,"template":false,"template_full_name":null,"purl":"pkg:github/bugMaker-237/ngx-tw","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bugMaker-237%2Fngx-tw","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bugMaker-237%2Fngx-tw/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bugMaker-237%2Fngx-tw/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bugMaker-237%2Fngx-tw/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bugMaker-237","download_url":"https://codeload.github.com/bugMaker-237/ngx-tw/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bugMaker-237%2Fngx-tw/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273847264,"owners_count":25178647,"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-05T02:00:09.113Z","response_time":402,"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-09-06T11:02:32.759Z","updated_at":"2025-09-06T11:08:21.175Z","avatar_url":"https://github.com/bugMaker-237.png","language":"TypeScript","readme":"# ngx-tw\n\nA comprehensive Angular component library built with Tailwind CSS, providing a modern and customizable set of UI components for Angular applications.\n\n## 📦 Installation\n\n```bash\nnpm install ngx-tw\n```\n\n## 🚀 Quick Start\n\n1. Import the tailwind component in your Angular component:\n\n```typescript\nimport { TwButton } from \"ngx-tw\";\n\n@NgModule({\n  imports: [TwButton],\n  // ...\n})\nexport class AppComponent {}\n```\n\n2. Import the default styles in your `styles.scss`:\n\n```scss\n@import \"ngx-tw/default\";\n```\n\n## 🎨 Components\n\n### 🔔 Alerts\n\nInteractive notification components for displaying important messages to users.\n\n```html\n\u003ctw-alerts\u003e\u003c/tw-alerts\u003e\n```\n\n**Features:**\n\n- Multiple alert types: `info`, `error`, `warning`\n- Customizable duration and actions\n- Icon support with custom colors\n- Primary and secondary action buttons\n\n**Service Usage:**\n\n```typescript\nimport { AlertService } from 'ngx-tw';\n\nconstructor(private alertService: AlertService) {}\n\nshowAlert() {\n  this.alertService.show({\n    title: 'Success!',\n    description: 'Operation completed successfully',\n    type: 'info',\n    duration: 3000\n  });\n}\n```\n\n### 🔤 Autocomplete\n\nSmart input component with search and suggestion capabilities.\n\n```html\n\u003ctw-autocomplete [options]=\"myOptions\" [(ngModel)]=\"selectedValue\"\u003e \u003c/tw-autocomplete\u003e\n```\n\n**Features:**\n\n- Dynamic filtering and searching\n- Keyboard navigation support\n- Custom option templates\n- Async data loading\n\n### 🎯 Button\n\nVersatile button component with multiple styles and configurations.\n\n```html\n\u003ctw-button type=\"primary\" color=\"primary\" rounded=\"md\" [disabled]=\"false\"\u003e Click me \u003c/tw-button\u003e\n```\n\n**Properties:**\n\n- `type`: `'basic' | 'primary' | 'secondary'`\n- `color`: Color theme variants\n- `rounded`: Border radius options\n- `disabled`: Boolean state\n- `isSubmit`: Form submission type\n\n### 🎯 Button Icon\n\nIcon-only button for compact interfaces.\n\n```html\n\u003ctw-button-icon svgIcon=\"hero:plus\" color=\"primary\" [size]=\"20\"\u003e \u003c/tw-button-icon\u003e\n```\n\n### 🎯 Button Group\n\nGrouped button controls for related actions.\n\n```html\n\u003ctw-button-group\u003e\n  \u003ctw-button-group-item label=\"Option 1\" value=\"1\"\u003e\u003c/tw-button-group-item\u003e\n  \u003ctw-button-group-item label=\"Option 2\" value=\"2\"\u003e\u003c/tw-button-group-item\u003e\n\u003c/tw-button-group\u003e\n```\n\n### 📅 Calendar\n\nFull-featured calendar component with date selection and range support.\n\n```html\n\u003ctw-calendar [(selectedDate)]=\"selectedDate\" [isRange]=\"false\" [minDate]=\"minDate\" [maxDate]=\"maxDate\"\u003e \u003c/tw-calendar\u003e\n```\n\n**Features:**\n\n- Single date selection\n- Date range selection\n- Min/max date constraints\n- Multiple view modes (days, months, years)\n- Keyboard navigation\n- Today highlighting\n\n### 🏷️ Chip\n\nTag-like components for displaying categories, filters, or selections.\n\n```html\n\u003ctw-chip-list [(ngModel)]=\"selectedChips\" [isEditable]=\"true\"\u003e\n  \u003ctw-chip-item value=\"tag1\"\u003eJavaScript\u003c/tw-chip-item\u003e\n  \u003ctw-chip-item value=\"tag2\"\u003eAngular\u003c/tw-chip-item\u003e\n\u003c/tw-chip-list\u003e\n```\n\n**Features:**\n\n- Editable chip lists\n- Custom separators\n- Icon support\n- Color theming\n- Dynamic chip creation\n\n### 📅 Date Picker\n\nSpecialized date range picker component.\n\n```html\n\u003ctw-date-range-picker [(rangeStart)]=\"startDate\" [(rangeEnd)]=\"endDate\"\u003e \u003c/tw-date-range-picker\u003e\n```\n\n### 💬 Dialog\n\nModal dialog service for displaying overlays and confirmations.\n\n```typescript\nimport { DialogService } from 'ngx-tw';\n\nconstructor(private dialog: DialogService) {}\n\nopenDialog() {\n  this.dialog.open(MyDialogComponent, {\n    width: '400px',\n    data: { message: 'Hello World' }\n  });\n}\n```\n\n### 🔽 Expander\n\nAccordion-style expandable content sections.\n\n```html\n\u003ctw-expander [(expanded)]=\"isExpanded\"\u003e\n  \u003ctw-expander-header\u003eSection Title\u003c/tw-expander-header\u003e\n  \u003ctw-expander-content\u003e\n    \u003cp\u003eExpandable content goes here\u003c/p\u003e\n  \u003c/tw-expander-content\u003e\n\u003c/tw-expander\u003e\n```\n\n**Grouped Expanders:**\n\n```html\n\u003ctw-expander-group [multi]=\"false\"\u003e\n  \u003ctw-expander\u003e\n    \u003ctw-expander-header\u003eItem 1\u003c/tw-expander-header\u003e\n    \u003ctw-expander-content\u003eContent 1\u003c/tw-expander-content\u003e\n  \u003c/tw-expander\u003e\n  \u003ctw-expander\u003e\n    \u003ctw-expander-header\u003eItem 2\u003c/tw-expander-header\u003e\n    \u003ctw-expander-content\u003eContent 2\u003c/tw-expander-content\u003e\n  \u003c/tw-expander\u003e\n\u003c/tw-expander-group\u003e\n```\n\n### 🎨 Icon\n\nSVG icon component with dynamic loading and caching.\n\n```html\n\u003ctw-icon svgIcon=\"hero:home\" [size]=\"24\"\u003e \u003c/tw-icon\u003e\n```\n\n**Features:**\n\n- SVG icon support\n- Icon registry and caching\n- Heroicons integration\n- Custom size control\n- Dynamic icon loading\n\n### 📝 Input Field\n\nComprehensive form input component with validation and styling.\n\n```html\n\u003ctw-input-field label=\"Email\" placeholder=\"Enter your email\" inputType=\"email\" [required]=\"true\" iconPrefix=\"hero:envelope\" color=\"primary\" [(ngModel)]=\"emailValue\"\u003e \u003c/tw-input-field\u003e\n```\n\n**Features:**\n\n- Multiple input types\n- Prefix/suffix icons\n- Validation support\n- Multiline textarea mode\n- Form control integration\n- Error display\n\n### 📝 Masked Input\n\nSpecialized input with formatting masks.\n\n```html\n\u003ctw-masked-input mask=\"(000) 000-0000\" placeholder=\"Phone number\" [(ngModel)]=\"phoneNumber\"\u003e \u003c/tw-masked-input\u003e\n```\n\n### 🍽️ Menu\n\nDropdown menu component with nested support.\n\n```html\n\u003ctw-menu #menu\u003e\n  \u003cbutton *twMenuItem\u003eAction 1\u003c/button\u003e\n  \u003cbutton *twMenuItem=\"submenu\"\u003eAction 2 →\u003c/button\u003e\n  \u003cbutton *twMenuItem\u003eAction 3\u003c/button\u003e\n\u003c/tw-menu\u003e\n\n\u003ctw-menu #submenu\u003e\n  \u003cbutton *twMenuItem\u003eSubmenu Item 1\u003c/button\u003e\n  \u003cbutton *twMenuItem\u003eSubmenu Item 2\u003c/button\u003e\n\u003c/tw-menu\u003e\n```\n\n**Directives:**\n\n- `twMenuTrigger`: Trigger for opening menus\n- `twMenuItem`: Menu item directive\n\n### 📋 Select\n\nAdvanced select dropdown with search and custom options.\n\n```html\n\u003ctw-select placeholder=\"Choose an option\" color=\"primary\" [(ngModel)]=\"selectedValue\"\u003e\n  \u003c!-- Optional search input --\u003e\n  \u003cinput type=\"text\" placeholder=\"Search options...\" /\u003e\n\n  \u003ctw-option value=\"option1\"\u003eOption 1\u003c/tw-option\u003e\n  \u003ctw-option value=\"option2\"\u003eOption 2\u003c/tw-option\u003e\n  \u003ctw-option value=\"option3\"\u003eOption 3\u003c/tw-option\u003e\n\u003c/tw-select\u003e\n```\n\n**Features:**\n\n- Searchable options\n- Keyboard navigation\n- Custom option indicators\n- Multi-selection support\n- Async option loading\n\n### 💀 Skeleton\n\nLoading placeholder components for better UX.\n\n```html\n\u003ctw-skeleton-rect [width]=\"'200px'\" [height]=\"'20px'\"\u003e\u003c/tw-skeleton-rect\u003e\n```\n\n**Directive Usage:**\n\n```html\n\u003cdiv twSkeleton [isLoading]=\"loading\"\u003e\n  \u003cp\u003eContent that will be replaced with skeleton when loading\u003c/p\u003e\n\u003c/div\u003e\n```\n\n### ⏳ Spinner\n\nLoading spinner for indicating async operations.\n\n```html\n\u003ctw-spinner color=\"text-primary-500\"\u003e\u003c/tw-spinner\u003e\n```\n\n### 📌 Sticky Content Header\n\nHeader component that sticks to the top during scroll.\n\n```html\n\u003ctw-sticky-content-header\u003e\n  \u003ch2\u003eSection Title\u003c/h2\u003e\n\u003c/tw-sticky-content-header\u003e\n```\n\n### 🔄 Switch\n\nToggle switch component for boolean inputs.\n\n```html\n\u003ctw-switch label=\"Enable notifications\" color=\"primary\" [(ngModel)]=\"isEnabled\" (toggleChange)=\"onToggle($event)\"\u003e \u003c/tw-switch\u003e\n```\n\n### 📑 Tab\n\nTab navigation component for organizing content.\n\n```html\n\u003ctw-tab-group [(selectedIndex)]=\"activeTab\" color=\"primary\"\u003e\n  \u003ctw-tab-item label=\"Tab 1\"\u003e\n    \u003cp\u003eContent for tab 1\u003c/p\u003e\n  \u003c/tw-tab-item\u003e\n  \u003ctw-tab-item label=\"Tab 2\"\u003e\n    \u003cp\u003eContent for tab 2\u003c/p\u003e\n  \u003c/tw-tab-item\u003e\n\u003c/tw-tab-group\u003e\n```\n\n### 📊 Table\n\nAdvanced data table with sorting, pagination, and customization.\n\n```html\n\u003ctw-table [dataSource]=\"data\" (queryChange)=\"onQueryChange($event)\"\u003e\n  \u003ctw-column-def name=\"name\"\u003e\n    \u003ctw-header-cell-def\u003eName\u003c/tw-header-cell-def\u003e\n    \u003ctw-cell-def let-row\u003e{{ row.name }}\u003c/tw-cell-def\u003e\n  \u003c/tw-column-def\u003e\n\n  \u003ctw-column-def name=\"email\"\u003e\n    \u003ctw-header-cell-def\u003eEmail\u003c/tw-header-cell-def\u003e\n    \u003ctw-cell-def let-row\u003e{{ row.email }}\u003c/tw-cell-def\u003e\n  \u003c/tw-column-def\u003e\n\u003c/tw-table\u003e\n```\n\n**Features:**\n\n- Column definitions\n- Sorting and filtering\n- Pagination\n- Custom cell templates\n- Row selection\n\n### 🛠️ Toolbar\n\nApplication toolbar with actions and navigation.\n\n```html\n\u003ctw-toolbar header=\"Page Title\" toolbarIcon=\"hero:shopping-bag\" [hideActions]=\"false\"\u003e\n  \u003c!-- Custom toolbar actions --\u003e\n  \u003cng-content select=\"[slot=actions]\"\u003e\u003c/ng-content\u003e\n\u003c/tw-toolbar\u003e\n```\n\n### 🖱️ Drag \u0026 Drop\n\nComprehensive drag and drop functionality.\n\n```html\n\u003cdiv twDropListGroup\u003e\n  \u003cdiv twDropList [twDropListData]=\"list1\"\u003e\n    \u003cdiv *ngFor=\"let item of list1\" twDrag\u003e{{ item }}\u003c/div\u003e\n  \u003c/div\u003e\n\n  \u003cdiv twDropList [twDropListData]=\"list2\"\u003e\n    \u003cdiv *ngFor=\"let item of list2\" twDrag\u003e{{ item }}\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n**Directives:**\n\n- `twDrag`: Makes elements draggable\n- `twDropList`: Drop zone container\n- `twDropListGroup`: Groups multiple drop lists\n- `twDragPlaceholder`: Custom placeholder during drag\n- `twDragPreview`: Custom drag preview\n\n**Utilities:**\n\n- `moveItemInArray()`: Reorder items within array\n- `transferArrayItem()`: Move items between arrays\n\n## 🎨 Theming\n\nThe library supports multiple color themes:\n\n- `primary` - Primary brand color\n- `accent` - Secondary accent color\n- `danger` - Error/warning states\n- Custom color configurations\n\nMost components accept a `color` input to apply the desired theme.\n\n## 🌙 Dark Mode\n\nngx-tw includes built-in dark mode support using Tailwind's dark mode utilities. Components automatically adapt to dark mode when the `dark` class is applied to a parent element.\n\n## 📱 Responsive Design\n\nAll components are built with responsive design principles and work seamlessly across different screen sizes using Tailwind's responsive utilities.\n\n## ♿ Accessibility\n\nComponents follow WCAG guidelines and include:\n\n- Proper ARIA attributes\n- Keyboard navigation support\n- Screen reader compatibility\n- Focus management\n- High contrast support\n\n## 🔧 Customization\n\n### Custom Styles\n\nOverride component styles using Tailwind classes:\n\n```html\n\u003ctw-button twClass=\"custom-button-style\"\u003eCustom Button\u003c/tw-button\u003e\n```\n\n### Component Configuration\n\nMany components accept configuration objects for advanced customization:\n\n```typescript\n// Example: Custom chip transformer\n\u003ctw-chip-list [newContentTransformer]=\"customTransformer\"\u003e\n```\n\n## 📋 Requirements\n\n- Angular 16+\n- Tailwind CSS 3.0+\n- Angular CDK 16+\n\n## 🚀 Release \u0026 Publishing\n\nThis package is automatically published to NPM when changes are merged into the `master` branch. The CI/CD pipeline handles:\n\n- **Automated Testing** - Runs all tests to ensure code quality\n- **Version Bumping** - Automatically increments package version based on conventional commits\n- **Build Process** - Compiles the library for distribution\n- **NPM Publishing** - Publishes the new version to the NPM registry\n- **Release Notes** - Generates changelog and release notes\n\n### Conventional Commits\n\nTo ensure proper versioning, please use conventional commit messages:\n\n```bash\nfeat: add new component feature       # Minor version bump\nfix: resolve component bug           # Patch version bump\nfeat!: breaking change              # Major version bump\ndocs: update documentation          # No version bump\n```\n\n### Version Strategy\n\n- **Patch** (1.0.X) - Bug fixes and small improvements\n- **Minor** (1.X.0) - New features and components\n- **Major** (X.0.0) - Breaking changes and major updates\n\n## 🤝 Contributing\n\nWe welcome contributions! Please read our [Contributing Guidelines](CONTRIBUTING.md) for details on:\n\n- How to submit pull requests\n- Coding standards and conventions\n- Development setup and workflow\n- Conventional commit format for versioning\n- Component development guidelines\n\nFor major changes, please open an issue first to discuss what you would like to change.\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n","funding_links":[],"categories":["Third Party Components"],"sub_categories":["UI Libraries built on Tailwind CSS"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FbugMaker-237%2Fngx-tw","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FbugMaker-237%2Fngx-tw","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FbugMaker-237%2Fngx-tw/lists"}