{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "block-ui",
  "title": "Block Ui",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-angular/components/block-ui/block-ui.component.ts",
      "content": "import { Component, Input, TemplateRef, booleanAttribute, ChangeDetectionStrategy } from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport { UiRenderTemplateDirective } from '@/ui/popper/popper'\nimport { UiSpinnerComponent } from '@/ui/spinner/spinner.component'\nimport { blockUiVariants } from './block-ui.variants'\n\n/**\n * Angular port of UIPKGE BlockUi (React `BlockUi`). Wraps content; while `blocking` the\n * content is inert + aria-hidden (optionally blurred) and an overlay shows a Spinner (or the\n * `icon` template) and the `message` (or the `messageSlot` template). `opacity` /\n * `overlayColor` only affect the backdrop layer, so the spinner and message stay opaque.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-block-ui, [ui-block-ui]',\n  standalone: true,\n  imports: [UiRenderTemplateDirective, UiSpinnerComponent],\n  host: {\n    '[attr.data-uipkge]': '\"\"',\n    '[attr.data-slot]': '\"block-ui\"',\n    '[attr.data-blocked]': 'blocking ? \"\" : null',\n    '[class]': 'hostClass',\n  },\n  template: `\n    <div [class]=\"contentClass\" [attr.aria-hidden]=\"blocking ? 'true' : null\" [attr.inert]=\"blocking ? '' : null\">\n      <ng-content />\n    </div>\n    @if (blocking) {\n      <div\n        class=\"absolute inset-0 z-50 flex flex-col items-center justify-center gap-3\"\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-busy=\"true\"\n      >\n        <div [class]=\"backdropClass\" [style.opacity]=\"opacity\" [style.background-color]=\"overlayColor || null\"></div>\n        @if (icon) {\n          <ng-container [uiRenderTemplate]=\"icon\" />\n        } @else if (showSpinner) {\n          <ui-spinner size=\"lg\" />\n        }\n        @if (messageSlot) {\n          <div class=\"text-foreground text-sm font-medium\"><ng-container [uiRenderTemplate]=\"messageSlot\" /></div>\n        } @else if (message) {\n          <p class=\"text-foreground text-sm font-medium\">{{ message }}</p>\n        }\n      </div>\n    }\n  `,\n})\nexport class UiBlockUiComponent {\n  /** When true, the overlay is shown and the wrapped content is blocked. */\n  @Input({ transform: booleanAttribute }) blocking = false\n  @Input() message = 'Loading...'\n  @Input() opacity = 0.6\n  @Input() overlayColor = ''\n  @Input({ transform: booleanAttribute }) blur = false\n  @Input({ transform: booleanAttribute }) showSpinner = true\n  /** Custom icon template replacing the default Spinner (React `icon`). */\n  @Input() icon?: TemplateRef<unknown> | null\n  /** Custom message template replacing the `message` string (React `messageSlot`). */\n  @Input() messageSlot?: TemplateRef<unknown> | null\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn(blockUiVariants(), this.className)\n  }\n\n  get contentClass(): string {\n    return cn(\n      'block-ui-content',\n      this.blocking && 'pointer-events-none',\n      this.blur && this.blocking && 'blur-[2px] transition-[filter]',\n    )\n  }\n\n  get backdropClass(): string {\n    return cn('absolute inset-0', !this.overlayColor && 'bg-background')\n  }\n}\n\nexport { blockUiVariants }\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/block-ui/block-ui.component.ts"
    },
    {
      "path": "packages/registry-angular/components/block-ui/block-ui.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\nexport const blockUiVariants = cva('relative inline-block')\n\nexport type BlockUiVariants = VariantProps<typeof blockUiVariants>\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/block-ui/block-ui.variants.ts"
    },
    {
      "path": "packages/registry-angular/components/block-ui/index.ts",
      "content": "export { UiBlockUiComponent, blockUiVariants } from './block-ui.component'\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/block-ui/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/spinner.json",
    "https://uipkge.dev/r/angular/popper.json"
  ],
  "description": "Overlay that blocks interaction during loading. Wraps content and shows a spinner + message overlay. `blocking` toggles the blocked state with configurable overlay opacity, color, background blur, and custom icon / message templates. Composes the spinner primitive.",
  "categories": [
    "feedback",
    "utility"
  ]
}