ngx-radiant 21.0.0

package/fesm2022/ngx-radiant.mjs

@@ -0,0 +1,721 @@
+import { NgClass, DOCUMENT, isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, output, inject, viewChild, signal, computed, effect, ChangeDetectionStrategy, Component, ApplicationRef, EnvironmentInjector, DestroyRef, PLATFORM_ID, createComponent, HostListener, Directive } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+const NGX_RADIANT_DEFAULT_CONFIG = {
+    ariaLabel: 'Image gallery lightbox',
+    closeOnEscape: true,
+    loop: true,
+    showThumbnails: true,
+    showCounter: true,
+    showNavigation: true,
+    zoomable: true,
+    initialZoom: 1,
+    minZoom: 1,
+    maxZoom: 3,
+    zoomStep: 0.25,
+    showZoomSlider: false,
+    iframeAspectRatio: '16 / 9',
+    iframeAutoplay: false,
+    iframeMuted: false,
+    iframeAllowedOrigins: [],
+};
+class NgxRadiantLightbox {
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    config = input(null, ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    closeOnEscape = input(undefined, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
+    loop = input(undefined, ...(ngDevMode ? [{ debugName: "loop" }] : /* istanbul ignore next */ []));
+    showThumbnails = input(undefined, ...(ngDevMode ? [{ debugName: "showThumbnails" }] : /* istanbul ignore next */ []));
+    showCounter = input(undefined, ...(ngDevMode ? [{ debugName: "showCounter" }] : /* istanbul ignore next */ []));
+    showNavigation = input(undefined, ...(ngDevMode ? [{ debugName: "showNavigation" }] : /* istanbul ignore next */ []));
+    zoomable = input(undefined, ...(ngDevMode ? [{ debugName: "zoomable" }] : /* istanbul ignore next */ []));
+    initialZoom = input(undefined, ...(ngDevMode ? [{ debugName: "initialZoom" }] : /* istanbul ignore next */ []));
+    minZoom = input(undefined, ...(ngDevMode ? [{ debugName: "minZoom" }] : /* istanbul ignore next */ []));
+    maxZoom = input(undefined, ...(ngDevMode ? [{ debugName: "maxZoom" }] : /* istanbul ignore next */ []));
+    zoomStep = input(undefined, ...(ngDevMode ? [{ debugName: "zoomStep" }] : /* istanbul ignore next */ []));
+    showZoomSlider = input(undefined, ...(ngDevMode ? [{ debugName: "showZoomSlider" }] : /* istanbul ignore next */ []));
+    iframeAspectRatio = input(undefined, ...(ngDevMode ? [{ debugName: "iframeAspectRatio" }] : /* istanbul ignore next */ []));
+    iframeAutoplay = input(undefined, ...(ngDevMode ? [{ debugName: "iframeAutoplay" }] : /* istanbul ignore next */ []));
+    iframeMuted = input(undefined, ...(ngDevMode ? [{ debugName: "iframeMuted" }] : /* istanbul ignore next */ []));
+    iframeAllowedOrigins = input(undefined, ...(ngDevMode ? [{ debugName: "iframeAllowedOrigins" }] : /* istanbul ignore next */ []));
+    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    index = input(0, ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    openChange = output();
+    indexChange = output();
+    closed = output();
+    sanitizer = inject(DomSanitizer);
+    zoomMedia = viewChild('zoomMedia', ...(ngDevMode ? [{ debugName: "zoomMedia" }] : /* istanbul ignore next */ []));
+    zoomLevel = signal(1, ...(ngDevMode ? [{ debugName: "zoomLevel" }] : /* istanbul ignore next */ []));
+    panX = signal(0, ...(ngDevMode ? [{ debugName: "panX" }] : /* istanbul ignore next */ []));
+    panY = signal(0, ...(ngDevMode ? [{ debugName: "panY" }] : /* istanbul ignore next */ []));
+    dragging = signal(false, ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    dragStart = null;
+    resolvedConfig = computed(() => {
+        const config = this.config() ?? {};
+        return {
+            ...NGX_RADIANT_DEFAULT_CONFIG,
+            ...config,
+            ariaLabel: this.ariaLabel() ?? config.ariaLabel ?? NGX_RADIANT_DEFAULT_CONFIG.ariaLabel,
+            closeOnEscape: this.closeOnEscape() ?? config.closeOnEscape ?? NGX_RADIANT_DEFAULT_CONFIG.closeOnEscape,
+            loop: this.loop() ?? config.loop ?? NGX_RADIANT_DEFAULT_CONFIG.loop,
+            showThumbnails: this.showThumbnails() ?? config.showThumbnails ?? NGX_RADIANT_DEFAULT_CONFIG.showThumbnails,
+            showCounter: this.showCounter() ?? config.showCounter ?? NGX_RADIANT_DEFAULT_CONFIG.showCounter,
+            showNavigation: this.showNavigation() ?? config.showNavigation ?? NGX_RADIANT_DEFAULT_CONFIG.showNavigation,
+            zoomable: this.zoomable() ?? config.zoomable ?? NGX_RADIANT_DEFAULT_CONFIG.zoomable,
+            initialZoom: this.initialZoom() ?? config.initialZoom ?? NGX_RADIANT_DEFAULT_CONFIG.initialZoom,
+            minZoom: this.minZoom() ?? config.minZoom ?? NGX_RADIANT_DEFAULT_CONFIG.minZoom,
+            maxZoom: this.maxZoom() ?? config.maxZoom ?? NGX_RADIANT_DEFAULT_CONFIG.maxZoom,
+            zoomStep: this.zoomStep() ?? config.zoomStep ?? NGX_RADIANT_DEFAULT_CONFIG.zoomStep,
+            showZoomSlider: this.showZoomSlider() ?? config.showZoomSlider ?? NGX_RADIANT_DEFAULT_CONFIG.showZoomSlider,
+            iframeAspectRatio: this.iframeAspectRatio() ?? config.iframeAspectRatio ?? NGX_RADIANT_DEFAULT_CONFIG.iframeAspectRatio,
+            iframeAutoplay: this.iframeAutoplay() ?? config.iframeAutoplay ?? NGX_RADIANT_DEFAULT_CONFIG.iframeAutoplay,
+            iframeMuted: this.iframeMuted() ?? config.iframeMuted ?? NGX_RADIANT_DEFAULT_CONFIG.iframeMuted,
+            iframeAllowedOrigins: this.iframeAllowedOrigins() ?? config.iframeAllowedOrigins ?? NGX_RADIANT_DEFAULT_CONFIG.iframeAllowedOrigins,
+        };
+    }, ...(ngDevMode ? [{ debugName: "resolvedConfig" }] : /* istanbul ignore next */ []));
+    currentIndex = computed(() => this.normalizeIndex(this.index()), ...(ngDevMode ? [{ debugName: "currentIndex" }] : /* istanbul ignore next */ []));
+    currentItem = computed(() => this.items()[this.currentIndex()] ?? { src: '' }, ...(ngDevMode ? [{ debugName: "currentItem" }] : /* istanbul ignore next */ []));
+    canNavigate = computed(() => this.items().length > 1, ...(ngDevMode ? [{ debugName: "canNavigate" }] : /* istanbul ignore next */ []));
+    canZoom = computed(() => this.resolvedConfig().zoomable && (this.currentItem().type ?? 'image') === 'image', ...(ngDevMode ? [{ debugName: "canZoom" }] : /* istanbul ignore next */ []));
+    zoomPercent = computed(() => Math.round(this.zoomLevel() * 100), ...(ngDevMode ? [{ debugName: "zoomPercent" }] : /* istanbul ignore next */ []));
+    zoomTransform = computed(() => `translate(${this.panX()}px, ${this.panY()}px) scale(${this.zoomLevel()})`, ...(ngDevMode ? [{ debugName: "zoomTransform" }] : /* istanbul ignore next */ []));
+    resolvedMinZoom = computed(() => Math.max(this.resolvedConfig().minZoom, 0.1), ...(ngDevMode ? [{ debugName: "resolvedMinZoom" }] : /* istanbul ignore next */ []));
+    resolvedMaxZoom = computed(() => Math.max(this.resolvedConfig().maxZoom, this.resolvedMinZoom()), ...(ngDevMode ? [{ debugName: "resolvedMaxZoom" }] : /* istanbul ignore next */ []));
+    resolvedZoomStep = computed(() => Math.max(this.resolvedConfig().zoomStep, 0.01), ...(ngDevMode ? [{ debugName: "resolvedZoomStep" }] : /* istanbul ignore next */ []));
+    resolvedIframeAspectRatio = computed(() => this.resolvedConfig().iframeAspectRatio, ...(ngDevMode ? [{ debugName: "resolvedIframeAspectRatio" }] : /* istanbul ignore next */ []));
+    trustedFrameSrc = computed(() => this.sanitizer.bypassSecurityTrustResourceUrl(this.resolveFrameSrc()), ...(ngDevMode ? [{ debugName: "trustedFrameSrc" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => this.resolvedConfig().ariaLabel, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    resolvedShowThumbnails = computed(() => this.resolvedConfig().showThumbnails, ...(ngDevMode ? [{ debugName: "resolvedShowThumbnails" }] : /* istanbul ignore next */ []));
+    showCounterControl = computed(() => this.resolvedConfig().showCounter, ...(ngDevMode ? [{ debugName: "showCounterControl" }] : /* istanbul ignore next */ []));
+    showNavigationControl = computed(() => this.resolvedConfig().showNavigation, ...(ngDevMode ? [{ debugName: "showNavigationControl" }] : /* istanbul ignore next */ []));
+    showZoomSliderControl = computed(() => this.resolvedConfig().showZoomSlider, ...(ngDevMode ? [{ debugName: "showZoomSliderControl" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            this.open();
+            this.currentIndex();
+            this.currentItem().src;
+            const config = this.resolvedConfig();
+            this.zoomLevel.set(this.clampZoom(config.initialZoom));
+            this.resetPan();
+        });
+    }
+    openAt(index) {
+        this.indexChange.emit(this.normalizeIndex(index));
+        this.openChange.emit(this.items().length > 0);
+    }
+    close() {
+        if (!this.open()) {
+            return;
+        }
+        this.openChange.emit(false);
+        this.closed.emit();
+    }
+    next() {
+        this.goTo(this.currentIndex() + 1);
+    }
+    previous() {
+        this.goTo(this.currentIndex() - 1);
+    }
+    goTo(index) {
+        if (!this.canNavigate()) {
+            return;
+        }
+        const itemCount = this.items().length;
+        const nextIndex = this.resolvedConfig().loop
+            ? (index + itemCount) % itemCount
+            : Math.min(Math.max(index, 0), itemCount - 1);
+        this.indexChange.emit(nextIndex);
+    }
+    zoomIn() {
+        if (!this.canZoom()) {
+            return;
+        }
+        this.setZoom(this.zoomLevel() + this.resolvedZoomStep());
+    }
+    zoomOut() {
+        if (!this.canZoom()) {
+            return;
+        }
+        this.setZoom(this.zoomLevel() - this.resolvedZoomStep());
+    }
+    resetZoom() {
+        this.zoomLevel.set(this.clampZoom(this.resolvedConfig().initialZoom));
+        this.resetPan();
+    }
+    setZoomFromInput(event) {
+        const input = event.target;
+        this.setZoom(Number(input.value));
+    }
+    setZoom(zoom) {
+        const nextZoom = this.clampZoom(zoom);
+        this.zoomLevel.set(nextZoom);
+        if (nextZoom <= this.resolvedMinZoom()) {
+            this.resetPan();
+            return;
+        }
+        this.clampCurrentPan();
+    }
+    toggleZoom() {
+        if (!this.canZoom()) {
+            return;
+        }
+        this.setZoom(this.zoomLevel() > this.resolvedMinZoom() ? this.resolvedMinZoom() : this.resolvedMaxZoom());
+    }
+    startPan(event) {
+        if (!this.canPan()) {
+            return;
+        }
+        event.preventDefault();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        this.dragStart = {
+            pointerId: event.pointerId,
+            x: event.clientX,
+            y: event.clientY,
+            panX: this.panX(),
+            panY: this.panY(),
+        };
+        this.dragging.set(true);
+    }
+    movePan(event) {
+        if (!this.dragStart || this.dragStart.pointerId !== event.pointerId) {
+            return;
+        }
+        event.preventDefault();
+        const bounds = this.getPanBounds(event.currentTarget);
+        this.panX.set(this.clamp(this.dragStart.panX + event.clientX - this.dragStart.x, -bounds.x, bounds.x));
+        this.panY.set(this.clamp(this.dragStart.panY + event.clientY - this.dragStart.y, -bounds.y, bounds.y));
+    }
+    endPan(event) {
+        if (this.dragStart?.pointerId === event.pointerId) {
+            this.dragStart = null;
+            this.dragging.set(false);
+        }
+    }
+    handleKeydown(event) {
+        if (event.key === 'Escape' && this.resolvedConfig().closeOnEscape) {
+            event.preventDefault();
+            this.close();
+            return;
+        }
+        if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            this.next();
+            return;
+        }
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            this.previous();
+            return;
+        }
+        if (event.key === '+' || event.key === '=') {
+            event.preventDefault();
+            this.zoomIn();
+            return;
+        }
+        if (event.key === '-' || event.key === '_') {
+            event.preventDefault();
+            this.zoomOut();
+            return;
+        }
+        if (event.key === '0') {
+            event.preventDefault();
+            this.resetZoom();
+        }
+    }
+    resolveFrameSrc() {
+        const config = this.resolvedConfig();
+        const source = this.currentItem().src;
+        const baseHref = this.getBaseHref();
+        try {
+            const url = new URL(source, baseHref);
+            if (url.protocol !== 'http:' && url.protocol !== 'https:') {
+                return 'about:blank';
+            }
+            if (config.iframeAllowedOrigins.length > 0 && !config.iframeAllowedOrigins.includes(url.origin)) {
+                return 'about:blank';
+            }
+            if (config.iframeAutoplay) {
+                url.searchParams.set('autoplay', '1');
+            }
+            if (config.iframeMuted) {
+                url.searchParams.set('mute', '1');
+                url.searchParams.set('muted', '1');
+            }
+            return this.isRelativeUrl(source) ? `${url.pathname}${url.search}${url.hash}` : url.toString();
+        }
+        catch {
+            return 'about:blank';
+        }
+    }
+    getBaseHref() {
+        return typeof globalThis.location !== 'undefined' ? globalThis.location.origin : 'http://localhost';
+    }
+    isRelativeUrl(url) {
+        return !/^[a-z][a-z\d+.-]*:/i.test(url) && !url.startsWith('//');
+    }
+    clampCurrentPan() {
+        if (!this.open()) {
+            return;
+        }
+        const media = this.zoomMedia()?.nativeElement;
+        if (!media) {
+            return;
+        }
+        const bounds = this.getPanBounds(media);
+        this.panX.set(this.clamp(this.panX(), -bounds.x, bounds.x));
+        this.panY.set(this.clamp(this.panY(), -bounds.y, bounds.y));
+    }
+    getPanBounds(media) {
+        const stage = media.parentElement;
+        const zoom = this.zoomLevel();
+        const mediaWidth = media.clientWidth || media.getBoundingClientRect().width;
+        const mediaHeight = media.clientHeight || media.getBoundingClientRect().height;
+        const stageWidth = stage?.clientWidth || mediaWidth;
+        const stageHeight = stage?.clientHeight || mediaHeight;
+        return {
+            x: Math.max((mediaWidth * zoom - stageWidth) / 2, 0),
+            y: Math.max((mediaHeight * zoom - stageHeight) / 2, 0),
+        };
+    }
+    clamp(value, min, max) {
+        return Math.min(Math.max(value, min), max);
+    }
+    normalizeIndex(index) {
+        const itemCount = this.items().length;
+        if (itemCount === 0) {
+            return 0;
+        }
+        return Math.min(Math.max(Math.trunc(index) || 0, 0), itemCount - 1);
+    }
+    clampZoom(zoom) {
+        const minZoom = this.resolvedMinZoom();
+        const maxZoom = this.resolvedMaxZoom();
+        return Math.min(Math.max(Number.isFinite(zoom) ? zoom : this.resolvedConfig().initialZoom, minZoom), maxZoom);
+    }
+    canPan() {
+        return this.canZoom() && this.zoomLevel() > this.resolvedMinZoom();
+    }
+    resetPan() {
+        this.panX.set(0);
+        this.panY.set(0);
+        this.dragStart = null;
+        this.dragging.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NgxRadiantLightbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: NgxRadiantLightbox, isStandalone: true, selector: "ngx-radiant-lightbox", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, showThumbnails: { classPropertyName: "showThumbnails", publicName: "showThumbnails", isSignal: true, isRequired: false, transformFunction: null }, showCounter: { classPropertyName: "showCounter", publicName: "showCounter", isSignal: true, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, zoomable: { classPropertyName: "zoomable", publicName: "zoomable", isSignal: true, isRequired: false, transformFunction: null }, initialZoom: { classPropertyName: "initialZoom", publicName: "initialZoom", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, zoomStep: { classPropertyName: "zoomStep", publicName: "zoomStep", isSignal: true, isRequired: false, transformFunction: null }, showZoomSlider: { classPropertyName: "showZoomSlider", publicName: "showZoomSlider", isSignal: true, isRequired: false, transformFunction: null }, iframeAspectRatio: { classPropertyName: "iframeAspectRatio", publicName: "iframeAspectRatio", isSignal: true, isRequired: false, transformFunction: null }, iframeAutoplay: { classPropertyName: "iframeAutoplay", publicName: "iframeAutoplay", isSignal: true, isRequired: false, transformFunction: null }, iframeMuted: { classPropertyName: "iframeMuted", publicName: "iframeMuted", isSignal: true, isRequired: false, transformFunction: null }, iframeAllowedOrigins: { classPropertyName: "iframeAllowedOrigins", publicName: "iframeAllowedOrigins", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange", indexChange: "indexChange", closed: "closed" }, host: { properties: { "class.ngx-radiant-host-open": "open()" } }, viewQueries: [{ propertyName: "zoomMedia", first: true, predicate: ["zoomMedia"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (open()) {
+      <div class="ngx-radiant" role="dialog" aria-modal="true" [attr.aria-label]="resolvedAriaLabel()">
+        <button
+          type="button"
+          class="ngx-radiant__backdrop"
+          aria-label="Close lightbox"
+          (click)="close()"
+        ></button>
+
+        <div class="ngx-radiant__shell" (keydown)="handleKeydown($event)" tabindex="-1">
+          <header class="ngx-radiant__toolbar">
+            <div class="ngx-radiant__toolbar-start">
+              @if (showCounterControl() && canNavigate()) {
+                <div class="ngx-radiant__counter" aria-live="polite">
+                  {{ currentIndex() + 1 }} / {{ items().length }}
+                </div>
+              }
+            </div>
+
+            <div class="ngx-radiant__toolbar-actions">
+              @if (canZoom()) {
+                <div class="ngx-radiant__zoom-controls" aria-label="Image zoom controls">
+                  <button type="button" class="ngx-radiant__button" aria-label="Zoom out" (click)="zoomOut()">−</button>
+                  <button type="button" class="ngx-radiant__zoom-value" aria-label="Reset zoom" (click)="resetZoom()">
+                    {{ zoomPercent() }}%
+                  </button>
+                  <button type="button" class="ngx-radiant__button" aria-label="Zoom in" (click)="zoomIn()">+</button>
+                  @if (showZoomSliderControl()) {
+                    <label class="ngx-radiant__zoom-slider-label">
+                      <span>Zoom</span>
+                      <input
+                        class="ngx-radiant__zoom-slider"
+                        type="range"
+                        [min]="resolvedMinZoom()"
+                        [max]="resolvedMaxZoom()"
+                        [step]="resolvedZoomStep()"
+                        [value]="zoomLevel()"
+                        aria-label="Zoom level"
+                        (input)="setZoomFromInput($event)"
+                      />
+                    </label>
+                  }
+                </div>
+              }
+
+              <button type="button" class="ngx-radiant__button" aria-label="Close" (click)="close()">
+                ×
+              </button>
+            </div>
+          </header>
+
+          @if (showNavigationControl() && canNavigate()) {
+            <button
+              type="button"
+              class="ngx-radiant__nav ngx-radiant__nav--prev"
+              aria-label="Previous item"
+              (click)="previous()"
+            >
+              ‹
+            </button>
+          }
+
+          <figure class="ngx-radiant__stage">
+            @switch (currentItem().type ?? 'image') {
+              @case ('video') {
+                <video class="ngx-radiant__media" [src]="currentItem().src" controls playsinline></video>
+              }
+              @case ('iframe') {
+                <iframe
+                  class="ngx-radiant__frame"
+                  [src]="trustedFrameSrc()"
+                  [style.aspect-ratio]="resolvedIframeAspectRatio()"
+                  title="Ngx Radiant embedded content"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowfullscreen
+                ></iframe>
+              }
+              @default {
+                <img
+                  #zoomMedia
+                  class="ngx-radiant__media"
+                  [style.transform]="zoomTransform()"
+                  [class.ngx-radiant__media--zoomed]="zoomLevel() > 1"
+                  [class.ngx-radiant__media--dragging]="dragging()"
+                  [src]="currentItem().src"
+                  [alt]="currentItem().alt ?? currentItem().caption ?? ''"
+                  draggable="false"
+                  (dblclick)="toggleZoom()"
+                  (pointerdown)="startPan($event)"
+                  (pointermove)="movePan($event)"
+                  (pointerup)="endPan($event)"
+                  (pointercancel)="endPan($event)"
+                  (lostpointercapture)="endPan($event)"
+                />
+              }
+            }
+
+            @if (currentItem().caption) {
+              <figcaption class="ngx-radiant__caption">{{ currentItem().caption }}</figcaption>
+            }
+          </figure>
+
+          @if (showNavigationControl() && canNavigate()) {
+            <button
+              type="button"
+              class="ngx-radiant__nav ngx-radiant__nav--next"
+              aria-label="Next item"
+              (click)="next()"
+            >
+              ›
+            </button>
+          }
+
+          @if (resolvedShowThumbnails() && items().length > 1) {
+            <footer class="ngx-radiant__thumbs" aria-label="Lightbox thumbnails">
+              @for (item of items(); track item.src; let index = $index) {
+                <button
+                  type="button"
+                  class="ngx-radiant__thumb"
+                  [ngClass]="{ 'ngx-radiant__thumb--active': index === currentIndex() }"
+                  [attr.aria-label]="'Open item ' + (index + 1)"
+                  [attr.aria-current]="index === currentIndex() ? 'true' : null"
+                  (click)="goTo(index)"
+                >
+                  <img [src]="item.thumb ?? item.src" [alt]="item.alt ?? ''" />
+                </button>
+              }
+            </footer>
+          }
+        </div>
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:contents}.ngx-radiant{position:fixed;inset:0;z-index:var(--ngx-radiant-z-index, 1000);display:grid;place-items:center;color:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.ngx-radiant__backdrop{position:absolute;inset:0;border:0;background:color-mix(in srgb,#020617 88%,transparent);cursor:zoom-out}.ngx-radiant__shell{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto;width:min(94vw,1180px);height:min(92vh,840px);gap:1rem;outline:none}.ngx-radiant__toolbar{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:1rem}.ngx-radiant__toolbar-start,.ngx-radiant__toolbar-actions,.ngx-radiant__zoom-controls{display:flex;align-items:center;gap:.5rem}.ngx-radiant__zoom-slider-label{display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgb(255 255 255 / 18%);border-radius:999px;background:#0f172ab8;padding:.35rem .65rem;box-shadow:0 18px 50px #00000047;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.ngx-radiant__zoom-slider-label span{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.ngx-radiant__zoom-slider{width:min(22vw,12rem);accent-color:var(--ngx-radiant-accent, #67e8f9)}.ngx-radiant__toolbar-start{min-width:0}.ngx-radiant__toolbar-actions{margin-left:auto}.ngx-radiant__counter,.ngx-radiant__button,.ngx-radiant__zoom-value,.ngx-radiant__nav{border:1px solid rgb(255 255 255 / 18%);border-radius:999px;background:#0f172ab8;color:inherit;box-shadow:0 18px 50px #00000047;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.ngx-radiant__counter,.ngx-radiant__zoom-value{padding:.55rem .9rem;font-size:.86rem;letter-spacing:.08em;text-transform:uppercase}.ngx-radiant__button,.ngx-radiant__zoom-value,.ngx-radiant__nav{cursor:pointer;transition:transform .16s ease,background .16s ease,opacity .16s ease}.ngx-radiant__button{width:2.6rem;height:2.6rem;font-size:1.35rem;line-height:1}.ngx-radiant__zoom-value{min-width:4.4rem}.ngx-radiant__nav{align-self:center;width:3rem;height:3rem;border:0;font-size:2.6rem;line-height:1}.ngx-radiant__button:hover,.ngx-radiant__zoom-value:hover,.ngx-radiant__nav:hover,.ngx-radiant__thumb:hover{transform:translateY(-1px);background:#1e293bdb}.ngx-radiant__stage{grid-column:2;grid-row:2;display:grid;place-items:center;overflow:hidden;min-width:0;min-height:0;margin:0}.ngx-radiant__media,.ngx-radiant__frame{max-width:100%;max-height:100%;border:0;border-radius:1.25rem;background:#020617;box-shadow:0 28px 80px #0000006b}.ngx-radiant__media{transform-origin:center center;transition:transform .18s ease}.ngx-radiant__media--zoomed{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.ngx-radiant__media--dragging{cursor:grabbing;transition:none}.ngx-radiant__frame{width:min(100%,960px);height:auto;max-height:100%}.ngx-radiant__caption{justify-self:center;max-width:min(80ch,84vw);margin-top:.85rem;padding:.6rem .9rem;border-radius:999px;background:#0f172aad;color:#e2e8f0;text-align:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.ngx-radiant__thumbs{grid-column:1 / -1;display:flex;justify-content:center;gap:.5rem;overflow-x:auto;padding:.25rem}.ngx-radiant__thumb{width:4rem;height:3rem;flex:0 0 auto;overflow:hidden;border:1px solid rgb(255 255 255 / 14%);border-radius:.7rem;background:#0f172ab3;cursor:pointer;opacity:.68;padding:0;transition:.16s ease}.ngx-radiant__thumb--active{border-color:var(--ngx-radiant-accent, #67e8f9);box-shadow:0 0 0 2px color-mix(in srgb,var(--ngx-radiant-accent, #67e8f9) 30%,transparent);opacity:1}.ngx-radiant__thumb img{width:100%;height:100%;object-fit:cover;display:block}@media(max-width:720px){.ngx-radiant__shell{width:96vw;height:94vh;grid-template-columns:1fr 1fr}.ngx-radiant__toolbar{align-items:flex-start}.ngx-radiant__toolbar-actions,.ngx-radiant__zoom-controls{flex-wrap:wrap;justify-content:flex-end}.ngx-radiant__zoom-slider{width:8rem}.ngx-radiant__stage{grid-column:1 / -1}.ngx-radiant__nav{grid-row:3;justify-self:center}.ngx-radiant__nav--prev{grid-column:1}.ngx-radiant__nav--next{grid-column:2}.ngx-radiant__thumbs{display:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NgxRadiantLightbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-radiant-lightbox', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.ngx-radiant-host-open]': 'open()',
+                    }, template: `
+    @if (open()) {
+      <div class="ngx-radiant" role="dialog" aria-modal="true" [attr.aria-label]="resolvedAriaLabel()">
+        <button
+          type="button"
+          class="ngx-radiant__backdrop"
+          aria-label="Close lightbox"
+          (click)="close()"
+        ></button>
+
+        <div class="ngx-radiant__shell" (keydown)="handleKeydown($event)" tabindex="-1">
+          <header class="ngx-radiant__toolbar">
+            <div class="ngx-radiant__toolbar-start">
+              @if (showCounterControl() && canNavigate()) {
+                <div class="ngx-radiant__counter" aria-live="polite">
+                  {{ currentIndex() + 1 }} / {{ items().length }}
+                </div>
+              }
+            </div>
+
+            <div class="ngx-radiant__toolbar-actions">
+              @if (canZoom()) {
+                <div class="ngx-radiant__zoom-controls" aria-label="Image zoom controls">
+                  <button type="button" class="ngx-radiant__button" aria-label="Zoom out" (click)="zoomOut()">−</button>
+                  <button type="button" class="ngx-radiant__zoom-value" aria-label="Reset zoom" (click)="resetZoom()">
+                    {{ zoomPercent() }}%
+                  </button>
+                  <button type="button" class="ngx-radiant__button" aria-label="Zoom in" (click)="zoomIn()">+</button>
+                  @if (showZoomSliderControl()) {
+                    <label class="ngx-radiant__zoom-slider-label">
+                      <span>Zoom</span>
+                      <input
+                        class="ngx-radiant__zoom-slider"
+                        type="range"
+                        [min]="resolvedMinZoom()"
+                        [max]="resolvedMaxZoom()"
+                        [step]="resolvedZoomStep()"
+                        [value]="zoomLevel()"
+                        aria-label="Zoom level"
+                        (input)="setZoomFromInput($event)"
+                      />
+                    </label>
+                  }
+                </div>
+              }
+
+              <button type="button" class="ngx-radiant__button" aria-label="Close" (click)="close()">
+                ×
+              </button>
+            </div>
+          </header>
+
+          @if (showNavigationControl() && canNavigate()) {
+            <button
+              type="button"
+              class="ngx-radiant__nav ngx-radiant__nav--prev"
+              aria-label="Previous item"
+              (click)="previous()"
+            >
+              ‹
+            </button>
+          }
+
+          <figure class="ngx-radiant__stage">
+            @switch (currentItem().type ?? 'image') {
+              @case ('video') {
+                <video class="ngx-radiant__media" [src]="currentItem().src" controls playsinline></video>
+              }
+              @case ('iframe') {
+                <iframe
+                  class="ngx-radiant__frame"
+                  [src]="trustedFrameSrc()"
+                  [style.aspect-ratio]="resolvedIframeAspectRatio()"
+                  title="Ngx Radiant embedded content"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowfullscreen
+                ></iframe>
+              }
+              @default {
+                <img
+                  #zoomMedia
+                  class="ngx-radiant__media"
+                  [style.transform]="zoomTransform()"
+                  [class.ngx-radiant__media--zoomed]="zoomLevel() > 1"
+                  [class.ngx-radiant__media--dragging]="dragging()"
+                  [src]="currentItem().src"
+                  [alt]="currentItem().alt ?? currentItem().caption ?? ''"
+                  draggable="false"
+                  (dblclick)="toggleZoom()"
+                  (pointerdown)="startPan($event)"
+                  (pointermove)="movePan($event)"
+                  (pointerup)="endPan($event)"
+                  (pointercancel)="endPan($event)"
+                  (lostpointercapture)="endPan($event)"
+                />
+              }
+            }
+
+            @if (currentItem().caption) {
+              <figcaption class="ngx-radiant__caption">{{ currentItem().caption }}</figcaption>
+            }
+          </figure>
+
+          @if (showNavigationControl() && canNavigate()) {
+            <button
+              type="button"
+              class="ngx-radiant__nav ngx-radiant__nav--next"
+              aria-label="Next item"
+              (click)="next()"
+            >
+              ›
+            </button>
+          }
+
+          @if (resolvedShowThumbnails() && items().length > 1) {
+            <footer class="ngx-radiant__thumbs" aria-label="Lightbox thumbnails">
+              @for (item of items(); track item.src; let index = $index) {
+                <button
+                  type="button"
+                  class="ngx-radiant__thumb"
+                  [ngClass]="{ 'ngx-radiant__thumb--active': index === currentIndex() }"
+                  [attr.aria-label]="'Open item ' + (index + 1)"
+                  [attr.aria-current]="index === currentIndex() ? 'true' : null"
+                  (click)="goTo(index)"
+                >
+                  <img [src]="item.thumb ?? item.src" [alt]="item.alt ?? ''" />
+                </button>
+              }
+            </footer>
+          }
+        </div>
+      </div>
+    }
+  `, styles: [":host{display:contents}.ngx-radiant{position:fixed;inset:0;z-index:var(--ngx-radiant-z-index, 1000);display:grid;place-items:center;color:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.ngx-radiant__backdrop{position:absolute;inset:0;border:0;background:color-mix(in srgb,#020617 88%,transparent);cursor:zoom-out}.ngx-radiant__shell{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto;width:min(94vw,1180px);height:min(92vh,840px);gap:1rem;outline:none}.ngx-radiant__toolbar{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:1rem}.ngx-radiant__toolbar-start,.ngx-radiant__toolbar-actions,.ngx-radiant__zoom-controls{display:flex;align-items:center;gap:.5rem}.ngx-radiant__zoom-slider-label{display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgb(255 255 255 / 18%);border-radius:999px;background:#0f172ab8;padding:.35rem .65rem;box-shadow:0 18px 50px #00000047;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.ngx-radiant__zoom-slider-label span{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.ngx-radiant__zoom-slider{width:min(22vw,12rem);accent-color:var(--ngx-radiant-accent, #67e8f9)}.ngx-radiant__toolbar-start{min-width:0}.ngx-radiant__toolbar-actions{margin-left:auto}.ngx-radiant__counter,.ngx-radiant__button,.ngx-radiant__zoom-value,.ngx-radiant__nav{border:1px solid rgb(255 255 255 / 18%);border-radius:999px;background:#0f172ab8;color:inherit;box-shadow:0 18px 50px #00000047;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.ngx-radiant__counter,.ngx-radiant__zoom-value{padding:.55rem .9rem;font-size:.86rem;letter-spacing:.08em;text-transform:uppercase}.ngx-radiant__button,.ngx-radiant__zoom-value,.ngx-radiant__nav{cursor:pointer;transition:transform .16s ease,background .16s ease,opacity .16s ease}.ngx-radiant__button{width:2.6rem;height:2.6rem;font-size:1.35rem;line-height:1}.ngx-radiant__zoom-value{min-width:4.4rem}.ngx-radiant__nav{align-self:center;width:3rem;height:3rem;border:0;font-size:2.6rem;line-height:1}.ngx-radiant__button:hover,.ngx-radiant__zoom-value:hover,.ngx-radiant__nav:hover,.ngx-radiant__thumb:hover{transform:translateY(-1px);background:#1e293bdb}.ngx-radiant__stage{grid-column:2;grid-row:2;display:grid;place-items:center;overflow:hidden;min-width:0;min-height:0;margin:0}.ngx-radiant__media,.ngx-radiant__frame{max-width:100%;max-height:100%;border:0;border-radius:1.25rem;background:#020617;box-shadow:0 28px 80px #0000006b}.ngx-radiant__media{transform-origin:center center;transition:transform .18s ease}.ngx-radiant__media--zoomed{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.ngx-radiant__media--dragging{cursor:grabbing;transition:none}.ngx-radiant__frame{width:min(100%,960px);height:auto;max-height:100%}.ngx-radiant__caption{justify-self:center;max-width:min(80ch,84vw);margin-top:.85rem;padding:.6rem .9rem;border-radius:999px;background:#0f172aad;color:#e2e8f0;text-align:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.ngx-radiant__thumbs{grid-column:1 / -1;display:flex;justify-content:center;gap:.5rem;overflow-x:auto;padding:.25rem}.ngx-radiant__thumb{width:4rem;height:3rem;flex:0 0 auto;overflow:hidden;border:1px solid rgb(255 255 255 / 14%);border-radius:.7rem;background:#0f172ab3;cursor:pointer;opacity:.68;padding:0;transition:.16s ease}.ngx-radiant__thumb--active{border-color:var(--ngx-radiant-accent, #67e8f9);box-shadow:0 0 0 2px color-mix(in srgb,var(--ngx-radiant-accent, #67e8f9) 30%,transparent);opacity:1}.ngx-radiant__thumb img{width:100%;height:100%;object-fit:cover;display:block}@media(max-width:720px){.ngx-radiant__shell{width:96vw;height:94vh;grid-template-columns:1fr 1fr}.ngx-radiant__toolbar{align-items:flex-start}.ngx-radiant__toolbar-actions,.ngx-radiant__zoom-controls{flex-wrap:wrap;justify-content:flex-end}.ngx-radiant__zoom-slider{width:8rem}.ngx-radiant__stage{grid-column:1 / -1}.ngx-radiant__nav{grid-row:3;justify-self:center}.ngx-radiant__nav--prev{grid-column:1}.ngx-radiant__nav--next{grid-column:2}.ngx-radiant__thumbs{display:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], showThumbnails: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThumbnails", required: false }] }], showCounter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCounter", required: false }] }], showNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNavigation", required: false }] }], zoomable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomable", required: false }] }], initialZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialZoom", required: false }] }], minZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "minZoom", required: false }] }], maxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxZoom", required: false }] }], zoomStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomStep", required: false }] }], showZoomSlider: [{ type: i0.Input, args: [{ isSignal: true, alias: "showZoomSlider", required: false }] }], iframeAspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "iframeAspectRatio", required: false }] }], iframeAutoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "iframeAutoplay", required: false }] }], iframeMuted: [{ type: i0.Input, args: [{ isSignal: true, alias: "iframeMuted", required: false }] }], iframeAllowedOrigins: [{ type: i0.Input, args: [{ isSignal: true, alias: "iframeAllowedOrigins", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], indexChange: [{ type: i0.Output, args: ["indexChange"] }], closed: [{ type: i0.Output, args: ["closed"] }], zoomMedia: [{ type: i0.ViewChild, args: ['zoomMedia', { isSignal: true }] }] } });
+
+class NgxRadiantDirective {
+    ngxRadiant = input(null, ...(ngDevMode ? [{ debugName: "ngxRadiant" }] : /* istanbul ignore next */ []));
+    radiantItems = input(null, ...(ngDevMode ? [{ debugName: "radiantItems" }] : /* istanbul ignore next */ []));
+    radiantIndex = input(0, ...(ngDevMode ? [{ debugName: "radiantIndex" }] : /* istanbul ignore next */ []));
+    radiantType = input(undefined, ...(ngDevMode ? [{ debugName: "radiantType" }] : /* istanbul ignore next */ []));
+    radiantAlt = input(undefined, ...(ngDevMode ? [{ debugName: "radiantAlt" }] : /* istanbul ignore next */ []));
+    radiantCaption = input(undefined, ...(ngDevMode ? [{ debugName: "radiantCaption" }] : /* istanbul ignore next */ []));
+    radiantThumb = input(undefined, ...(ngDevMode ? [{ debugName: "radiantThumb" }] : /* istanbul ignore next */ []));
+    radiantAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "radiantAriaLabel" }] : /* istanbul ignore next */ []));
+    radiantConfig = input(null, ...(ngDevMode ? [{ debugName: "radiantConfig" }] : /* istanbul ignore next */ []));
+    radiantCloseOnEscape = input(undefined, ...(ngDevMode ? [{ debugName: "radiantCloseOnEscape" }] : /* istanbul ignore next */ []));
+    radiantLoop = input(undefined, ...(ngDevMode ? [{ debugName: "radiantLoop" }] : /* istanbul ignore next */ []));
+    radiantShowThumbnails = input(undefined, ...(ngDevMode ? [{ debugName: "radiantShowThumbnails" }] : /* istanbul ignore next */ []));
+    appRef = inject(ApplicationRef);
+    environmentInjector = inject(EnvironmentInjector);
+    document = inject(DOCUMENT);
+    destroyRef = inject(DestroyRef);
+    platformId = inject(PLATFORM_ID);
+    lightboxRef = null;
+    hostElement = null;
+    subscriptions = [];
+    activeIndex = 0;
+    constructor() {
+        this.destroyRef.onDestroy(() => this.destroyLightbox());
+    }
+    open(event) {
+        event?.preventDefault();
+        const items = this.resolveItems();
+        if (!items.length || !isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        this.activeIndex = this.normalizeIndex(this.radiantIndex(), items.length);
+        const lightboxRef = this.ensureLightbox();
+        this.syncLightboxInputs(lightboxRef, items, true);
+    }
+    close() {
+        this.destroyLightbox();
+    }
+    ensureLightbox() {
+        if (this.lightboxRef) {
+            return this.lightboxRef;
+        }
+        this.hostElement = this.document.createElement('ngx-radiant-overlay');
+        this.document.body.appendChild(this.hostElement);
+        this.lightboxRef = createComponent(NgxRadiantLightbox, {
+            environmentInjector: this.environmentInjector,
+            hostElement: this.hostElement,
+        });
+        this.appRef.attachView(this.lightboxRef.hostView);
+        this.subscriptions = [
+            this.lightboxRef.instance.indexChange.subscribe((index) => {
+                this.activeIndex = index;
+                this.lightboxRef?.setInput('index', index);
+                this.lightboxRef?.changeDetectorRef.detectChanges();
+            }),
+            this.lightboxRef.instance.openChange.subscribe((open) => {
+                if (!open) {
+                    this.destroyLightbox();
+                }
+            }),
+            this.lightboxRef.instance.closed.subscribe(() => this.destroyLightbox()),
+        ];
+        return this.lightboxRef;
+    }
+    syncLightboxInputs(lightboxRef, items, open) {
+        lightboxRef.setInput('items', items);
+        lightboxRef.setInput('index', this.activeIndex);
+        lightboxRef.setInput('open', open);
+        lightboxRef.setInput('config', this.radiantConfig());
+        lightboxRef.setInput('ariaLabel', this.radiantAriaLabel());
+        lightboxRef.setInput('closeOnEscape', this.radiantCloseOnEscape());
+        lightboxRef.setInput('loop', this.radiantLoop());
+        lightboxRef.setInput('showThumbnails', this.radiantShowThumbnails());
+        lightboxRef.changeDetectorRef.detectChanges();
+    }
+    destroyLightbox() {
+        for (const subscription of this.subscriptions) {
+            subscription.unsubscribe();
+        }
+        this.subscriptions = [];
+        if (this.lightboxRef) {
+            this.appRef.detachView(this.lightboxRef.hostView);
+            this.lightboxRef.destroy();
+            this.lightboxRef = null;
+        }
+        this.hostElement?.remove();
+        this.hostElement = null;
+    }
+    resolveItems() {
+        const explicitItems = this.radiantItems();
+        if (explicitItems?.length) {
+            return explicitItems;
+        }
+        const value = this.ngxRadiant();
+        if (!value) {
+            return [];
+        }
+        if (Array.isArray(value)) {
+            return value;
+        }
+        if (typeof value === 'string') {
+            return [
+                {
+                    src: value,
+                    type: this.radiantType(),
+                    alt: this.radiantAlt(),
+                    caption: this.radiantCaption(),
+                    thumb: this.radiantThumb(),
+                },
+            ];
+        }
+        return [value];
+    }
+    normalizeIndex(index, itemCount) {
+        return Math.min(Math.max(Math.trunc(index) || 0, 0), itemCount - 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NgxRadiantDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: NgxRadiantDirective, isStandalone: true, selector: "[ngxRadiant]", inputs: { ngxRadiant: { classPropertyName: "ngxRadiant", publicName: "ngxRadiant", isSignal: true, isRequired: false, transformFunction: null }, radiantItems: { classPropertyName: "radiantItems", publicName: "radiantItems", isSignal: true, isRequired: false, transformFunction: null }, radiantIndex: { classPropertyName: "radiantIndex", publicName: "radiantIndex", isSignal: true, isRequired: false, transformFunction: null }, radiantType: { classPropertyName: "radiantType", publicName: "radiantType", isSignal: true, isRequired: false, transformFunction: null }, radiantAlt: { classPropertyName: "radiantAlt", publicName: "radiantAlt", isSignal: true, isRequired: false, transformFunction: null }, radiantCaption: { classPropertyName: "radiantCaption", publicName: "radiantCaption", isSignal: true, isRequired: false, transformFunction: null }, radiantThumb: { classPropertyName: "radiantThumb", publicName: "radiantThumb", isSignal: true, isRequired: false, transformFunction: null }, radiantAriaLabel: { classPropertyName: "radiantAriaLabel", publicName: "radiantAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, radiantConfig: { classPropertyName: "radiantConfig", publicName: "radiantConfig", isSignal: true, isRequired: false, transformFunction: null }, radiantCloseOnEscape: { classPropertyName: "radiantCloseOnEscape", publicName: "radiantCloseOnEscape", isSignal: true, isRequired: false, transformFunction: null }, radiantLoop: { classPropertyName: "radiantLoop", publicName: "radiantLoop", isSignal: true, isRequired: false, transformFunction: null }, radiantShowThumbnails: { classPropertyName: "radiantShowThumbnails", publicName: "radiantShowThumbnails", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "open($event)" } }, exportAs: ["ngxRadiant"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NgxRadiantDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxRadiant]',
+                    exportAs: 'ngxRadiant',
+                }]
+        }], ctorParameters: () => [], propDecorators: { ngxRadiant: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngxRadiant", required: false }] }], radiantItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "radiantItems", required: false }] }], radiantIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "radiantIndex", required: false }] }], radiantType: [{ type: i0.Input, args: [{ isSignal: true, alias: "radiantType", required: false }] }], radiantAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "radiantAlt", required: false }] }], radiantCaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "radiantCaption", required: false }] }], radiantThumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "radiantThumb", required: false }] }], radiantAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "radiantAriaLabel", required: false }] }], radiantConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "radiantConfig", required: false }] }], radiantCloseOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "radiantCloseOnEscape", required: false }] }], radiantLoop: [{ type: i0.Input, args: [{ isSignal: true, alias: "radiantLoop", required: false }] }], radiantShowThumbnails: [{ type: i0.Input, args: [{ isSignal: true, alias: "radiantShowThumbnails", required: false }] }], open: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+/*
+ * Public API Surface of ngx-radiant
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgxRadiantDirective, NgxRadiantLightbox };
+//# sourceMappingURL=ngx-radiant.mjs.map