ngx-radiant 21.0.0 → 21.1.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to Ngx Radiant are documented in this file.
 
+## 21.1.0 - 2026-06-28
+
+### Added
+
+- Mobile horizontal swipe navigation for image galleries.
+- Pinch zoom and mobile double-tap zoom for image items.
+- Lazy-loaded thumbnail images and configurable nearby image preloading.
+- New config options: `swipeNavigation`, `swipeThreshold`, `pinchZoom`, `doubleTapZoom`, `lazyLoad`, `preloadImages`, and `preloadRadius`.
+- Fullscreen toolbar action powered by the browser Fullscreen API.
+- Download and open-original toolbar actions, including optional per-item `downloadName`.
+- Configurable `toolbarActions` plus focus trap and restore-focus accessibility behavior.
+
 ## 21.0.0 - 2026-06-28
 
 ### Added

package/README.md

@@ -1,6 +1,14 @@
 # ngx-radiant
 
-A modern Angular 21+ lightbox library for image galleries and media previews.
+[![npm version](https://img.shields.io/npm/v/ngx-radiant.svg)](https://www.npmjs.com/package/ngx-radiant)
+[![npm downloads](https://img.shields.io/npm/dm/ngx-radiant.svg)](https://www.npmjs.com/package/ngx-radiant)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/edward124689/ngx-radiant/blob/main/LICENSE)
+
+Angular 21+ lightbox gallery library with directive triggers, image zoom, thumbnails, captions, keyboard navigation, video previews, fullscreen toolbar controls, download/open-original actions, and iframe/YouTube embeds.
+
+## Mobile and performance defaults
+
+Ngx Radiant enables swipe navigation, pinch zoom, double-tap zoom, lazy thumbnail loading, and nearby image preloading by default. Disable or tune them through `NgxRadiantConfig` when an app needs stricter behavior.
 
 ## Demo
 
@@ -16,7 +24,7 @@ npm install ngx-radiant
 
 ## Compatibility
 
-- Library version: `21.0.0`
+- Library version: `21.1.0`
 - Angular compatibility: `21+`
 
 ## Component usage
@@ -49,6 +57,12 @@ export class GalleryComponent {
     maxZoom: 8,
     showZoomSlider: true,
     showThumbnails: true,
+    swipeNavigation: true,
+    pinchZoom: true,
+    preloadImages: true,
+    showFullscreenButton: true,
+    showDownload: true,
+    showOpenOriginal: true,
   };
 
   readonly items: NgxRadiantItem[] = [
@@ -89,7 +103,7 @@ export class GalleryComponent {
 }
 ```
 
-Images can zoom beyond the fitted viewport. When zoomed in, users can drag the image to inspect details.
+Images can zoom beyond the fitted viewport. When zoomed in, users can drag the image to inspect details. On touch devices, users can swipe between gallery items, pinch to zoom, and double-tap image items to jump between min/max zoom.
 
 Single-image shorthand automatically hides the counter and previous/next controls:
 
@@ -107,7 +121,7 @@ Single-image shorthand automatically hides the counter and previous/next control
 
 Iframe / YouTube example:
 
-> Iframe sources must be application-controlled. Ngx Radiant only allows `http:`/`https:` iframe URLs by default. Use `iframeAllowedOrigins` when you want a stricter allowlist. Autoplay does not enable muted mode automatically; set `iframeMuted: true` only when you want muted autoplay params.
+> Iframe sources must be application-controlled. Ngx Radiant only allows `http:`/`https:` iframe URLs by default, but empty `iframeAllowedOrigins` means any HTTP(S) origin can render. If iframe data can come from a CMS, database, API response, or user-controlled content, set `iframeAllowedOrigins` to a strict provider list such as `['https://www.youtube.com']`. Autoplay does not enable muted mode automatically; set `iframeMuted: true` only when you want muted autoplay params.
 
 ```ts
 readonly mediaItems: NgxRadiantItem[] = [
@@ -123,12 +137,43 @@ readonly mediaItems: NgxRadiantItem[] = [
 <button
   type="button"
   [ngxRadiant]="mediaItems"
-  [radiantConfig]="{ showCounter: false, showNavigation: false, zoomable: false }"
+  [radiantConfig]="{
+    showCounter: false,
+    showNavigation: false,
+    zoomable: false,
+    iframeAllowedOrigins: ['https://www.youtube.com']
+  }"
 >
   Open YouTube
 </button>
 ```
 
+
+## Toolbar actions
+
+Use `toolbarActions` to choose which built-in controls are visible. Enable optional actions with the matching config flag.
+
+```ts
+const config: NgxRadiantConfig = {
+  showFullscreenButton: true,
+  showDownload: true,
+  showOpenOriginal: true,
+  toolbarActions: ['zoomOut', 'resetZoom', 'zoomIn', 'fullscreen', 'download', 'openOriginal', 'close'],
+};
+
+const items: NgxRadiantItem[] = [
+  {
+    src: '/assets/gallery/aurora.jpg',
+    caption: 'Aurora over a mountain ridge',
+    downloadName: 'aurora.jpg',
+  },
+];
+```
+
+The dialog traps keyboard focus while open and restores focus to the trigger when it closes by default.
+
+Download and open-original actions only run for relative URLs or `http:`/`https:` URLs. Other protocols are ignored for safer defaults.
+
 ## API
 
 ### `NgxRadiantLightbox`
@@ -151,6 +196,20 @@ readonly mediaItems: NgxRadiantItem[] = [
 | `maxZoom` | `number` | `3` | Maximum image zoom level. Overrides `config.maxZoom`. |
 | `zoomStep` | `number` | `0.25` | Amount changed by each zoom in/out action. Overrides `config.zoomStep`. |
 | `showZoomSlider` | `boolean` | `false` | Render a range slider for direct zoom control. Overrides `config.showZoomSlider`. |
+| `swipeNavigation` | `boolean` | `true` | Enable horizontal swipe navigation on image galleries. Overrides `config.swipeNavigation`. |
+| `swipeThreshold` | `number` | `48` | Minimum horizontal swipe distance in pixels. Overrides `config.swipeThreshold`. |
+| `pinchZoom` | `boolean` | `true` | Enable two-finger pinch zoom on image items. Overrides `config.pinchZoom`. |
+| `doubleTapZoom` | `boolean` | `true` | Enable mobile double-tap zoom toggling on image items. Overrides `config.doubleTapZoom`. |
+| `lazyLoad` | `boolean` | `true` | Lazy-load thumbnails and mark the active image as eager. Overrides `config.lazyLoad`. |
+| `preloadImages` | `boolean` | `true` | Preload nearby image items for faster navigation. Overrides `config.preloadImages`. |
+| `preloadRadius` | `number` | `1` | Number of previous/next image items to preload. Overrides `config.preloadRadius`. |
+| `toolbarActions` | `NgxRadiantToolbarAction[]` | built-in action list | Choose which toolbar actions are visible. Overrides `config.toolbarActions`. |
+| `fullscreen` | `boolean` | `true` | Enable Fullscreen API support. Overrides `config.fullscreen`. |
+| `showFullscreenButton` | `boolean` | `true` | Render the fullscreen toolbar action when supported. Overrides `config.showFullscreenButton`. |
+| `showDownload` | `boolean` | `false` | Render the download toolbar action. Overrides `config.showDownload`. |
+| `showOpenOriginal` | `boolean` | `false` | Render the open-original toolbar action. Overrides `config.showOpenOriginal`. |
+| `trapFocus` | `boolean` | `true` | Keep Tab focus inside the open dialog. Overrides `config.trapFocus`. |
+| `restoreFocus` | `boolean` | `true` | Restore focus to the previous active element on close. Overrides `config.restoreFocus`. |
 | `iframeAspectRatio` | `string` | `'16 / 9'` | CSS aspect-ratio for iframe embeds. Overrides `config.iframeAspectRatio`. |
 | `iframeAutoplay` | `boolean` | `false` | Appends `autoplay=1` to iframe URLs. Overrides `config.iframeAutoplay`. |
 | `iframeMuted` | `boolean` | `false` | Appends `mute=1&muted=1` only when explicitly enabled. Overrides `config.iframeMuted`. |
@@ -189,6 +248,20 @@ interface NgxRadiantConfig {
   maxZoom?: number;
   zoomStep?: number;
   showZoomSlider?: boolean;
+  swipeNavigation?: boolean;
+  swipeThreshold?: number;
+  pinchZoom?: boolean;
+  doubleTapZoom?: boolean;
+  lazyLoad?: boolean;
+  preloadImages?: boolean;
+  preloadRadius?: number;
+  toolbarActions?: NgxRadiantToolbarAction[];
+  fullscreen?: boolean;
+  showFullscreenButton?: boolean;
+  showDownload?: boolean;
+  showOpenOriginal?: boolean;
+  trapFocus?: boolean;
+  restoreFocus?: boolean;
   iframeAspectRatio?: string;
   iframeAutoplay?: boolean;
   iframeMuted?: boolean;
@@ -205,6 +278,7 @@ interface NgxRadiantItem {
   alt?: string;
   caption?: string;
   thumb?: string;
+  downloadName?: string;
 }
 ```