{"_id":"@alimuhnad/ngx-filesize","name":"@alimuhnad/ngx-filesize","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@alimuhnad/ngx-filesize","version":"1.0.0","description":"📐 Angular standalone pipe to format file sizes (Bytes → KB, MB, GB, TB) with multi-language support (English + العربية).","keywords":["angular","angular20","pipe","filesize","ngx-filesize","formatter","arabic","english","multilingual"],"author":{"name":"Ali Muhnad","email":"alimuhnad72@gmail.com","url":"https://github.com/alimuhnad"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/alimuhnad/ngx-filesize.git"},"bugs":{"url":"https://github.com/alimuhnad/ngx-filesize/issues"},"homepage":"https://github.com/alimuhnad/ngx-filesize#readme","peerDependencies":{"@angular/common":"^20.0.0","@angular/core":"^20.0.0"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"module":"fesm2022/alimuhnad-ngx-filesize.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/alimuhnad-ngx-filesize.mjs"}},"_id":"@alimuhnad/ngx-filesize@1.0.0","_nodeVersion":"20.16.0","_npmVersion":"10.8.3","dist":{"integrity":"sha512-9CYuEj+W6+HJDK9aUXq4XHcjMx4BC767gMWJgA1KYkqmMbzbe+JvwJV6JIr2r2lH9YFOG9JMIdgZF5heXo0/PA==","shasum":"0bc2b6d6f78f3f79c4e51721337a92c269b74765","tarball":"https://registry.npmjs.org/@alimuhnad/ngx-filesize/-/ngx-filesize-1.0.0.tgz","fileCount":10,"unpackedSize":20908,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIG4O8g9kwbfwlvIEAGO66IZVS3wnEZWZ9ksv93OP/jOoAiBYb2sKLSoNtMnaGrSy57WDCjusM5IF+5XDHD3sKKk3rw=="}]},"_npmUser":{"name":"alimuhnad","email":"alimuhnad72@gmail.com"},"directories":{},"maintainers":[{"name":"alimuhnad","email":"alimuhnad72@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ngx-filesize_1.0.0_1757159221538_0.6648502526355029"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-06T11:47:01.444Z","1.0.0":"2025-09-06T11:47:01.757Z","modified":"2025-09-06T11:47:02.012Z"},"maintainers":[{"name":"alimuhnad","email":"alimuhnad72@gmail.com"}],"description":"📐 Angular standalone pipe to format file sizes (Bytes → KB, MB, GB, TB) with multi-language support (English + العربية).","homepage":"https://github.com/alimuhnad/ngx-filesize#readme","keywords":["angular","angular20","pipe","filesize","ngx-filesize","formatter","arabic","english","multilingual"],"repository":{"type":"git","url":"git+https://github.com/alimuhnad/ngx-filesize.git"},"author":{"name":"Ali Muhnad","email":"alimuhnad72@gmail.com","url":"https://github.com/alimuhnad"},"bugs":{"url":"https://github.com/alimuhnad/ngx-filesize/issues"},"license":"MIT","readme":"# 📐 @alimuhnad/ngx-filesize\n\n**Angular v20 standalone pipe** to format file sizes (Bytes → KB, MB, GB, TB).  \n- **i18n-ready** via `Intl.NumberFormat` (Arabic digits supported)  \n- **Treeshakable**, **SSR-safe**, **zero dependencies**\n\n[![npm](https://img.shields.io/npm/v/%40alimuhnad/ngx-filesize.svg)](https://www.npmjs.com/package/@alimuhnad/ngx-filesize)\n[![license](https://img.shields.io/npm/l/%40alimuhnad/ngx-filesize.svg)](./LICENSE)\n[![angular](https://img.shields.io/badge/angular-20%2B-red)](#compatibility)\n[![types](https://img.shields.io/badge/types-TypeScript%205-blue)](#compatibility)\n\n---\n\n## Table of contents\n- [Features](#features)\n- [Install](#install)\n- [Quick start](#quick-start)\n- [Usage](#usage)\n- [API](#api)\n- [Internationalization (Arabic)](#internationalization-arabic)\n- [SSR & performance notes](#ssr--performance-notes)\n- [Compatibility](#compatibility)\n- [Troubleshooting](#troubleshooting)\n- [Examples](#examples)\n- [Contributing](#contributing)\n- [License](#license)\n- [ملخص عربي](#ملخص-عربي-quick-start)\n\n---\n\n## Features\n✅ Angular v20 **standalone pipe** (no NgModule)  \n🌍 i18n-friendly using `Intl.NumberFormat` (Arabic digits when locale is `ar`)  \n🔢 Configurable fraction digits (e.g., `1.23 MB`)  \n🧩 **Zero runtime deps**; **treeshakable**; ESM  \n🧠 Safe defaults for invalid/zero values\n\n---\n\n## Install\n```bash\nnpm i @alimuhnad/ngx-filesize\n```\nAngular 20+ is required (see [Compatibility](#compatibility)).\n\n---\n\n## Quick start\n\nIf you want Arabic digits/formatting, register the Arabic locale once (optional):\n\n```ts\n// main.ts\nimport { bootstrapApplication, LOCALE_ID } from '@angular/core';\nimport { registerLocaleData } from '@angular/common';\nimport ar from '@angular/common/locales/ar';\n\nregisterLocaleData(ar);\n\nbootstrapApplication(AppComponent, {\n  providers: [{ provide: LOCALE_ID, useValue: 'ar' }]\n});\n```\n\nThen import the pipe directly in any standalone component:\n\n```ts\nimport { Component } from '@angular/core';\nimport { FileSizePipe } from '@alimuhnad/ngx-filesize';\n\n@Component({\n  selector: 'app-demo',\n  standalone: true,\n  imports: [FileSizePipe],\n  template: `\n    <p>Size: {{ bytes | filesize }}</p>\n  `\n})\nexport class DemoComponent {\n  bytes = 1_048_576; // 1 MB\n}\n```\n\n---\n\n## Usage\n\n```html\n<!-- Uses app LOCALE_ID or falls back to 'en' -->\n<span>{{ 1048576 | filesize }}</span>           <!-- \"1 MB\" or \"١ MB\" -->\n\n<!-- Force English regardless of app locale -->\n<span>{{ 123456789 | filesize:'en' }}</span>    <!-- \"117.7 MB\" -->\n\n<!-- Control fraction digits -->\n<span>{{ 123456789 | filesize:'en':1 }}</span>  <!-- \"117.7 MB\" -->\n<span>{{ 123456789 | filesize:'ar':3 }}</span>  <!-- \"١١٧٫٧٣٧ MB\" (digits localized) -->\n```\n\n> **Note:** Units are standardized Latin (`B, KB, MB, GB, TB`). Numerals respect the selected locale.\n\n---\n\n## API\n\n### `filesize` pipe\nFormats a numeric byte value into a human-readable string.\n\n**Signature**\n```ts\ntransform(\n  value: number,\n  locale: string = 'en',\n  digits: number = 2\n): string\n```\n\n**Params**\n- `value`: Byte count (number). If `NaN`, returns empty string.\n- `locale`: BCP-47 locale (e.g., `'en'`, `'ar'`).\n- `digits`: `0..3` recommended — used as `maximumFractionDigits`.\n\n**Returns**\n- Formatted string like `\"1.2 MB\"`, with numerals localized via `Intl.NumberFormat`.\n\n---\n\n## Internationalization (Arabic)\n\nWhen `LOCALE_ID` starts with `'ar'` *and* you’ve called `registerLocaleData(ar)`, numerals render using Arabic digits:\n\n```html\n<span>{{ 1048576 | filesize:'ar' }}</span> <!-- \"١ MB\" -->\n```\n\n- Units remain Latin by design (`KB`, `MB`, …) for cross-language consistency.\n- If you need Arabic unit words (مثل: \"بايت، كيلوبايت، ميغابايت\") يمكنك التفاف النتائج مخصصًا في تطبيقك (انظر [Examples](#examples)).\n\n---\n\n## SSR & performance notes\n- The pipe is **pure** and performs a single computation per value.\n- **SSR-safe**: no timers or browser-only APIs beyond `Intl.NumberFormat`.\n- For large lists, prefer `OnPush` components and avoid re-creating numbers every CD cycle.\n\n---\n\n## Compatibility\n- **Angular:** v20+\n- **TypeScript:** 5.x+\n- **Runtime:** Modern browsers / Node with `Intl.NumberFormat`\n- **Dependencies:** none (uses `tslib` via Angular workspace)\n\n---\n\n## Troubleshooting\n**“I get an empty string”**  \nEnsure the input is a valid **number** (not `null`/`undefined`/string). Coerce if needed: `+size`.\n\n**“Why are units Latin?”**  \nThis library localizes **digits**; units are standardized (`KB`, `MB`, …). See the example below to map units to Arabic words if desired.\n\n**“Rounding looks off”**  \nAdjust `digits` param: `| filesize:'en':0` for integers, `:1` or `:2` for finer precision.\n\n---\n\n## Examples\n\n### Force Arabic digits while keeping English app locale\n```html\n{{ 5_242_880 | filesize:'ar' }}  <!-- \"٥ MB\" -->\n```\n\n### Map units to Arabic words (app-level wrapper)\n```ts\n// example.util.ts\nconst UNIT_MAP_AR: Record<string, string> = {\n  B: 'بايت', KB: 'كيلوبايت', MB: 'ميغابايت', GB: 'غيغابايت', TB: 'تيرابايت'\n};\n\nexport function arabicUnits(label: string) {\n  return label.replace(/\\b(B|KB|MB|GB|TB)\\b/g, (u) => UNIT_MAP_AR[u]);\n}\n```\n```html\n<!-- First format normally, then post-process the unit label -->\n<span>{{ arabicUnits((123456789 | filesize:'ar':1)) }}</span>\n<!-- \"١١٧٫٧ ميغابايت\" -->\n```\n\n### Table cell with exact bytes in title attribute\n```html\n<td [attr.title]=\"bytes + ' B'\">\n  {{ bytes | filesize:'en':2 }}\n</td>\n```\n\n---\n\n## Contributing\nPRs and issues are welcome!  \nIf you propose new options (e.g., unit localization), please include tests and docs.\n\n**Local dev**\n```bash\n# build the library from workspace root\nng build ngx-filesize\n\n# pack & consume in a demo app\ncd dist/ngx-filesize\nnpm pack\n# in your app:\nnpm i ../path/to/ngx-filesize-*.tgz\n```\n\n---\n\n## License\nMIT © [Ali Muhnad](https://github.com/alimuhnad)\n\n---\n\n## ملخص عربي (Quick Start)\n\n- ثبّت الحزمة: `npm i @alimuhnad/ngx-filesize`  \n- (اختياري) فعّل العربية:\n  ```ts\n  registerLocaleData(ar);\n  providers: [{ provide: LOCALE_ID, useValue: 'ar' }];\n  ```\n- أمثلة:\n  ```html\n  {{ 1048576 | filesize }}          <!-- 1 MB / ١ MB -->\n  {{ 123456789 | filesize:'en':1 }} <!-- 117.7 MB -->\n  {{ 123456789 | filesize:'ar':1 }} <!-- ١١٧٫٧ MB -->\n  ```\n","readmeFilename":"README.md","_rev":"1-9af21be061449fcd718d6dc289d44d0a"}