{"id":26618343,"url":"https://github.com/MomenWalid/Truncate","last_synced_at":"2025-03-24T08:06:06.082Z","repository":{"id":280348042,"uuid":"928016542","full_name":"MomenWalid/Truncate","owner":"MomenWalid","description":"Truncate Text Demo","archived":false,"fork":false,"pushed_at":"2025-03-02T21:52:34.000Z","size":435,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T22:28:08.289Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://truncate-gilt.vercel.app","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/MomenWalid.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}},"created_at":"2025-02-05T23:15:40.000Z","updated_at":"2025-03-02T21:52:38.000Z","dependencies_parsed_at":"2025-03-02T22:38:16.951Z","dependency_job_id":null,"html_url":"https://github.com/MomenWalid/Truncate","commit_stats":null,"previous_names":["momenwalid/truncate"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MomenWalid%2FTruncate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MomenWalid%2FTruncate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MomenWalid%2FTruncate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MomenWalid%2FTruncate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MomenWalid","download_url":"https://codeload.github.com/MomenWalid/Truncate/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245232836,"owners_count":20581699,"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","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-03-24T08:01:54.446Z","updated_at":"2025-03-24T08:06:06.075Z","avatar_url":"https://github.com/MomenWalid.png","language":"TypeScript","readme":"# mTruncate - Angular Truncate Directive\n\n`mTruncate` is a lightweight and customizable Angular directive for truncating text with support for tooltips. It allows you to truncate text based on width or a specified number of lines and display a tooltip when the full text is not visible.\n\n## 🚀 Features\n\n- **Dynamic Truncation** – Truncate text based on characters, lines, or width.\n- **Tooltip Support** – Shows full text when hovered.\n- **Customizable** – Change styles, position, colors, and more.\n- **Performance Optimized** – Uses event debouncing and efficient calculations.\n- **Responsive** – Adapts to different screen sizes.\n\n## 📦 Installation\n\nInstall the package via npm:\n\n```sh\nnpm install m-truncate\n```\n\nOr using yarn:\n\n```sh\nyarn add m-truncate\n```\n\n## 📖 Usage\n\n### 1. Import the Directive\n\nThe directive is `standalone`, so you can use it directly in your component.\n\n```typescript\nimport { MTruncateDirective } from \"m-truncate\";\n```\n\n#### Apply to a Component Example\n\n```typescript\nimport { MTruncateDirective } from \"m-truncate\";\n\n@Component({\n  selector: \"app-example\",\n  standalone: true,\n  imports: [MTruncateDirective],\n  template: `\u003cdiv mTruncate\u003eThis text will be truncated\u003c/div\u003e`,\n})\nexport class ExampleComponent {}\n```\n\n### 2. Apply to an Element\n\n```html\n\u003cdiv mTruncate\u003eThis is a long text that will be truncated based on the specified conditions.\u003c/div\u003e\n```\n\n## 🔹 Inputs\n\n| Input Property     | Type      | Default     | Description                                                 |\n| ------------------ | --------- | ----------- | ----------------------------------------------------------- |\n| `truncateChar`     | `number`  | `0`         | Maximum number of characters before truncation occurs.      |\n| `truncateLines`    | `number`  | `0`         | Number of lines before truncation.                          |\n| `maxTruncateWidth` | `number`  | `0`         | Maximum width (in pixels) before truncation is applied.     |\n| `maxTooltipWidth`  | `number`  | `0`         | Maximum width for tooltip.                                  |\n| `showTooltip`      | `boolean` | `true`      | Show tooltip on hover.                                      |\n| `tooltipPosition`  | `string`  | `'top'`     | Position of the tooltip (`top`, `bottom`, `left`, `right`). |\n| `tooltipDirection` | `string`  | `'ltr'`     | Text direction (`ltr`, `rtl`).                              |\n| `bgColor`          | `string`  | `'#fff'`    | Tooltip background color.                                   |\n| `color`            | `string`  | `'#1c1c28'` | Tooltip text color.                                         |\n| `id`               | `string`  | `mId`       | ID for the tooltip element.                                 |\n| `truncateSuffix`   | `string`  | `...`       | Suffix to append when text is truncated.                    |\n\n## ⚡ Examples\n\n### Truncate by Characters\n\n```html\n\u003cp mTruncate [truncateChar]=\"50\"\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus neque.\u003c/p\u003e\n```\n\n### Truncate by Lines\n\n```html\n\u003cdiv mTruncate [truncateLines]=\"2\"\u003eThis text will be truncated after two lines.\u003c/div\u003e\n```\n\n### Tooltip Position\n\n```html\n\u003cspan mTruncate [truncateChar]=\"20\" [tooltipPosition]=\"'bottom'\"\u003e This tooltip will appear at the bottom \u003c/span\u003e\n```\n\n### Maximum Truncated Width\n\n```html\n\u003cp mTruncate [maxTruncateWidth]=\"150\"\u003eThis is a long text that will be truncated if it exceeds 150px.\u003c/p\u003e\n```\n\n## 🎨 Styling\n\nYou can customize the tooltip using CSS:\n\n```css\n.mTooltip {\n  font-family: Arial, sans-serif;\n  padding: 8px;\n  border-radius: 6px;\n  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\n}\n```\n\n## 📌 Note\n\nIf you have an **Arabic version** of your application or need to **dynamically change the tooltip direction across your project**, you can use the `mTruncate` service to set the direction globally.\n\n#### Use the Service in `app.component.ts`\n\n```typescript\nimport { Component } from \"@angular/core\";\nimport { MTruncateService } from \"m-truncate\";\n\n@Component({\n  selector: \"app-root\",\n  templateUrl: \"./app.component.html\",\n  styleUrl: \"./app.component.scss\",\n})\nexport class AppComponent {\n  constructor(private mTruncateService: MTruncateService) {}\n\n  ngOnInit() {\n    this.mTruncateService.setDirection(\"rtl\"); // Change direction globally\n  }\n}\n```\n\n## 📬 Contact\n\nIf you have any questions, need support, or want to contribute, feel free to reach out:\n\n- 📧 Email: [momenwaled60@gmail.com](mailto:momenwaled60@gmail.com)\n- 🐙 GitHub: [MomenWalid](https://github.com/MomenWalid)\n","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMomenWalid%2FTruncate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMomenWalid%2FTruncate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMomenWalid%2FTruncate/lists"}