itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiInputComponent,\n UiSeparatorComponent,\n UiSheetCloseComponent,\n UiSheetComponent,\n UiSheetContentComponent,\n UiSheetDescriptionComponent,\n UiSheetFooterComponent,\n UiSheetHeaderComponent,\n UiSheetTitleComponent,\n UiTabsComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n ],\n template: `\n
\n \n @if (notificationToast()) {\n
\n \n {{ notificationToast() }}\n \n }\n\n \n
\n \n
\n
\n \n
\n
Digital Asset Management (DAM)
\n
v2.4 \n
\n
\n \n Total Assets:\n 1,420 media files · 24.8 GB\n |\n Cloud Sync Active\n \n
\n
\n
\n \n \n @if (searchQuery()) {\n \n \n \n }\n
\n\n
\n \n Upload Media\n \n \n @for (asset of filteredAssets(); track asset.id) {\n
\n \n \n \n {{ asset.aspectRatio }}\n \n \n {{ asset.resolutionBadge }}\n \n
\n \n \n {{ asset.format }}\n \n
\n \n \n \n Inspect\n
\n \n \n \n \n \n \n \n
\n \n
\n
\n \n {{ asset.title }}\n \n
\n
{{ asset.filename }}
\n
\n
\n @for (t of asset.tags; track t) {\n \n {{ t }}\n \n }\n
\n
\n {{ asset.dimensions }}\n {{ asset.fileSize }} · {{ asset.format }}\n
\n
\n \n
\n No assets found
\n \n No media assets match your active category, aspect ratio, or search query. Try clearing filters to view all\n assets.\n
\n \n \n }\n\n \n \n
\n @if (selectedAsset(); as asset) {\n \n
\n {{ asset.format }}\n {{ asset.aspectRatioLabel }}\n {{ asset.resolutionBadge }}\n
\n
{{ asset.title }}
\n
{{ asset.filename }}
\n
\n
![]()
\n
\n \n \n \n \n \n \n \n
\n \n \n Color Palette Swatches\n \n Click swatch to copy HEX\n
\n
\n @for (color of asset.palette; track color) {\n \n \n \n {{ color }}\n \n \n }\n
\n
\n
Asset Metadata
\n
\n
\n Dimensions\n {{ asset.dimensions }}\n
\n
\n File Size\n {{ asset.fileSize }}\n
\n
\n Color Space\n {{ asset.colorSpace }}\n
\n
\n License\n {{ asset.license }}\n
\n
\n
Uploaded By\n
\n \n {{ asset.uploadedBy.avatarInitials }}\n \n {{ asset.uploadedBy.name }}\n
\n
\n
\n Upload Date\n {{ asset.uploadDate }}\n
\n
\n
\n
\n
Download Resolution
\n Format: {{ asset.format }}\n \n
\n @for (opt of asset.downloadOptions; track opt.id) {\n
\n \n
\n {{ opt.label }}\n @if (opt.badge) {\n \n {{ opt.badge }}\n \n }\n
\n
{{ opt.resolution }}\n
\n {{ opt.size }}\n \n @if (selectedResolutionOption() === opt.id) {\n \n }\n \n
\n \n }\n \n
\n
\n \n \n HTML CDN Embed Snippet\n \n \n \n {{ copiedEmbed() ? 'Copied!' : 'Copy Code' }}\n \n
\n
\n <img src=\"{{ asset.previewUrl }}\" alt=\"{{ asset.title }}\" loading=\"lazy\" />\n \n \n
\n \n \n \n Download Asset\n \n \n }\n \n \n \n `,\n})\nexport class UiMediaAssetGalleryComponent {\n protected readonly ArrowDownToLine = ArrowDownToLine\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Code2 = Code2\n protected readonly Copy = Copy\n protected readonly ExternalLink = ExternalLink\n protected readonly Eye = Eye\n protected readonly FileCode = FileCode\n protected readonly HardDrive = HardDrive\n protected readonly ImageIcon = ImageIcon\n protected readonly Layers = Layers\n protected readonly Palette = Palette\n protected readonly Search = Search\n protected readonly Share2 = Share2\n protected readonly Shapes = Shapes\n protected readonly Tag = Tag\n protected readonly Upload = Upload\n protected readonly Video = Video\n protected readonly X = X\n\n protected readonly aspectOptions = aspectFilterOptions\n protected readonly tags = availableTags\n\n @Input() set initialAssets(v: AssetItem[] | undefined) {\n if (v) this.assetsSignal.set([...v])\n }\n @Input('class') className?: string\n\n readonly assetsSignal = signal([...DEFAULT_ASSETS])\n get assets(): AssetItem[] {\n return this.assetsSignal()\n }\n\n readonly searchQuery = signal('')\n readonly selectedCategory = signal('all')\n readonly selectedAspectRatio = signal('all')\n readonly selectedTag = signal(null)\n\n readonly selectedAsset = signal(null)\n readonly isDrawerOpen = signal(false)\n readonly selectedResolutionOption = signal('opt-1')\n\n readonly notificationToast = signal(null)\n private toastTimeout: ReturnType | undefined\n\n readonly copiedColor = signal(null)\n private colorTimeout: ReturnType | undefined\n\n readonly copiedEmbed = signal(false)\n private embedTimeout: ReturnType | undefined\n\n readonly filteredAssets = computed(() => {\n return this.assetsSignal().filter((item) => {\n if (this.selectedCategory() !== 'all' && item.category !== this.selectedCategory()) return false\n if (this.selectedAspectRatio() !== 'all' && item.aspectRatio !== this.selectedAspectRatio()) return false\n if (this.selectedTag() && !item.tags.includes(this.selectedTag()!)) return false\n if (this.searchQuery().trim() !== '') {\n const q = this.searchQuery().toLowerCase().trim()\n const titleMatch = item.title.toLowerCase().includes(q)\n const fileMatch = item.filename.toLowerCase().includes(q)\n const tagMatch = item.tags.some((t) => t.toLowerCase().includes(q))\n const formatMatch = item.format.toLowerCase().includes(q)\n if (!titleMatch && !fileMatch && !tagMatch && !formatMatch) return false\n }\n return true\n })\n })\n\n readonly isFiltered = computed(\n () =>\n !!this.selectedTag() ||\n this.selectedAspectRatio() !== 'all' ||\n !!this.searchQuery() ||\n this.selectedCategory() !== 'all',\n )\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n setCategory(v: string): void {\n this.selectedCategory.set(v)\n }\n\n ratioPillClass(value: string): string {\n return cn(\n 'focus-visible:ring-ring min-h-6 rounded-lg px-2.5 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n this.selectedAspectRatio() === value\n ? 'bg-primary text-primary-foreground shadow-xs'\n : 'bg-muted/70 text-muted-foreground hover:bg-muted hover:text-foreground',\n )\n }\n\n tagChipClass(tag: string): string {\n return cn(\n 'focus-visible:ring-ring min-h-6 rounded-md border px-2.5 py-0.5 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n this.selectedTag() === tag\n ? 'border-primary bg-primary/10 text-primary font-semibold'\n : 'border-border bg-background text-muted-foreground hover:border-foreground/30 hover:text-foreground',\n )\n }\n\n downloadOptionClass(id: string): string {\n return cn(\n 'focus-visible:ring-ring flex w-full items-center justify-between rounded-xl border p-3 text-left transition-[background-color,box-shadow] focus-visible:ring-2 focus-visible:outline-none',\n this.selectedResolutionOption() === id\n ? 'border-primary bg-primary/5 text-foreground shadow-xs'\n : 'border-border/70 bg-card hover:bg-muted/40 text-muted-foreground',\n )\n }\n\n downloadRadioClass(id: string): string {\n return cn(\n 'flex size-4 items-center justify-center rounded-full border',\n this.selectedResolutionOption() === id ? 'border-primary bg-primary text-primary-foreground' : 'border-border',\n )\n }\n\n showNotification(msg: string): void {\n if (this.toastTimeout) clearTimeout(this.toastTimeout)\n this.notificationToast.set(msg)\n this.toastTimeout = setTimeout(() => this.notificationToast.set(null), 2800)\n }\n\n copyHex(color: string): void {\n try {\n navigator.clipboard?.writeText(color)\n } catch {\n // Clipboard fallback\n }\n this.copiedColor.set(color)\n this.showNotification(`Copied color hex ${color} to clipboard`)\n if (this.colorTimeout) clearTimeout(this.colorTimeout)\n this.colorTimeout = setTimeout(() => this.copiedColor.set(null), 2000)\n }\n\n copyEmbedSnippet(asset: AssetItem): void {\n const code = `![\"${asset.title}\"](\"${asset.previewUrl}\")
`\n try {\n navigator.clipboard?.writeText(code)\n } catch {\n // Clipboard fallback\n }\n this.copiedEmbed.set(true)\n this.showNotification('Copied HTML embed snippet to clipboard')\n if (this.embedTimeout) clearTimeout(this.embedTimeout)\n this.embedTimeout = setTimeout(() => this.copiedEmbed.set(false), 2200)\n }\n\n copyAssetLink(asset: AssetItem, event?: Event): void {\n event?.stopPropagation()\n try {\n navigator.clipboard?.writeText(`https://cdn.uipkge.dev/assets/${asset.filename}`)\n } catch {\n // Clipboard fallback\n }\n this.showNotification(`Link copied for \"${asset.title}\"`)\n }\n\n triggerInstantDownload(asset: AssetItem, event?: Event): void {\n event?.stopPropagation()\n this.showNotification(`Downloading ${asset.filename} (${asset.fileSize})...`)\n }\n\n openInspector(asset: AssetItem): void {\n this.selectedAsset.set(asset)\n this.selectedResolutionOption.set(asset.downloadOptions[0]?.id || 'opt-1')\n this.isDrawerOpen.set(true)\n }\n\n toggleTag(tag: string): void {\n this.selectedTag.set(this.selectedTag() === tag ? null : tag)\n }\n\n resetFilters(): void {\n this.selectedTag.set(null)\n this.selectedAspectRatio.set('all')\n this.searchQuery.set('')\n this.selectedCategory.set('all')\n }\n}\n",
"type": "registry:block",
"target": "~/src/app/components/blocks/media-asset-gallery/media-asset-gallery.component.ts"
},
{
"path": "packages/registry-angular/blocks/media-asset-gallery/index.ts",
"content": "export { UiMediaAssetGalleryComponent, DEFAULT_ASSETS, type AssetItem } from './media-asset-gallery.component'\n",
"type": "registry:block",
"target": "~/src/app/components/blocks/media-asset-gallery/index.ts"
}
],
"dependencies": [
"lucide-angular"
],
"devDependencies": [],
"registryDependencies": [
"https://uipkge.dev/r/angular/badge.json",
"https://uipkge.dev/r/angular/button.json",
"https://uipkge.dev/r/angular/card.json",
"https://uipkge.dev/r/angular/input.json",
"https://uipkge.dev/r/angular/separator.json",
"https://uipkge.dev/r/angular/sheet.json",
"https://uipkge.dev/r/angular/tabs.json"
],
"description": "Figma/Unsplash style Digital Asset Manager (DAM) with resolution tags, aspect ratio filters, tag chips, color palette inspector, multi-resolution download picker, and slide-over inspector drawer.",
"categories": [
"media",
"app",
"dashboard"
]
}