@lifecorner/angular-ui-kit 3.4.0 → 3.5.0

package/fesm2022/lifecorner-angular-ui-kit-document-viewer.mjs

@@ -0,0 +1,762 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, ViewEncapsulation, computed, effect, inject, input, signal, untracked } from "@angular/core";
+import { DomSanitizer } from "@angular/platform-browser";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+import { SpinnerComponent } from "@lifecorner/angular-ui-kit/spinner";
+import { CodeBlockComponent } from "@lifecorner/angular-ui-kit/code-block";
+import { MarkdownComponent } from "@lifecorner/angular-ui-kit/markdown";
+import { isSafeResourceUrl } from "@lifecorner/angular-ui-kit/internal/url";
+const EXTENSION_TYPE_MAP = {
+	pdf: "pdf",
+	md: "markdown",
+	markdown: "markdown",
+	png: "image",
+	jpg: "image",
+	jpeg: "image",
+	gif: "image",
+	webp: "image",
+	svg: "image",
+	bmp: "image",
+	ts: "code",
+	js: "code",
+	tsx: "code",
+	jsx: "code",
+	py: "code",
+	java: "code",
+	html: "code",
+	css: "code",
+	scss: "code",
+	json: "code",
+	sh: "code",
+	bash: "code",
+	txt: "text",
+	log: "text",
+	csv: "text"
+};
+const EXTENSION_LANGUAGE_MAP = {
+	ts: "typescript",
+	tsx: "typescript",
+	js: "javascript",
+	jsx: "javascript",
+	py: "python",
+	java: "java",
+	html: "html",
+	css: "css",
+	scss: "scss",
+	json: "json",
+	sh: "bash",
+	bash: "bash"
+};
+const TYPE_ICONS = {
+	pdf: "document-text",
+	markdown: "document-text",
+	image: "photo",
+	text: "document",
+	code: "code-bracket",
+	unknown: "document"
+};
+var DocumentViewerComponent = class DocumentViewerComponent {
+	src = input("", ...ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []);
+	content = input("", ...ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []);
+	type = input("auto", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+	filename = input("", ...ngDevMode ? [{ debugName: "filename" }] : /* istanbul ignore next */ []);
+	language = input("text", ...ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []);
+	showToolbar = input(true, ...ngDevMode ? [{ debugName: "showToolbar" }] : /* istanbul ignore next */ []);
+	showDownload = input(true, ...ngDevMode ? [{ debugName: "showDownload" }] : /* istanbul ignore next */ []);
+	height = input("500px", ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+	zoomOutAriaLabel = input("Zoom out", ...ngDevMode ? [{ debugName: "zoomOutAriaLabel" }] : /* istanbul ignore next */ []);
+	zoomInAriaLabel = input("Zoom in", ...ngDevMode ? [{ debugName: "zoomInAriaLabel" }] : /* istanbul ignore next */ []);
+	resetZoomAriaLabel = input("Reset zoom", ...ngDevMode ? [{ debugName: "resetZoomAriaLabel" }] : /* istanbul ignore next */ []);
+	downloadAriaLabel = input("Download", ...ngDevMode ? [{ debugName: "downloadAriaLabel" }] : /* istanbul ignore next */ []);
+	fullscreenAriaLabel = input("Fullscreen", ...ngDevMode ? [{ debugName: "fullscreenAriaLabel" }] : /* istanbul ignore next */ []);
+	exitFullscreenAriaLabel = input("Exit fullscreen", ...ngDevMode ? [{ debugName: "exitFullscreenAriaLabel" }] : /* istanbul ignore next */ []);
+	loadingLabel = input("Loading document…", ...ngDevMode ? [{ debugName: "loadingLabel" }] : /* istanbul ignore next */ []);
+	previewUnavailableTitle = input("Preview not available", ...ngDevMode ? [{ debugName: "previewUnavailableTitle" }] : /* istanbul ignore next */ []);
+	previewUnavailableMessage = input("This file type cannot be previewed.", ...ngDevMode ? [{ debugName: "previewUnavailableMessage" }] : /* istanbul ignore next */ []);
+	downloadFileLabel = input("Download file", ...ngDevMode ? [{ debugName: "downloadFileLabel" }] : /* istanbul ignore next */ []);
+	untitledLabel = input("Document", ...ngDevMode ? [{ debugName: "untitledLabel" }] : /* istanbul ignore next */ []);
+	markdownTypeLabel = input("Markdown", ...ngDevMode ? [{ debugName: "markdownTypeLabel" }] : /* istanbul ignore next */ []);
+	imageTypeLabel = input("Image", ...ngDevMode ? [{ debugName: "imageTypeLabel" }] : /* istanbul ignore next */ []);
+	textTypeLabel = input("Text", ...ngDevMode ? [{ debugName: "textTypeLabel" }] : /* istanbul ignore next */ []);
+	fileTypeLabel = input("File", ...ngDevMode ? [{ debugName: "fileTypeLabel" }] : /* istanbul ignore next */ []);
+	loadErrorLabel = input("Failed to load document:", ...ngDevMode ? [{ debugName: "loadErrorLabel" }] : /* istanbul ignore next */ []);
+	blockedUrlMessage = input("This document URL cannot be displayed", ...ngDevMode ? [{ debugName: "blockedUrlMessage" }] : /* istanbul ignore next */ []);
+	loading = signal(true, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+	error = signal(null, ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	fetchedContent = signal("", ...ngDevMode ? [{ debugName: "fetchedContent" }] : /* istanbul ignore next */ []);
+	zoom = signal(100, ...ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []);
+	isFullscreen = signal(false, ...ngDevMode ? [{ debugName: "isFullscreen" }] : /* istanbul ignore next */ []);
+	sanitizer = inject(DomSanitizer);
+	elementRef = inject(ElementRef);
+	fullscreenHandler = null;
+	resolvedType = computed(() => {
+		const t = this.type();
+		if (t !== "auto") return t;
+		const ext = this.extractExtension(this.src());
+		return ext && EXTENSION_TYPE_MAP[ext] ? EXTENSION_TYPE_MAP[ext] : "unknown";
+	}, ...ngDevMode ? [{ debugName: "resolvedType" }] : /* istanbul ignore next */ []);
+	displayName = computed(() => {
+		if (this.filename()) return this.filename();
+		const src = this.src();
+		if (!src) return this.untitledLabel();
+		try {
+			const segments = new URL(src, "http://localhost").pathname.split("/");
+			return segments[segments.length - 1] || this.untitledLabel();
+		} catch {
+			return src.split("/").pop() || this.untitledLabel();
+		}
+	}, ...ngDevMode ? [{ debugName: "displayName" }] : /* istanbul ignore next */ []);
+	typeIcon = computed(() => TYPE_ICONS[this.resolvedType()] || TYPE_ICONS["unknown"], ...ngDevMode ? [{ debugName: "typeIcon" }] : /* istanbul ignore next */ []);
+	typeLabel = computed(() => {
+		switch (this.resolvedType()) {
+			case "pdf": return "PDF";
+			case "markdown": return this.markdownTypeLabel();
+			case "image": return this.imageTypeLabel();
+			case "text": return this.textTypeLabel();
+			case "code": return this.resolvedLanguage().toUpperCase();
+			default: return this.fileTypeLabel();
+		}
+	}, ...ngDevMode ? [{ debugName: "typeLabel" }] : /* istanbul ignore next */ []);
+	resolvedLanguage = computed(() => {
+		const lang = this.language();
+		if (lang !== "text") return lang;
+		const ext = this.extractExtension(this.src());
+		return ext && EXTENSION_LANGUAGE_MAP[ext] ? EXTENSION_LANGUAGE_MAP[ext] : "text";
+	}, ...ngDevMode ? [{ debugName: "resolvedLanguage" }] : /* istanbul ignore next */ []);
+	srcEmbeddable = computed(() => isSafeResourceUrl(this.src()), ...ngDevMode ? [{ debugName: "srcEmbeddable" }] : /* istanbul ignore next */ []);
+	safeSrc = computed(() => {
+		const src = this.src();
+		return this.sanitizer.bypassSecurityTrustResourceUrl(this.srcEmbeddable() ? src : "about:blank");
+	}, ...ngDevMode ? [{ debugName: "safeSrc" }] : /* istanbul ignore next */ []);
+	effectiveContent = computed(() => {
+		return this.content() || this.fetchedContent();
+	}, ...ngDevMode ? [{ debugName: "effectiveContent" }] : /* istanbul ignore next */ []);
+	imageTransform = computed(() => {
+		return `scale(${this.zoom() / 100})`;
+	}, ...ngDevMode ? [{ debugName: "imageTransform" }] : /* istanbul ignore next */ []);
+	showZoom = computed(() => {
+		return this.resolvedType() === "image";
+	}, ...ngDevMode ? [{ debugName: "showZoom" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect((onCleanup) => {
+			const type = this.resolvedType();
+			const src = this.src();
+			const content = this.content();
+			const controller = typeof AbortController === "function" ? new AbortController() : null;
+			onCleanup(() => controller?.abort());
+			untracked(() => this.load(type, src, content, controller));
+		});
+	}
+	load(type, src, content, controller) {
+		this.error.set(null);
+		this.fetchedContent.set("");
+		if (content) {
+			this.loading.set(false);
+			return;
+		}
+		if (!src) {
+			this.loading.set(false);
+			this.error.set("No source or content provided");
+			return;
+		}
+		if (type === "pdf" || type === "image") {
+			if (!this.srcEmbeddable()) {
+				this.loading.set(false);
+				this.error.set(this.blockedUrlMessage());
+				return;
+			}
+			this.loading.set(false);
+			return;
+		}
+		if (type === "markdown" || type === "text" || type === "code") {
+			this.loading.set(true);
+			this.fetchContent(src, controller);
+		} else this.loading.set(false);
+	}
+	ngOnDestroy() {
+		if (this.fullscreenHandler) document.removeEventListener("fullscreenchange", this.fullscreenHandler);
+	}
+	zoomIn() {
+		this.zoom.update((z) => Math.min(z + 25, 500));
+	}
+	zoomOut() {
+		this.zoom.update((z) => Math.max(z - 25, 25));
+	}
+	resetZoom() {
+		this.zoom.set(100);
+	}
+	download() {
+		const src = this.src();
+		if (!src || !this.srcEmbeddable()) return;
+		const a = document.createElement("a");
+		a.href = src;
+		a.download = this.displayName();
+		a.target = "_blank";
+		a.rel = "noopener noreferrer";
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
+	}
+	toggleFullscreen() {
+		const el = this.elementRef.nativeElement;
+		if (!document.fullscreenElement) {
+			el.requestFullscreen?.();
+			this.isFullscreen.set(true);
+		} else {
+			document.exitFullscreen?.();
+			this.isFullscreen.set(false);
+		}
+		if (!this.fullscreenHandler) {
+			this.fullscreenHandler = () => {
+				this.isFullscreen.set(!!document.fullscreenElement);
+			};
+			document.addEventListener("fullscreenchange", this.fullscreenHandler);
+		}
+	}
+	onIframeLoad() {
+		this.loading.set(false);
+	}
+	onImageLoad() {
+		this.loading.set(false);
+	}
+	onImageError() {
+		this.loading.set(false);
+		this.error.set("Failed to load image");
+	}
+	extractExtension(url) {
+		if (!url) return null;
+		try {
+			const parts = new URL(url, "http://localhost").pathname.split(".");
+			return parts.length > 1 ? parts.pop().toLowerCase() : null;
+		} catch {
+			const parts = url.split(".");
+			return parts.length > 1 ? parts.pop().toLowerCase().split("?")[0] : null;
+		}
+	}
+	async fetchContent(url, controller) {
+		if (typeof fetch !== "function") {
+			this.loading.set(false);
+			this.error.set("Failed to load document: fetch is not available");
+			return;
+		}
+		try {
+			const response = await fetch(url, controller ? { signal: controller.signal } : void 0);
+			if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+			const text = await response.text();
+			if (controller?.signal.aborted) return;
+			this.fetchedContent.set(text);
+			this.loading.set(false);
+		} catch (err) {
+			if (controller?.signal.aborted) return;
+			this.loading.set(false);
+			this.error.set(`${this.loadErrorLabel()} ${err instanceof Error ? err.message : "Unknown error"}`);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: DocumentViewerComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: DocumentViewerComponent,
+		isStandalone: true,
+		selector: "lc-document-viewer",
+		inputs: {
+			src: {
+				classPropertyName: "src",
+				publicName: "src",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			content: {
+				classPropertyName: "content",
+				publicName: "content",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			type: {
+				classPropertyName: "type",
+				publicName: "type",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			filename: {
+				classPropertyName: "filename",
+				publicName: "filename",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			language: {
+				classPropertyName: "language",
+				publicName: "language",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showToolbar: {
+				classPropertyName: "showToolbar",
+				publicName: "showToolbar",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showDownload: {
+				classPropertyName: "showDownload",
+				publicName: "showDownload",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			zoomOutAriaLabel: {
+				classPropertyName: "zoomOutAriaLabel",
+				publicName: "zoomOutAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			zoomInAriaLabel: {
+				classPropertyName: "zoomInAriaLabel",
+				publicName: "zoomInAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			resetZoomAriaLabel: {
+				classPropertyName: "resetZoomAriaLabel",
+				publicName: "resetZoomAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			downloadAriaLabel: {
+				classPropertyName: "downloadAriaLabel",
+				publicName: "downloadAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			fullscreenAriaLabel: {
+				classPropertyName: "fullscreenAriaLabel",
+				publicName: "fullscreenAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			exitFullscreenAriaLabel: {
+				classPropertyName: "exitFullscreenAriaLabel",
+				publicName: "exitFullscreenAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loadingLabel: {
+				classPropertyName: "loadingLabel",
+				publicName: "loadingLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			previewUnavailableTitle: {
+				classPropertyName: "previewUnavailableTitle",
+				publicName: "previewUnavailableTitle",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			previewUnavailableMessage: {
+				classPropertyName: "previewUnavailableMessage",
+				publicName: "previewUnavailableMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			downloadFileLabel: {
+				classPropertyName: "downloadFileLabel",
+				publicName: "downloadFileLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			untitledLabel: {
+				classPropertyName: "untitledLabel",
+				publicName: "untitledLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			markdownTypeLabel: {
+				classPropertyName: "markdownTypeLabel",
+				publicName: "markdownTypeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			imageTypeLabel: {
+				classPropertyName: "imageTypeLabel",
+				publicName: "imageTypeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			textTypeLabel: {
+				classPropertyName: "textTypeLabel",
+				publicName: "textTypeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			fileTypeLabel: {
+				classPropertyName: "fileTypeLabel",
+				publicName: "fileTypeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loadErrorLabel: {
+				classPropertyName: "loadErrorLabel",
+				publicName: "loadErrorLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			blockedUrlMessage: {
+				classPropertyName: "blockedUrlMessage",
+				publicName: "blockedUrlMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "\"doc-viewer\"",
+			"style.height": "height()"
+		} },
+		ngImport: i0,
+		template: "<!-- Toolbar -->\n@if (showToolbar()) {\n  <div class=\"doc-viewer__toolbar\">\n    <div class=\"doc-viewer__toolbar-left\">\n      <lc-icon [name]=\"typeIcon()\" size=\"sm\" />\n      <span class=\"doc-viewer__filename\">{{ displayName() }}</span>\n      <span class=\"doc-viewer__badge\">{{ typeLabel() }}</span>\n    </div>\n    <div class=\"doc-viewer__toolbar-right\">\n      @if (showZoom()) {\n        <div class=\"doc-viewer__zoom\">\n          <button\n            type=\"button\"\n            class=\"doc-viewer__btn\"\n            [attr.aria-label]=\"zoomOutAriaLabel()\"\n            (click)=\"zoomOut()\"\n          >\n            <lc-icon name=\"minus\" size=\"xs\" />\n          </button>\n          <span class=\"doc-viewer__zoom-value\">{{ zoom() }}%</span>\n          <button\n            type=\"button\"\n            class=\"doc-viewer__btn\"\n            [attr.aria-label]=\"zoomInAriaLabel()\"\n            (click)=\"zoomIn()\"\n          >\n            <lc-icon name=\"plus\" size=\"xs\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"doc-viewer__btn\"\n            [attr.aria-label]=\"resetZoomAriaLabel()\"\n            (click)=\"resetZoom()\"\n          >\n            <lc-icon name=\"arrows-pointing-out\" size=\"xs\" />\n          </button>\n        </div>\n      }\n      @if (showDownload() && src()) {\n        <button\n          type=\"button\"\n          class=\"doc-viewer__btn\"\n          [attr.aria-label]=\"downloadAriaLabel()\"\n          (click)=\"download()\"\n        >\n          <lc-icon name=\"arrow-down-tray\" size=\"sm\" />\n        </button>\n      }\n      <button\n        type=\"button\"\n        class=\"doc-viewer__btn\"\n        [attr.aria-label]=\"isFullscreen() ? exitFullscreenAriaLabel() : fullscreenAriaLabel()\"\n        (click)=\"toggleFullscreen()\"\n      >\n        <lc-icon [name]=\"isFullscreen() ? 'arrows-pointing-in' : 'arrows-pointing-out'\" size=\"sm\" />\n      </button>\n    </div>\n  </div>\n}\n\n<!-- Content area -->\n<div class=\"doc-viewer__content\">\n  @if (loading()) {\n    <div class=\"doc-viewer__loading\">\n      <lc-spinner size=\"lg\" />\n      <span>{{ loadingLabel() }}</span>\n    </div>\n  }\n\n  @if (error(); as errorMsg) {\n    <div class=\"doc-viewer__error\">\n      <lc-icon name=\"exclamation-triangle\" size=\"lg\" color=\"var(--color-error-default)\" />\n      <span>{{ errorMsg }}</span>\n    </div>\n  }\n\n  @if (!loading() && !error()) {\n    @switch (resolvedType()) {\n      @case ('pdf') {\n        <iframe\n          class=\"doc-viewer__iframe\"\n          [src]=\"safeSrc()\"\n          [title]=\"displayName()\"\n          type=\"application/pdf\"\n          (load)=\"onIframeLoad()\"\n        ></iframe>\n      }\n\n      @case ('image') {\n        <div class=\"doc-viewer__image-container\">\n          <img\n            class=\"doc-viewer__image\"\n            [src]=\"src()\"\n            [alt]=\"displayName()\"\n            [style.transform]=\"imageTransform()\"\n            (load)=\"onImageLoad()\"\n            (error)=\"onImageError()\"\n          />\n        </div>\n      }\n\n      @case ('markdown') {\n        <!-- lc-markdown escapes the source and runs Angular's sanitizer — the\n             one markdown renderer in the kit, so its safety work isn't duplicated\n             (or missed) here. -->\n        <div class=\"doc-viewer__markdown\">\n          <lc-markdown [content]=\"effectiveContent()\" linkTarget=\"_blank\" />\n        </div>\n      }\n\n      @case ('code') {\n        <lc-code-block\n          [code]=\"effectiveContent()\"\n          [language]=\"resolvedLanguage()\"\n          [filename]=\"displayName()\"\n          [showLineNumbers]=\"true\"\n          [showHeader]=\"false\"\n        />\n      }\n\n      @case ('text') {\n        <pre class=\"doc-viewer__text\">{{ effectiveContent() }}</pre>\n      }\n\n      @default {\n        <div class=\"doc-viewer__unsupported\">\n          <lc-icon name=\"document\" size=\"lg\" />\n          <span class=\"doc-viewer__unsupported-title\">{{ previewUnavailableTitle() }}</span>\n          <span class=\"doc-viewer__unsupported-msg\">{{ previewUnavailableMessage() }}</span>\n          @if (src()) {\n            <button type=\"button\" class=\"doc-viewer__download-btn\" (click)=\"download()\">\n              <lc-icon name=\"arrow-down-tray\" size=\"sm\" />\n              {{ downloadFileLabel() }}\n            </button>\n          }\n        </div>\n      }\n    }\n  }\n</div>\n",
+		styles: [".doc-viewer{display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:.5rem;overflow:hidden;background:var(--color-surface);font-family:var(--typography-font-family, sans-serif)}.doc-viewer__toolbar{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.5rem .75rem;border-bottom:1px solid var(--color-border);background:var(--color-surface-2);flex-shrink:0}.doc-viewer__toolbar-left{display:flex;align-items:center;gap:.5rem;min-width:0}.doc-viewer__toolbar-right{display:flex;align-items:center;gap:.25rem;flex-shrink:0}.doc-viewer__filename{font-size:var(--typography-font-size-sm, .875rem);font-weight:500;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.doc-viewer__badge{display:inline-flex;padding:.125rem .5rem;background:var(--color-surface-hover);color:var(--color-text-secondary);border-radius:999px;font-size:var(--typography-font-size-xs, .75rem);font-weight:500;white-space:nowrap;-webkit-user-select:none;user-select:none}.doc-viewer__btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:.375rem;background:transparent;color:var(--color-text-tertiary);cursor:pointer;transition:background-color .15s ease,color .15s ease}.doc-viewer__btn:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.doc-viewer__zoom{display:flex;align-items:center;gap:.125rem;margin-right:.5rem;padding-right:.5rem;border-right:1px solid var(--color-border)}.doc-viewer__zoom-value{min-width:3rem;text-align:center;font-size:var(--typography-font-size-xs, .75rem);color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.doc-viewer__content{flex:1;overflow:auto;position:relative;min-height:200px}.doc-viewer__loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;height:100%;min-height:200px;color:var(--color-text-tertiary);font-size:var(--typography-font-size-sm, .875rem)}.doc-viewer__error{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;height:100%;min-height:200px;color:var(--color-text-tertiary);font-size:var(--typography-font-size-sm, .875rem);padding:2rem;text-align:center}.doc-viewer__iframe{width:100%;height:100%;border:none;flex:1}.doc-viewer__image-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:auto;padding:1rem}.doc-viewer__image{max-width:100%;max-height:100%;object-fit:contain;transition:transform .2s ease;transform-origin:center center}.doc-viewer__markdown{padding:1.5rem 2rem;max-width:65rem;overflow-wrap:break-word}.doc-viewer__text{margin:0;padding:1.5rem 2rem;white-space:pre-wrap;word-break:break-word;font-family:var(--typography-font-family-mono, \"SF Mono\", monospace);font-size:var(--typography-font-size-sm, .875rem);line-height:1.6;color:var(--color-text-primary)}.doc-viewer__unsupported{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;height:100%;min-height:200px;padding:2rem;color:var(--color-text-tertiary)}.doc-viewer__unsupported-title{font-size:var(--typography-font-size-lg, 1.125rem);font-weight:600;color:var(--color-text-secondary)}.doc-viewer__unsupported-msg{font-size:var(--typography-font-size-sm, .875rem);color:var(--color-text-tertiary);text-align:center}.doc-viewer__download-btn{display:inline-flex;align-items:center;gap:.5rem;margin-top:.5rem;padding:.5rem 1rem;border:1px solid var(--color-primary-500);border-radius:.375rem;background:transparent;color:var(--color-primary-500);font-size:var(--typography-font-size-sm, .875rem);font-weight:500;cursor:pointer;transition:background-color .15s ease,color .15s ease}.doc-viewer__download-btn:hover{background:var(--color-primary-500);color:#fff}.doc-viewer:fullscreen{height:100vh!important;border-radius:0}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: IconComponent,
+				selector: "lc-icon",
+				inputs: [
+					"name",
+					"variant",
+					"size",
+					"color",
+					"ariaLabel",
+					"decorative",
+					"strict"
+				]
+			},
+			{
+				kind: "component",
+				type: SpinnerComponent,
+				selector: "lc-spinner",
+				inputs: [
+					"size",
+					"message",
+					"loadingLabel"
+				]
+			},
+			{
+				kind: "component",
+				type: CodeBlockComponent,
+				selector: "lc-code-block",
+				inputs: [
+					"code",
+					"language",
+					"filename",
+					"showLineNumbers",
+					"showCopy",
+					"showHeader",
+					"copyLabel",
+					"copyAriaLabel",
+					"copiedLabel",
+					"copiedAnnouncement"
+				]
+			},
+			{
+				kind: "component",
+				type: MarkdownComponent,
+				selector: "lc-markdown",
+				inputs: [
+					"src",
+					"content",
+					"variant",
+					"linkTarget",
+					"sanitize",
+					"syntaxHighlight",
+					"showHeadingAnchors",
+					"baseUrl",
+					"highlightChanges",
+					"previousContent",
+					"changeHighlightFadeMs",
+					"scrollToFirstChange",
+					"changedMarkerLabel",
+					"changedSummaryOneLabel",
+					"changedSummaryManyLabel",
+					"mermaidLoadingLabel",
+					"mermaidErrorLabel",
+					"mermaidUnavailableLabel"
+				],
+				outputs: [
+					"linkClick",
+					"rendered",
+					"changesHighlighted"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: DocumentViewerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-document-viewer",
+			standalone: true,
+			imports: [
+				IconComponent,
+				SpinnerComponent,
+				CodeBlockComponent,
+				MarkdownComponent
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				"[class]": "\"doc-viewer\"",
+				"[style.height]": "height()"
+			},
+			template: "<!-- Toolbar -->\n@if (showToolbar()) {\n  <div class=\"doc-viewer__toolbar\">\n    <div class=\"doc-viewer__toolbar-left\">\n      <lc-icon [name]=\"typeIcon()\" size=\"sm\" />\n      <span class=\"doc-viewer__filename\">{{ displayName() }}</span>\n      <span class=\"doc-viewer__badge\">{{ typeLabel() }}</span>\n    </div>\n    <div class=\"doc-viewer__toolbar-right\">\n      @if (showZoom()) {\n        <div class=\"doc-viewer__zoom\">\n          <button\n            type=\"button\"\n            class=\"doc-viewer__btn\"\n            [attr.aria-label]=\"zoomOutAriaLabel()\"\n            (click)=\"zoomOut()\"\n          >\n            <lc-icon name=\"minus\" size=\"xs\" />\n          </button>\n          <span class=\"doc-viewer__zoom-value\">{{ zoom() }}%</span>\n          <button\n            type=\"button\"\n            class=\"doc-viewer__btn\"\n            [attr.aria-label]=\"zoomInAriaLabel()\"\n            (click)=\"zoomIn()\"\n          >\n            <lc-icon name=\"plus\" size=\"xs\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"doc-viewer__btn\"\n            [attr.aria-label]=\"resetZoomAriaLabel()\"\n            (click)=\"resetZoom()\"\n          >\n            <lc-icon name=\"arrows-pointing-out\" size=\"xs\" />\n          </button>\n        </div>\n      }\n      @if (showDownload() && src()) {\n        <button\n          type=\"button\"\n          class=\"doc-viewer__btn\"\n          [attr.aria-label]=\"downloadAriaLabel()\"\n          (click)=\"download()\"\n        >\n          <lc-icon name=\"arrow-down-tray\" size=\"sm\" />\n        </button>\n      }\n      <button\n        type=\"button\"\n        class=\"doc-viewer__btn\"\n        [attr.aria-label]=\"isFullscreen() ? exitFullscreenAriaLabel() : fullscreenAriaLabel()\"\n        (click)=\"toggleFullscreen()\"\n      >\n        <lc-icon [name]=\"isFullscreen() ? 'arrows-pointing-in' : 'arrows-pointing-out'\" size=\"sm\" />\n      </button>\n    </div>\n  </div>\n}\n\n<!-- Content area -->\n<div class=\"doc-viewer__content\">\n  @if (loading()) {\n    <div class=\"doc-viewer__loading\">\n      <lc-spinner size=\"lg\" />\n      <span>{{ loadingLabel() }}</span>\n    </div>\n  }\n\n  @if (error(); as errorMsg) {\n    <div class=\"doc-viewer__error\">\n      <lc-icon name=\"exclamation-triangle\" size=\"lg\" color=\"var(--color-error-default)\" />\n      <span>{{ errorMsg }}</span>\n    </div>\n  }\n\n  @if (!loading() && !error()) {\n    @switch (resolvedType()) {\n      @case ('pdf') {\n        <iframe\n          class=\"doc-viewer__iframe\"\n          [src]=\"safeSrc()\"\n          [title]=\"displayName()\"\n          type=\"application/pdf\"\n          (load)=\"onIframeLoad()\"\n        ></iframe>\n      }\n\n      @case ('image') {\n        <div class=\"doc-viewer__image-container\">\n          <img\n            class=\"doc-viewer__image\"\n            [src]=\"src()\"\n            [alt]=\"displayName()\"\n            [style.transform]=\"imageTransform()\"\n            (load)=\"onImageLoad()\"\n            (error)=\"onImageError()\"\n          />\n        </div>\n      }\n\n      @case ('markdown') {\n        <!-- lc-markdown escapes the source and runs Angular's sanitizer — the\n             one markdown renderer in the kit, so its safety work isn't duplicated\n             (or missed) here. -->\n        <div class=\"doc-viewer__markdown\">\n          <lc-markdown [content]=\"effectiveContent()\" linkTarget=\"_blank\" />\n        </div>\n      }\n\n      @case ('code') {\n        <lc-code-block\n          [code]=\"effectiveContent()\"\n          [language]=\"resolvedLanguage()\"\n          [filename]=\"displayName()\"\n          [showLineNumbers]=\"true\"\n          [showHeader]=\"false\"\n        />\n      }\n\n      @case ('text') {\n        <pre class=\"doc-viewer__text\">{{ effectiveContent() }}</pre>\n      }\n\n      @default {\n        <div class=\"doc-viewer__unsupported\">\n          <lc-icon name=\"document\" size=\"lg\" />\n          <span class=\"doc-viewer__unsupported-title\">{{ previewUnavailableTitle() }}</span>\n          <span class=\"doc-viewer__unsupported-msg\">{{ previewUnavailableMessage() }}</span>\n          @if (src()) {\n            <button type=\"button\" class=\"doc-viewer__download-btn\" (click)=\"download()\">\n              <lc-icon name=\"arrow-down-tray\" size=\"sm\" />\n              {{ downloadFileLabel() }}\n            </button>\n          }\n        </div>\n      }\n    }\n  }\n</div>\n",
+			styles: [".doc-viewer{display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:.5rem;overflow:hidden;background:var(--color-surface);font-family:var(--typography-font-family, sans-serif)}.doc-viewer__toolbar{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.5rem .75rem;border-bottom:1px solid var(--color-border);background:var(--color-surface-2);flex-shrink:0}.doc-viewer__toolbar-left{display:flex;align-items:center;gap:.5rem;min-width:0}.doc-viewer__toolbar-right{display:flex;align-items:center;gap:.25rem;flex-shrink:0}.doc-viewer__filename{font-size:var(--typography-font-size-sm, .875rem);font-weight:500;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.doc-viewer__badge{display:inline-flex;padding:.125rem .5rem;background:var(--color-surface-hover);color:var(--color-text-secondary);border-radius:999px;font-size:var(--typography-font-size-xs, .75rem);font-weight:500;white-space:nowrap;-webkit-user-select:none;user-select:none}.doc-viewer__btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:.375rem;background:transparent;color:var(--color-text-tertiary);cursor:pointer;transition:background-color .15s ease,color .15s ease}.doc-viewer__btn:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.doc-viewer__zoom{display:flex;align-items:center;gap:.125rem;margin-right:.5rem;padding-right:.5rem;border-right:1px solid var(--color-border)}.doc-viewer__zoom-value{min-width:3rem;text-align:center;font-size:var(--typography-font-size-xs, .75rem);color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.doc-viewer__content{flex:1;overflow:auto;position:relative;min-height:200px}.doc-viewer__loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;height:100%;min-height:200px;color:var(--color-text-tertiary);font-size:var(--typography-font-size-sm, .875rem)}.doc-viewer__error{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;height:100%;min-height:200px;color:var(--color-text-tertiary);font-size:var(--typography-font-size-sm, .875rem);padding:2rem;text-align:center}.doc-viewer__iframe{width:100%;height:100%;border:none;flex:1}.doc-viewer__image-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:auto;padding:1rem}.doc-viewer__image{max-width:100%;max-height:100%;object-fit:contain;transition:transform .2s ease;transform-origin:center center}.doc-viewer__markdown{padding:1.5rem 2rem;max-width:65rem;overflow-wrap:break-word}.doc-viewer__text{margin:0;padding:1.5rem 2rem;white-space:pre-wrap;word-break:break-word;font-family:var(--typography-font-family-mono, \"SF Mono\", monospace);font-size:var(--typography-font-size-sm, .875rem);line-height:1.6;color:var(--color-text-primary)}.doc-viewer__unsupported{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;height:100%;min-height:200px;padding:2rem;color:var(--color-text-tertiary)}.doc-viewer__unsupported-title{font-size:var(--typography-font-size-lg, 1.125rem);font-weight:600;color:var(--color-text-secondary)}.doc-viewer__unsupported-msg{font-size:var(--typography-font-size-sm, .875rem);color:var(--color-text-tertiary);text-align:center}.doc-viewer__download-btn{display:inline-flex;align-items:center;gap:.5rem;margin-top:.5rem;padding:.5rem 1rem;border:1px solid var(--color-primary-500);border-radius:.375rem;background:transparent;color:var(--color-primary-500);font-size:var(--typography-font-size-sm, .875rem);font-weight:500;cursor:pointer;transition:background-color .15s ease,color .15s ease}.doc-viewer__download-btn:hover{background:var(--color-primary-500);color:#fff}.doc-viewer:fullscreen{height:100vh!important;border-radius:0}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		src: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "src",
+				required: false
+			}]
+		}],
+		content: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "content",
+				required: false
+			}]
+		}],
+		type: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "type",
+				required: false
+			}]
+		}],
+		filename: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filename",
+				required: false
+			}]
+		}],
+		language: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "language",
+				required: false
+			}]
+		}],
+		showToolbar: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showToolbar",
+				required: false
+			}]
+		}],
+		showDownload: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showDownload",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		zoomOutAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "zoomOutAriaLabel",
+				required: false
+			}]
+		}],
+		zoomInAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "zoomInAriaLabel",
+				required: false
+			}]
+		}],
+		resetZoomAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "resetZoomAriaLabel",
+				required: false
+			}]
+		}],
+		downloadAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "downloadAriaLabel",
+				required: false
+			}]
+		}],
+		fullscreenAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fullscreenAriaLabel",
+				required: false
+			}]
+		}],
+		exitFullscreenAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "exitFullscreenAriaLabel",
+				required: false
+			}]
+		}],
+		loadingLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loadingLabel",
+				required: false
+			}]
+		}],
+		previewUnavailableTitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "previewUnavailableTitle",
+				required: false
+			}]
+		}],
+		previewUnavailableMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "previewUnavailableMessage",
+				required: false
+			}]
+		}],
+		downloadFileLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "downloadFileLabel",
+				required: false
+			}]
+		}],
+		untitledLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "untitledLabel",
+				required: false
+			}]
+		}],
+		markdownTypeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "markdownTypeLabel",
+				required: false
+			}]
+		}],
+		imageTypeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "imageTypeLabel",
+				required: false
+			}]
+		}],
+		textTypeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "textTypeLabel",
+				required: false
+			}]
+		}],
+		fileTypeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fileTypeLabel",
+				required: false
+			}]
+		}],
+		loadErrorLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loadErrorLabel",
+				required: false
+			}]
+		}],
+		blockedUrlMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "blockedUrlMessage",
+				required: false
+			}]
+		}]
+	}
+});
+export { DocumentViewerComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-document-viewer.mjs.map