{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "footer-sitemap-dense",
  "title": "Footer — Dense Sitemap",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/footer-sitemap-dense/footer-sitemap-dense.component.ts",
      "content": "// Sitemap-style footer with six tightly-set link columns, a region and currency\n// selector row, compliance marks, and a status indicator reporting live uptime.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport { Github, Layers, Linkedin, LucideAngularModule } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n  UiSelectComponent,\n  UiSelectContentComponent,\n  UiSelectItemComponent,\n  UiSelectTriggerComponent,\n  UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\ninterface SitemapDenseSection {\n  heading: string\n  links: string[]\n}\n\nconst sections: SitemapDenseSection[] = [\n  { heading: 'Platform', links: ['Metric layer', 'Dashboards', 'Alerting', 'Embedding', 'API', 'CLI'] },\n  { heading: 'Solutions', links: ['Finance', 'RevOps', 'Analytics', 'Engineering', 'Healthcare', 'Retail'] },\n  { heading: 'Developers', links: ['Documentation', 'API reference', 'SDKs', 'Webhooks', 'Status', 'Changelog'] },\n  { heading: 'Resources', links: ['Guides', 'Benchmarks', 'Customers', 'Blog', 'Webinars', 'Glossary'] },\n  { heading: 'Company', links: ['About', 'Careers', 'Press kit', 'Partners', 'Contact', 'Security'] },\n  { heading: 'Legal', links: ['Privacy', 'Terms', 'DPA', 'Subprocessors', 'SLA', 'Accessibility'] },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-footer-sitemap-dense, [ui-footer-sitemap-dense]',\n  standalone: true,\n  // React renders the root <footer> 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    UiSelectComponent,\n    UiSelectContentComponent,\n    UiSelectItemComponent,\n    UiSelectTriggerComponent,\n    UiSelectValueComponent,\n    UiSeparatorComponent,\n  ],\n  template: `\n    <footer data-slot=\"footer-sitemap-dense\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-6xl px-6 py-12\">\n        <div class=\"grid grid-cols-2 gap-x-6 gap-y-8 sm:grid-cols-3 lg:grid-cols-6\">\n          @for (section of sectionList; track section.heading) {\n            <div>\n              <p class=\"text-muted-foreground/70 text-xs font-medium tracking-wide uppercase\">{{ section.heading }}</p>\n              <ul class=\"mt-3 space-y-1.5\">\n                @for (link of section.links; track link) {\n                  <li>\n                    <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                      {{ link }}\n                    </a>\n                  </li>\n                }\n              </ul>\n            </div>\n          }\n        </div>\n\n        <div ui-separator class=\"my-10\"></div>\n\n        <div class=\"flex flex-col gap-6 lg:flex-row lg:items-center\">\n          <a href=\"#top\" class=\"flex shrink-0 items-center gap-2 text-sm font-semibold tracking-tight\">\n            <lucide-icon [img]=\"Layers\" class=\"text-primary size-4\" aria-hidden=\"true\" />\n            Northwind\n          </a>\n\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <ui-select [value]=\"region()\" (valueChange)=\"region.set($event)\">\n              <button ui-select-trigger class=\"h-8 w-40 text-xs\" aria-label=\"Data region\">\n                <ui-select-value />\n              </button>\n              <ui-select-content>\n                <ui-select-item value=\"eu\">EU (Frankfurt)</ui-select-item>\n                <ui-select-item value=\"us\">US (Virginia)</ui-select-item>\n                <ui-select-item value=\"au\">AU (Sydney)</ui-select-item>\n              </ui-select-content>\n            </ui-select>\n\n            <ui-select [value]=\"currency()\" (valueChange)=\"currency.set($event)\">\n              <button ui-select-trigger class=\"h-8 w-28 text-xs\" aria-label=\"Currency\">\n                <ui-select-value />\n              </button>\n              <ui-select-content>\n                <ui-select-item value=\"eur\">EUR €</ui-select-item>\n                <ui-select-item value=\"usd\">USD $</ui-select-item>\n                <ui-select-item value=\"gbp\">GBP £</ui-select-item>\n              </ui-select-content>\n            </ui-select>\n          </div>\n\n          <div class=\"flex flex-wrap items-center gap-3 lg:ml-auto\">\n            <!-- Status dot is a live indicator, so it carries its own text for\n                 screen readers rather than relying on colour alone. -->\n            <a href=\"#status\" class=\"hover:bg-muted flex items-center gap-2 rounded-md px-2 py-1 transition-colors\">\n              <span class=\"bg-success size-2 rounded-full\" aria-hidden=\"true\"></span>\n              <span class=\"text-muted-foreground text-xs\">All systems operational</span>\n            </a>\n            <span ui-badge variant=\"outline\">SOC 2</span>\n            <span ui-badge variant=\"outline\">GDPR</span>\n            <button ui-button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"GitHub\">\n              <lucide-icon [img]=\"Github\" class=\"size-4\" aria-hidden=\"true\" />\n            </button>\n            <button ui-button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"LinkedIn\">\n              <lucide-icon [img]=\"Linkedin\" class=\"size-4\" aria-hidden=\"true\" />\n            </button>\n          </div>\n        </div>\n\n        <p class=\"text-muted-foreground mt-6 text-xs\">© 2026 Northwind Data, Inc. All rights reserved.</p>\n      </div>\n    </footer>\n  `,\n})\nexport class UiFooterSitemapDenseComponent {\n  protected readonly Github = Github\n  protected readonly Layers = Layers\n  protected readonly Linkedin = Linkedin\n\n  protected readonly sectionList = sections\n\n  readonly region = signal('eu')\n  readonly currency = signal('eur')\n\n  @Input('class') className?: string\n\n  get rootClass(): string {\n    return cn('border-border bg-background border-t', this.className)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/footer-sitemap-dense/footer-sitemap-dense.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/footer-sitemap-dense/index.ts",
      "content": "export { UiFooterSitemapDenseComponent } from './footer-sitemap-dense.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/footer-sitemap-dense/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/select.json",
    "https://uipkge.dev/r/angular/separator.json"
  ],
  "description": "Sitemap-style footer with six tightly-set link columns, a region and currency selector row, compliance marks, and a status indicator reporting live uptime.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "footer"
}