{"id":41879150,"url":"https://github.com/akaravi/npm-ntk-cms-angular","last_synced_at":"2026-04-04T22:16:41.932Z","repository":{"id":40410832,"uuid":"309348892","full_name":"akaravi/npm-ntk-cms-angular","owner":"akaravi","description":null,"archived":false,"fork":false,"pushed_at":"2026-01-15T16:30:05.000Z","size":31360,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-15T19:42:05.946Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/akaravi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2020-11-02T11:25:17.000Z","updated_at":"2026-01-15T16:30:12.000Z","dependencies_parsed_at":"2024-07-28T14:02:36.454Z","dependency_job_id":"82e5264a-3eb5-44ca-8b5e-e0c0e3e65c76","html_url":"https://github.com/akaravi/npm-ntk-cms-angular","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/akaravi/npm-ntk-cms-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akaravi%2Fnpm-ntk-cms-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akaravi%2Fnpm-ntk-cms-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akaravi%2Fnpm-ntk-cms-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akaravi%2Fnpm-ntk-cms-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akaravi","download_url":"https://codeload.github.com/akaravi/npm-ntk-cms-angular/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akaravi%2Fnpm-ntk-cms-angular/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28784093,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-26T13:55:28.044Z","status":"ssl_error","status_checked_at":"2026-01-26T13:55:26.068Z","response_time":59,"last_error":"SSL_read: 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-01-25T13:00:20.525Z","updated_at":"2026-01-26T18:01:16.517Z","avatar_url":"https://github.com/akaravi.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Mixed Utilities"],"readme":"# NTK CMS Angular Libraries\n\n\u003cdiv align=\"center\"\u003e\n\n![Angular](https://img.shields.io/badge/Angular-21.0.0-red.svg)\n![TypeScript](https://img.shields.io/badge/TypeScript-5.9.0-blue.svg)\n![License](https://img.shields.io/badge/License-ISC-green.svg)\n![npm](https://img.shields.io/npm/v/ngx-ntk-icon-picker)\n\n**مجموعه کاملی از کتابخانه‌های Angular برای سیستم مدیریت محتوا (CMS)**\n\n**A comprehensive collection of Angular libraries for Content Management System (CMS)**\n\n[Features](#-features) • [Installation](#-installation) • [Quick Start](#-quick-start) • [Documentation](#-documentation) • [Support](#-support)\n\n\u003c/div\u003e\n\n---\n\n## 📋 Table of Contents\n\n- [Overview](#-overview)\n- [Features](#-features)\n- [Libraries](#-libraries)\n- [Installation](#-installation)\n- [Quick Start](#-quick-start)\n- [Angular Compatibility](#-angular-compatibility)\n- [Documentation](#-documentation)\n- [Demo Application](#-demo-application)\n- [Development](#-development)\n- [Contributing](#-contributing)\n- [License](#-license)\n- [Support](#-support)\n\n## 🎯 Overview\n\nThis monorepo contains a collection of **9 reusable Angular libraries** designed for building modern CMS applications. Each library is:\n\n- ✅ **Standalone** - Can be used independently\n- ✅ **TypeScript** - Fully typed with TypeScript\n- ✅ **Angular 20 \u0026 21** - Compatible with Angular 20.1.0+ and 21.0.0+\n- ✅ **Well Documented** - Comprehensive documentation for each library\n- ✅ **Production Ready** - Tested and optimized for production use\n- ✅ **Multi-language** - Built-in internationalization support\n\n## ✨ Features\n\n- 🚀 **Modern Angular** - Built with Angular 20/21 best practices\n- 📦 **Modular Architecture** - Use only what you need\n- 🎨 **Customizable** - Flexible styling and theming options\n- 🌐 **i18n Ready** - Multi-language support (English, Persian, French, Russian)\n- ♿ **Accessible** - ARIA support and keyboard navigation\n- 📱 **Responsive** - Mobile-friendly components\n- 🔒 **Type Safe** - Full TypeScript support\n- ⚡ **Performance** - Optimized for speed and efficiency\n\n## 📚 Libraries\n\n### Core Libraries\n\n#### 1. [**ntk-cms-api**](projects/ntk-cms-api/README.md) (v20.26.1)\n\n**Complete API service layer and data models for CMS operations**\n\n[📖 Full Documentation](projects/ntk-cms-api/README.md) • [📦 npm](https://www.npmjs.com/package/ntk-cms-api)\n\n**Key Features:**\n\n- Complete API service layer for CMS operations\n- Comprehensive data models and DTOs\n- Support for multiple modules: News, Blog, Catalog, Estate, Member, etc.\n- Built-in authentication and authorization services\n- RESTful API integration with RxJS\n\n**Installation:**\n\n```bash\nnpm install ntk-cms-api\n```\n\n---\n\n#### 2. [**ntk-cms-filemanager**](projects/ntk-cms-filemanager/README.md) (v20.26.2)\n\n**Advanced file management system with tree-based navigation**\n\n[📖 Full Documentation](projects/ntk-cms-filemanager/README.md) • [📦 npm](https://www.npmjs.com/package/ntk-cms-filemanager)\n\n**Key Features:**\n\n- Tree-based file navigation\n- Drag \u0026 drop file operations\n- File preview and management\n- Upload functionality with progress tracking\n- Multi-language support\n- Customizable UI components\n\n**Installation:**\n\n```bash\nnpm install ntk-cms-filemanager\n```\n\n---\n\n#### 3. [**ntk-cms-fileuploader**](projects/ntk-cms-fileuploader/README.md) (v20.26.2)\n\n**Simple and efficient file upload component**\n\n[📖 Full Documentation](projects/ntk-cms-fileuploader/README.md) • [📦 npm](https://www.npmjs.com/package/ntk-cms-fileuploader)\n\n**Key Features:**\n\n- Simple and efficient file upload functionality\n- Progress tracking\n- File validation\n- Customizable upload interface\n- Drag \u0026 drop support\n\n**Installation:**\n\n```bash\nnpm install ntk-cms-fileuploader\n```\n\n---\n\n### UI Component Libraries\n\n#### 4. [**ngx-ntk-cron-editor**](projects/ngx-ntk-cron-editor/README.md) (v20.26.2)\n\n**Visual cron expression builder with time picker**\n\n[📖 Full Documentation](projects/ngx-ntk-cron-editor/README.md) • [📦 npm](https://www.npmjs.com/package/ngx-ntk-cron-editor)\n\n**Key Features:**\n\n- Visual cron job expression builder\n- Time picker component\n- Multi-language support\n- Customizable cron options\n- Real-time validation\n\n**Installation:**\n\n```bash\nnpm install ngx-ntk-cron-editor\n```\n\n---\n\n#### 5. [**ngx-ntk-file-picker**](projects/ngx-ntk-file-picker/README.md) (v20.26.2)\n\n**Advanced file picker with preview and drag \u0026 drop**\n\n[📖 Full Documentation](projects/ngx-ntk-file-picker/README.md) • [📦 npm](https://www.npmjs.com/package/ngx-ntk-file-picker)\n\n**Key Features:**\n\n- Real-time progress bar\n- File preview functionality\n- Drag \u0026 drop support\n- Custom templates\n- Multi-language support\n- Image cropping capabilities\n\n**Installation:**\n\n```bash\nnpm install ngx-ntk-file-picker\n```\n\n---\n\n#### 6. [**ngx-ntk-icon-picker**](projects/ngx-ntk-icon-picker/README.md) (v20.26.1)\n\n**Icon selection component with multiple icon libraries**\n\n[📖 Full Documentation](projects/ngx-ntk-icon-picker/README.md) • [📦 npm](https://www.npmjs.com/package/ngx-ntk-icon-picker)\n\n**Key Features:**\n\n- FontAwesome 4, 5, 6 support\n- Material Icons support\n- PrimeIcons support\n- Search and filter functionality\n- Custom icon packs\n- Modal-based selection\n\n**Installation:**\n\n```bash\nnpm install ngx-ntk-icon-picker\nnpm install @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons primeicons\n```\n\n---\n\n#### 7. [**ngx-ntk-mat-color-picker**](projects/ngx-ntk-mat-color-picker/README.md) (v20.26.2)\n\n**Material Design color picker component**\n\n[📖 Full Documentation](projects/ngx-ntk-mat-color-picker/README.md) • [📦 npm](https://www.npmjs.com/package/ngx-ntk-mat-color-picker)\n\n**Key Features:**\n\n- Angular Material integration\n- Multiple color formats (HEX, RGB, HSL)\n- Color palette presets\n- Canvas-based color selection\n- Numeric input support\n\n**Installation:**\n\n```bash\nnpm install ngx-ntk-mat-color-picker\nnpm install @angular/material @angular/forms @angular/cdk\n```\n\n---\n\n#### 8. [**ngx-ntk-query-builder**](projects/ngx-ntk-query-builder/README.md) (v20.26.2)\n\n**Visual query builder for complex database queries**\n\n[📖 Full Documentation](projects/ngx-ntk-query-builder/README.md) • [📦 npm](https://www.npmjs.com/package/ngx-ntk-query-builder)\n\n**Key Features:**\n\n- Drag \u0026 drop query construction\n- Multiple operator support\n- Conditional logic building\n- Export/import query definitions\n- Multi-language interface\n\n**Installation:**\n\n```bash\nnpm install ngx-ntk-query-builder\nnpm install @ngx-translate/core @ngx-translate/http-loader\n```\n\n---\n\n#### 9. [**ngx-ntk-smart-module**](projects/ngx-ntk-smart-module/README.md) (v20.26.2)\n\n**Smart modal and loader system**\n\n[📖 Full Documentation](projects/ngx-ntk-smart-module/README.md) • [📦 npm](https://www.npmjs.com/package/ngx-ntk-smart-module)\n\n**Key Features:**\n\n- Dynamic modal management\n- Smart loading indicators\n- Auto-start functionality\n- Customizable themes\n- Stack-based modal system\n\n**Installation:**\n\n```bash\nnpm install ngx-ntk-smart-module\n```\n\n---\n\n## 🚀 Installation\n\n### Prerequisites\n\n- **Node.js** (LTS version recommended)\n- **Angular CLI** (^20.0.0 or ^21.0.0)\n- **Angular** (^20.1.0 or ^21.0.0)\n\n### Install All Dependencies\n\n```bash\nnpm install\n```\n\n### Install Individual Libraries\n\n```bash\n# Core API\nnpm install ntk-cms-api\n\n# File Management\nnpm install ntk-cms-filemanager\nnpm install ntk-cms-fileuploader\n\n# UI Components\nnpm install ngx-ntk-cron-editor\nnpm install ngx-ntk-file-picker\nnpm install ngx-ntk-icon-picker\nnpm install ngx-ntk-mat-color-picker\nnpm install ngx-ntk-query-builder\nnpm install ngx-ntk-smart-module\n```\n\n### Install with Legacy Peer Dependencies (Angular 20)\n\nIf you're using Angular 20 and encounter peer dependency conflicts:\n\n```bash\nnpm install ngx-ntk-icon-picker --legacy-peer-deps\n```\n\n## ⚡ Quick Start\n\n### 1. Import Modules (Standalone Components)\n\n```typescript\nimport { Component } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { IconPickerModule } from \"ngx-ntk-icon-picker\";\nimport { FilePickerModule } from \"ngx-ntk-file-picker\";\nimport { NtkCmsApiModule } from \"ntk-cms-api\";\n\n@Component({\n  selector: \"app-root\",\n  standalone: true,\n  imports: [CommonModule, IconPickerModule, FilePickerModule, NtkCmsApiModule],\n  template: `...`,\n})\nexport class AppComponent {}\n```\n\n### 2. Basic Usage Examples\n\n#### Icon Picker\n\n```html\n\u003cinput type=\"text\" [iconPicker]=\"selectedIcon\" [ipIconPack]=\"['fa6']\" [ipPosition]=\"'bottom'\" [ipWidth]=\"'500px'\" [ipPlaceHolder]=\"'Choose an icon'\" (iconPickerSelect)=\"onIconSelect($event)\" /\u003e\n```\n\n#### File Picker\n\n```html\n\u003cfile-picker [config]=\"filePickerConfig\" (onUpload)=\"onFileUpload($event)\"\u003e \u003c/file-picker\u003e\n```\n\n#### Cron Editor\n\n```html\n\u003cngx-ntk-cron-editor [(cronExpression)]=\"cronExpression\" [options]=\"cronOptions\"\u003e \u003c/ngx-ntk-cron-editor\u003e\n```\n\n#### Color Picker\n\n```html\n\u003cngx-mat-color-picker [(color)]=\"selectedColor\" [format]=\"'hex'\"\u003e \u003c/ngx-mat-color-picker\u003e\n```\n\n## 🔄 Angular Compatibility\n\nAll libraries support both **Angular 20** and **Angular 21**:\n\n| Library                  | Angular 20 | Angular 21 |\n| ------------------------ | ---------- | ---------- |\n| ntk-cms-api              | ✅ ^20.1.0 | ✅ ^21.0.0 |\n| ntk-cms-filemanager      | ✅ ^20.1.0 | ✅ ^21.0.0 |\n| ntk-cms-fileuploader     | ✅ ^20.1.0 | ✅ ^21.0.0 |\n| ngx-ntk-cron-editor      | ✅ ^20.1.0 | ✅ ^21.0.0 |\n| ngx-ntk-file-picker      | ✅ ^20.1.0 | ✅ ^21.0.0 |\n| ngx-ntk-icon-picker      | ✅ ^20.1.0 | ✅ ^21.0.0 |\n| ngx-ntk-mat-color-picker | ✅ ^20.1.0 | ✅ ^21.0.0 |\n| ngx-ntk-query-builder    | ✅ ^20.1.0 | ✅ ^21.0.0 |\n| ngx-ntk-smart-module     | ✅ ^20.1.0 | ✅ ^21.0.0 |\n\n## 📖 Documentation\n\nEach library has comprehensive documentation:\n\n- [**ntk-cms-api**](projects/ntk-cms-api/README.md) - API services and models\n- [**ntk-cms-filemanager**](projects/ntk-cms-filemanager/README.md) - File management system\n- [**ntk-cms-fileuploader**](projects/ntk-cms-fileuploader/README.md) - File upload component\n- [**ngx-ntk-cron-editor**](projects/ngx-ntk-cron-editor/README.md) - Cron expression editor\n- [**ngx-ntk-file-picker**](projects/ngx-ntk-file-picker/README.md) - Advanced file picker\n- [**ngx-ntk-icon-picker**](projects/ngx-ntk-icon-picker/README.md) - Icon selection component\n- [**ngx-ntk-mat-color-picker**](projects/ngx-ntk-mat-color-picker/README.md) - Material color picker\n- [**ngx-ntk-query-builder**](projects/ngx-ntk-query-builder/README.md) - Visual query builder\n- [**ngx-ntk-smart-module**](projects/ngx-ntk-smart-module/README.md) - Modal and loader system\n\n## 🎮 Demo Application\n\nThis project includes a comprehensive demo application showcasing all libraries.\n\n### Running the Demo\n\n```bash\n# Install dependencies\nnpm install\n\n# Start development server\nnpm start\n\n# Navigate to http://localhost:4200\n```\n\n### Demo Pages\n\n- **API Test** (`/apiTest`) - API service demonstrations\n- **File Manager Test** (`/filemanagerTest`) - File management system\n- **File Uploader Test** (`/fileuploaderTest`) - File upload functionality\n- **Cron Editor Test** (`/cronEditTest`) - Cron expression builder\n- **Color Picker Test** (`/ColorPicker`) - Color selection component\n- **Icon Picker Test** (`/IconPicker`) - Icon selection interface\n- **Smart Loader Test** (`/smartLoaderTest`) - Loading system\n- **Smart Modal Test** (`/smartModalTest`) - Modal management\n- **Query Builder Test** (`/test`) - Query construction tool\n\n## 🛠 Development\n\n### Build All Libraries\n\n```bash\n# Build all libraries\nng build ntk-cms-api\nng build ntk-cms-filemanager\nng build ntk-cms-fileuploader\nng build ngx-ntk-cron-editor\nng build ngx-ntk-file-picker\nng build ngx-ntk-icon-picker\nng build ngx-ntk-mat-color-picker\nng build ngx-ntk-query-builder\nng build ngx-ntk-smart-module\n```\n\n### Build Demo Application\n\n```bash\n# Development build\nnpm run build\n\n# Production build\nng build --configuration production\n```\n\n### Testing\n\n```bash\n# Run unit tests\nnpm test\n\n# Run e2e tests\nnpm run e2e\n\n# Run linting\nnpm run lint\n```\n\n## 📦 Project Structure\n\n```\nnpm-ntk-cms-angular/\n├── projects/\n│   ├── ntk-cms-api/              # Core API services and models\n│   ├── ntk-cms-filemanager/      # File management system\n│   ├── ntk-cms-fileuploader/     # File upload component\n│   ├── ngx-ntk-cron-editor/      # Cron expression editor\n│   ├── ngx-ntk-file-picker/      # Advanced file picker\n│   ├── ngx-ntk-icon-picker/      # Icon selection component\n│   ├── ngx-ntk-mat-color-picker/ # Material color picker\n│   ├── ngx-ntk-query-builder/    # Visual query builder\n│   └── ngx-ntk-smart-module/     # Modal and loader system\n├── src/\n│   └── app/\n│       └── pages/                # Demo pages for each library\n├── dist/                         # Built libraries\n└── e2e/                         # End-to-end tests\n```\n\n## 🌐 Internationalization\n\nAll libraries support multiple languages:\n\n- **English** (en)\n- **Persian/Farsi** (fa)\n- **French** (fr)\n- **Russian** (ru)\n\nTranslation files are included in each library's assets folder.\n\n## 🔧 Configuration\n\n### Environment Setup\n\n```typescript\n// environment.ts\nexport const environment = {\n  production: false,\n  apiUrl: \"https://api.example.com\",\n  fileManagerUrl: \"https://files.example.com\",\n  uploadUrl: \"https://upload.example.com\",\n};\n```\n\n### API Configuration\n\n```typescript\nimport { NtkCmsApiService } from 'ntk-cms-api';\n\nconstructor(private apiService: NtkCmsApiService) {\n  this.apiService.setApiUrl('https://api.example.com');\n  this.apiService.setToken('your-auth-token');\n}\n```\n\n## 🤝 Contributing\n\nWe welcome contributions! Please follow these steps:\n\n1. **Fork the repository**\n2. **Create a feature branch** (`git checkout -b feature/amazing-feature`)\n3. **Commit your changes** (`git commit -m 'Add some amazing feature'`)\n4. **Push to the branch** (`git push origin feature/amazing-feature`)\n5. **Open a Pull Request**\n\n### Development Guidelines\n\n- Follow [Angular Style Guide](https://angular.io/guide/styleguide)\n- Write unit tests for new features\n- Update documentation for API changes\n- Ensure all tests pass before submitting PR\n- Use conventional commit messages\n\n## 📄 License\n\nThis project is licensed under the **ISC License** - see the [LICENSE](LICENSE) file for details.\n\n## 👨‍💻 Author\n\n**Alireza Karavi**\n\n- 🌐 Website: [ntk.ir](https://ntk.ir)\n- 📧 Contact: [GitHub Issues](https://github.com/akaravi/npm-ntk-cms-angular/issues)\n- 💼 GitHub: [@akaravi](https://github.com/akaravi)\n\n## 🆘 Support\n\nFor support and questions:\n\n- 📝 **Create an issue** on [GitHub](https://github.com/akaravi/npm-ntk-cms-angular/issues)\n- 📚 **Check documentation** - Each library has detailed README\n- 💬 **Contact** - [ntk.ir](https://ntk.ir)\n\n## 📊 Statistics\n\n- **9 Libraries** - Complete CMS solution\n- **Angular 20 \u0026 21** - Latest Angular versions\n- **TypeScript** - Fully typed\n- **Multi-language** - 4 languages supported\n- **Production Ready** - Tested and optimized\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**Made with ❤️ by [NTK Team](https://ntk.ir)**\n\n[⭐ Star us on GitHub](https://github.com/akaravi/npm-ntk-cms-angular) • [📦 npm packages](https://www.npmjs.com/~akaravi) • [🐛 Report Bug](https://github.com/akaravi/npm-ntk-cms-angular/issues) • [💡 Request Feature](https://github.com/akaravi/npm-ntk-cms-angular/issues)\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakaravi%2Fnpm-ntk-cms-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakaravi%2Fnpm-ntk-cms-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakaravi%2Fnpm-ntk-cms-angular/lists"}