Skip to content

v1.3.1: Premium Design Overhaul, Canvas-based Charts, and Runtime i18n

Choose a tag to compare

View all tags
@toozuuu toozuuu released this 16 Jul 15:46
· 96 commits to main since this release
1.3.1
500baea

We are excited to release v1.3.1 of the ngxsmk ecosystem! This release brings a premium visual polish to our core component styles, introduces a high-performance HTML5 Canvas chart engine, adds runtime internationalization (i18n) for 10 languages, and includes key library bug fixes.

🚀 What's New

🎨 Design System Overhaul & Refinements

  • Unified Focus Rings: Replaced custom outlines with a unified --ngxsmk-focus-ring shadow token across collapsible, navigation, and menu components.
  • RTL Logical Spacings: Converted directional margins, paddings, and borders to logical inline/block properties (*-inline-*), ensuring robust RTL layouts.
  • Modern Hover Animations: Migrated to advanced CSS color-mix() rules and cleaned up layout transition hygiene to remove accidental layout jumps.
  • Typography & Opacity Scaling: Upgraded font-sizes to semantic text roles (label-*, title-*) and mapped literal opacity rules to muted design tokens.

📊 Shared Canvas Chart Engine

The entire chart family has been rewritten to render directly to HTML5 Canvas (fully DPR-aware and retina-crisp) with responsive container sizing:

  • Animations & Interactivity: Added smooth draw-in animations, responsive cartesian grids, custom tooltips on hover, and toggleable legend components.
  • Supported Charts: Line, Area, Bar, Pie/Donut, Scatter, Heatmap, and Candlestick charts.
  • Diameter Controls: Defaulted chart-pie to non-responsive by default so that the input size directly defines the circle diameter.

🌐 Runtime Multi-language (i18n) Support

  • Dynamic Switcher: Integrated @ngx-translate/core and @ngx-translate/http-loader for runtime locale switching.
  • RTL & Localization: Added a global LangService that persists preferences to storage, updates document headers, and dynamically toggles the layout direction to dir="rtl" for Arabic.
  • 10 Core Languages: Added full translations (1,067+ translation keys) for English, Spanish, Swedish, Arabic, French, German, Chinese, Japanese, Portuguese, and Hindi.

🛠️ Bug Fixes & Library Adjustments

  • number-input: Resolved bugs where typing decimals or clearing the field was clobbered by value updates. Added step rounding to prevent floating-point inaccuracies.
  • breadcrumb-item: Fixed breadcrumb separator missing issues and content projection dropouts by refactoring to a single-projection architecture.
  • Workspace Hygiene: Configured .gitattributes to enforce consistent LF line-endings and resolved all codebase Prettier formatting checks.
  • Undici & MCP Integration: Added typescript types and mock clients (MockClient, MockPool, MockInterceptor) to facilitate request testing in @ngxsmk/mcp.

📦 Dependency Upgrades

  • Added @ngx-translate/core and @ngx-translate/http-loader (v18)
  • Updated @ngxsmk/theme and @ngxsmk/mcp packages to v1.3.1
Assets 2
Loading