@star-ng/ui 0.0.0-stage → 0.2.0

package/fesm2022/star-ng-ui-media.mjs

@@ -0,0 +1,833 @@
+import { _IdGenerator } from "@angular/cdk/a11y";
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, TemplateRef, booleanAttribute, computed, contentChild, effect, inject, input, model, signal, viewChild } from "@angular/core";
+import { STAR_UI_TEXT, starInlineKey, starIsRtl } from "@star-ng/ui/core";
+import { StarDialog } from "@star-ng/ui/dialog";
+var StarCarouselItem = class StarCarouselItem {
+	starCarouselItemOf = input(null, ...ngDevMode ? [{ debugName: "starCarouselItemOf" }] : /* istanbul ignore next */ []);
+	template = inject(TemplateRef);
+	static ngTemplateContextGuard(_dir, _ctx) {
+		return true;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarCarouselItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.6",
+		type: StarCarouselItem,
+		isStandalone: true,
+		selector: "ng-template[starCarouselItem]",
+		inputs: { starCarouselItemOf: {
+			classPropertyName: "starCarouselItemOf",
+			publicName: "starCarouselItemOf",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarCarouselItem,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[starCarouselItem]" }]
+	}],
+	propDecorators: { starCarouselItemOf: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "starCarouselItemOf",
+			required: false
+		}]
+	}] }
+});
+var StarCarousel = class StarCarousel {
+	text = inject(STAR_UI_TEXT);
+	items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	numVisible = input(1, ...ngDevMode ? [{ debugName: "numVisible" }] : /* istanbul ignore next */ []);
+	autoplay = input(0, ...ngDevMode ? [{ debugName: "autoplay" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	itemTemplate = contentChild(StarCarouselItem, ...ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []);
+	track = viewChild.required("track", ...ngDevMode ? [{ debugName: "track" }] : /* istanbul ignore next */ []);
+	page = signal(0, ...ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []);
+	playing = signal(true, ...ngDevMode ? [{ debugName: "playing" }] : /* istanbul ignore next */ []);
+	hovering = signal(false, ...ngDevMode ? [{ debugName: "hovering" }] : /* istanbul ignore next */ []);
+	pages = computed(() => Math.max(1, Math.ceil(this.items().length / this.numVisible())), ...ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []);
+	dots = computed(() => Array.from({ length: this.pages() }, (_, i) => i), ...ngDevMode ? [{ debugName: "dots" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect((onCleanup) => {
+			const ms = this.autoplay();
+			if (!ms) return;
+			const id = setInterval(() => {
+				if (!this.playing() || this.hovering()) return;
+				this.goTo(this.page() >= this.pages() - 1 ? 0 : this.page() + 1);
+			}, ms);
+			onCleanup(() => clearInterval(id));
+		});
+	}
+	goTo(page) {
+		const target = Math.min(Math.max(page, 0), this.pages() - 1);
+		this.page.set(target);
+		const track = this.track().nativeElement;
+		const slide = track.children[target * this.numVisible()];
+		const reduce = matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+		const distance = slide ? this.distanceToStart(slide, track) : -track.scrollLeft;
+		track.scrollBy?.({
+			left: distance,
+			behavior: reduce ? "auto" : "smooth"
+		});
+	}
+	distanceToStart(slide, track) {
+		const slideBox = slide.getBoundingClientRect();
+		const trackBox = track.getBoundingClientRect();
+		return starIsRtl(track) ? slideBox.right - trackBox.right : slideBox.left - trackBox.left;
+	}
+	syncPage() {
+		const track = this.track().nativeElement;
+		const slideWidth = track.children[0]?.offsetWidth ?? 1;
+		this.page.set(Math.round(Math.abs(track.scrollLeft) / (slideWidth * this.numVisible())));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarCarousel,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarCarousel,
+		isStandalone: true,
+		selector: "star-carousel",
+		inputs: {
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			numVisible: {
+				classPropertyName: "numVisible",
+				publicName: "numVisible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autoplay: {
+				classPropertyName: "autoplay",
+				publicName: "autoplay",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"role": "region",
+				"aria-roledescription": "carousel"
+			},
+			listeners: {
+				"mouseenter": "hovering.set(true)",
+				"mouseleave": "hovering.set(false)",
+				"focusin": "hovering.set(true)",
+				"focusout": "hovering.set(false)"
+			},
+			properties: {
+				"attr.aria-label": "ariaLabel()",
+				"style.--star-visible": "numVisible()"
+			},
+			classAttribute: "star-carousel"
+		},
+		queries: [{
+			propertyName: "itemTemplate",
+			first: true,
+			predicate: StarCarouselItem,
+			descendants: true,
+			isSignal: true
+		}],
+		viewQueries: [{
+			propertyName: "track",
+			first: true,
+			predicate: ["track"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <div class="star-carousel__controls">
+      @if (autoplay()) {
+        <button
+          type="button"
+          class="star-select__icon-btn"
+          [attr.aria-label]="playing() ? text.pauseSlides : text.playSlides"
+          (click)="playing.set(!playing())"
+        >
+          <i
+            class="ph-bold"
+            [class.ph-pause]="playing()"
+            [class.ph-play]="!playing()"
+            aria-hidden="true"
+          ></i>
+        </button>
+      }
+      <button
+        type="button"
+        class="star-select__icon-btn"
+        [attr.aria-label]="text.previousSlides"
+        [disabled]="page() === 0"
+        (click)="goTo(page() - 1)"
+      >
+        <i class="ph-bold ph-caret-left star-icon-mirror" aria-hidden="true"></i>
+      </button>
+      <button
+        type="button"
+        class="star-select__icon-btn"
+        [attr.aria-label]="text.nextSlides"
+        [disabled]="page() >= pages() - 1"
+        (click)="goTo(page() + 1)"
+      >
+        <i class="ph-bold ph-caret-right star-icon-mirror" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div
+      #track
+      class="star-carousel__track"
+      role="group"
+      tabindex="0"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-live]="playing() ? 'off' : 'polite'"
+      (scrollend)="syncPage()"
+    >
+      @for (item of items(); track $index; let i = $index) {
+        <div
+          class="star-carousel__slide"
+          role="group"
+          aria-roledescription="slide"
+          [attr.aria-label]="text.ofTotal(i + 1, items().length)"
+        >
+          @if (itemTemplate(); as custom) {
+            <ng-container
+              *ngTemplateOutlet="custom.template; context: { $implicit: item, index: i }"
+            />
+          }
+        </div>
+      }
+    </div>
+    @if (pages() > 1) {
+      <div class="star-carousel__dots">
+        @for (dot of dots(); track dot) {
+          <button
+            type="button"
+            class="star-carousel__dot"
+            [class.star-carousel__dot--on]="dot === page()"
+            [attr.aria-label]="text.page(dot + 1)"
+            [attr.aria-current]="dot === page() || null"
+            (click)="goTo(dot)"
+          ></button>
+        }
+      </div>
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarCarousel,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-carousel",
+			imports: [NgTemplateOutlet],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-carousel",
+				role: "region",
+				"aria-roledescription": "carousel",
+				"[attr.aria-label]": "ariaLabel()",
+				"[style.--star-visible]": "numVisible()",
+				"(mouseenter)": "hovering.set(true)",
+				"(mouseleave)": "hovering.set(false)",
+				"(focusin)": "hovering.set(true)",
+				"(focusout)": "hovering.set(false)"
+			},
+			template: `
+    <div class="star-carousel__controls">
+      @if (autoplay()) {
+        <button
+          type="button"
+          class="star-select__icon-btn"
+          [attr.aria-label]="playing() ? text.pauseSlides : text.playSlides"
+          (click)="playing.set(!playing())"
+        >
+          <i
+            class="ph-bold"
+            [class.ph-pause]="playing()"
+            [class.ph-play]="!playing()"
+            aria-hidden="true"
+          ></i>
+        </button>
+      }
+      <button
+        type="button"
+        class="star-select__icon-btn"
+        [attr.aria-label]="text.previousSlides"
+        [disabled]="page() === 0"
+        (click)="goTo(page() - 1)"
+      >
+        <i class="ph-bold ph-caret-left star-icon-mirror" aria-hidden="true"></i>
+      </button>
+      <button
+        type="button"
+        class="star-select__icon-btn"
+        [attr.aria-label]="text.nextSlides"
+        [disabled]="page() >= pages() - 1"
+        (click)="goTo(page() + 1)"
+      >
+        <i class="ph-bold ph-caret-right star-icon-mirror" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div
+      #track
+      class="star-carousel__track"
+      role="group"
+      tabindex="0"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-live]="playing() ? 'off' : 'polite'"
+      (scrollend)="syncPage()"
+    >
+      @for (item of items(); track $index; let i = $index) {
+        <div
+          class="star-carousel__slide"
+          role="group"
+          aria-roledescription="slide"
+          [attr.aria-label]="text.ofTotal(i + 1, items().length)"
+        >
+          @if (itemTemplate(); as custom) {
+            <ng-container
+              *ngTemplateOutlet="custom.template; context: { $implicit: item, index: i }"
+            />
+          }
+        </div>
+      }
+    </div>
+    @if (pages() > 1) {
+      <div class="star-carousel__dots">
+        @for (dot of dots(); track dot) {
+          <button
+            type="button"
+            class="star-carousel__dot"
+            [class.star-carousel__dot--on]="dot === page()"
+            [attr.aria-label]="text.page(dot + 1)"
+            [attr.aria-current]="dot === page() || null"
+            (click)="goTo(dot)"
+          ></button>
+        }
+      </div>
+    }
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		numVisible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "numVisible",
+				required: false
+			}]
+		}],
+		autoplay: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autoplay",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		itemTemplate: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => StarCarouselItem), { isSignal: true }]
+		}],
+		track: [{
+			type: i0.ViewChild,
+			args: ["track", { isSignal: true }]
+		}]
+	}
+});
+var StarGalleria = class StarGalleria {
+	text = inject(STAR_UI_TEXT);
+	images = input([], ...ngDevMode ? [{ debugName: "images" }] : /* istanbul ignore next */ []);
+	activeIndex = model(0, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	current = computed(() => this.images()[this.activeIndex()] ?? null, ...ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []);
+	step(delta) {
+		const count = this.images().length;
+		if (count) this.activeIndex.set((this.activeIndex() + delta + count) % count);
+	}
+	onKeydown(event) {
+		const key = starInlineKey(event);
+		if (key === "ArrowLeft" || key === "ArrowRight") {
+			event.preventDefault();
+			this.step(key === "ArrowLeft" ? -1 : 1);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarGalleria,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarGalleria,
+		isStandalone: true,
+		selector: "star-galleria",
+		inputs: {
+			images: {
+				classPropertyName: "images",
+				publicName: "images",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			activeIndex: {
+				classPropertyName: "activeIndex",
+				publicName: "activeIndex",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { activeIndex: "activeIndexChange" },
+		host: {
+			attributes: {
+				"role": "region",
+				"aria-roledescription": "gallery"
+			},
+			properties: { "attr.aria-label": "ariaLabel() ?? text.galleryLabel" },
+			classAttribute: "star-galleria"
+		},
+		ngImport: i0,
+		template: `
+    @if (current(); as image) {
+      <figure class="star-galleria__stage" tabindex="0" (keydown)="onKeydown($event)">
+        <img [src]="image.src" [alt]="image.alt" loading="lazy" />
+        @if (image.caption) {
+          <figcaption class="star-galleria__caption">{{ image.caption }}</figcaption>
+        }
+        <button
+          type="button"
+          class="star-galleria__nav star-galleria__nav--prev"
+          [attr.aria-label]="text.previousImage"
+          (click)="step(-1)"
+        >
+          <i class="ph-bold ph-caret-left star-icon-mirror" aria-hidden="true"></i>
+        </button>
+        <button
+          type="button"
+          class="star-galleria__nav star-galleria__nav--next"
+          [attr.aria-label]="text.nextImage"
+          (click)="step(1)"
+        >
+          <i class="ph-bold ph-caret-right star-icon-mirror" aria-hidden="true"></i>
+        </button>
+        <span class="star-galleria__count" aria-live="polite"
+          >{{ activeIndex() + 1 }} / {{ images().length }}</span
+        >
+      </figure>
+    }
+    <div class="star-galleria__thumbs">
+      @for (image of images(); track $index; let i = $index) {
+        <button
+          type="button"
+          class="star-galleria__thumb"
+          [attr.aria-current]="i === activeIndex() || null"
+          [attr.aria-label]="text.showImage(image.alt)"
+          (click)="activeIndex.set(i)"
+        >
+          <img [src]="image.thumbnail ?? image.src" alt="" loading="lazy" />
+        </button>
+      }
+    </div>
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarGalleria,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-galleria",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-galleria",
+				role: "region",
+				"aria-roledescription": "gallery",
+				"[attr.aria-label]": "ariaLabel() ?? text.galleryLabel"
+			},
+			template: `
+    @if (current(); as image) {
+      <figure class="star-galleria__stage" tabindex="0" (keydown)="onKeydown($event)">
+        <img [src]="image.src" [alt]="image.alt" loading="lazy" />
+        @if (image.caption) {
+          <figcaption class="star-galleria__caption">{{ image.caption }}</figcaption>
+        }
+        <button
+          type="button"
+          class="star-galleria__nav star-galleria__nav--prev"
+          [attr.aria-label]="text.previousImage"
+          (click)="step(-1)"
+        >
+          <i class="ph-bold ph-caret-left star-icon-mirror" aria-hidden="true"></i>
+        </button>
+        <button
+          type="button"
+          class="star-galleria__nav star-galleria__nav--next"
+          [attr.aria-label]="text.nextImage"
+          (click)="step(1)"
+        >
+          <i class="ph-bold ph-caret-right star-icon-mirror" aria-hidden="true"></i>
+        </button>
+        <span class="star-galleria__count" aria-live="polite"
+          >{{ activeIndex() + 1 }} / {{ images().length }}</span
+        >
+      </figure>
+    }
+    <div class="star-galleria__thumbs">
+      @for (image of images(); track $index; let i = $index) {
+        <button
+          type="button"
+          class="star-galleria__thumb"
+          [attr.aria-current]="i === activeIndex() || null"
+          [attr.aria-label]="text.showImage(image.alt)"
+          (click)="activeIndex.set(i)"
+        >
+          <img [src]="image.thumbnail ?? image.src" alt="" loading="lazy" />
+        </button>
+      }
+    </div>
+  `
+		}]
+	}],
+	propDecorators: {
+		images: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "images",
+				required: false
+			}]
+		}],
+		activeIndex: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeIndex",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["activeIndexChange"]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}]
+	}
+});
+var StarImage = class StarImage {
+	text = inject(STAR_UI_TEXT);
+	src = input.required(...ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []);
+	alt = input.required(...ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []);
+	width = input(null, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	preview = input(false, {
+		...ngDevMode ? { debugName: "preview" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	zoom = signal(1, ...ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []);
+	id = inject(_IdGenerator).getId("star-image-");
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarImage,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarImage,
+		isStandalone: true,
+		selector: "star-image",
+		inputs: {
+			src: {
+				classPropertyName: "src",
+				publicName: "src",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			alt: {
+				classPropertyName: "alt",
+				publicName: "alt",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			preview: {
+				classPropertyName: "preview",
+				publicName: "preview",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "star-image" },
+		ngImport: i0,
+		template: `
+    @if (preview()) {
+      <button
+        type="button"
+        class="star-image__trigger"
+        [attr.aria-label]="text.previewImage(alt())"
+        (click)="open.set(true)"
+      >
+        <img [src]="src()" [alt]="alt()" [attr.width]="width()" loading="lazy" />
+        <span class="star-image__hint" aria-hidden="true"
+          ><i class="ph-bold ph-magnifying-glass-plus"></i
+        ></span>
+      </button>
+      <star-dialog [(visible)]="open" [header]="alt()" size="xl" dismissableMask>
+        <div class="star-image__zoom-bar">
+          <button
+            type="button"
+            class="star-select__icon-btn"
+            [attr.aria-label]="text.zoomOut"
+            [disabled]="zoom() <= 0.5"
+            (click)="zoom.set(zoom() - 0.25)"
+          >
+            <i class="ph-bold ph-magnifying-glass-minus" aria-hidden="true"></i>
+          </button>
+          <span aria-live="polite">{{ zoom() * 100 }}%</span>
+          <button
+            type="button"
+            class="star-select__icon-btn"
+            [attr.aria-label]="text.zoomIn"
+            [disabled]="zoom() >= 3"
+            (click)="zoom.set(zoom() + 0.25)"
+          >
+            <i class="ph-bold ph-magnifying-glass-plus" aria-hidden="true"></i>
+          </button>
+        </div>
+        <!-- Focusable, so the arrow keys scroll a zoomed image. -->
+        <div class="star-image__stage" role="group" tabindex="0" [attr.aria-label]="alt()">
+          <img [src]="src()" [alt]="alt()" [style.transform]="'scale(' + zoom() + ')'" />
+        </div>
+      </star-dialog>
+    } @else {
+      <img [src]="src()" [alt]="alt()" [attr.width]="width()" loading="lazy" />
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: StarDialog,
+			selector: "star-dialog",
+			inputs: [
+				"visible",
+				"header",
+				"size",
+				"width",
+				"modal",
+				"closable",
+				"closeOnEscape",
+				"dismissableMask",
+				"showHeader",
+				"role",
+				"ariaLabel"
+			],
+			outputs: [
+				"visibleChange",
+				"shown",
+				"hidden"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarImage,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-image",
+			imports: [StarDialog],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "star-image" },
+			template: `
+    @if (preview()) {
+      <button
+        type="button"
+        class="star-image__trigger"
+        [attr.aria-label]="text.previewImage(alt())"
+        (click)="open.set(true)"
+      >
+        <img [src]="src()" [alt]="alt()" [attr.width]="width()" loading="lazy" />
+        <span class="star-image__hint" aria-hidden="true"
+          ><i class="ph-bold ph-magnifying-glass-plus"></i
+        ></span>
+      </button>
+      <star-dialog [(visible)]="open" [header]="alt()" size="xl" dismissableMask>
+        <div class="star-image__zoom-bar">
+          <button
+            type="button"
+            class="star-select__icon-btn"
+            [attr.aria-label]="text.zoomOut"
+            [disabled]="zoom() <= 0.5"
+            (click)="zoom.set(zoom() - 0.25)"
+          >
+            <i class="ph-bold ph-magnifying-glass-minus" aria-hidden="true"></i>
+          </button>
+          <span aria-live="polite">{{ zoom() * 100 }}%</span>
+          <button
+            type="button"
+            class="star-select__icon-btn"
+            [attr.aria-label]="text.zoomIn"
+            [disabled]="zoom() >= 3"
+            (click)="zoom.set(zoom() + 0.25)"
+          >
+            <i class="ph-bold ph-magnifying-glass-plus" aria-hidden="true"></i>
+          </button>
+        </div>
+        <!-- Focusable, so the arrow keys scroll a zoomed image. -->
+        <div class="star-image__stage" role="group" tabindex="0" [attr.aria-label]="alt()">
+          <img [src]="src()" [alt]="alt()" [style.transform]="'scale(' + zoom() + ')'" />
+        </div>
+      </star-dialog>
+    } @else {
+      <img [src]="src()" [alt]="alt()" [attr.width]="width()" loading="lazy" />
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		src: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "src",
+				required: true
+			}]
+		}],
+		alt: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "alt",
+				required: true
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		preview: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "preview",
+				required: false
+			}]
+		}]
+	}
+});
+export { StarCarousel, StarCarouselItem, StarGalleria, StarImage };
+
+//# sourceMappingURL=star-ng-ui-media.mjs.map