{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "sticky-cta-corner-button",
  "title": "Sticky CTA — Corner Button",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/sticky-cta-corner-button/sticky-cta-corner-button.component.ts",
      "content": "// Compact corner action that expands on hover or focus to reveal its label,\n// staying out of the content column on narrow screens.\n// Deprecated alias of the sticky conversion trio (use ui-sticky-cta-corner-button\n// from `sticky-cta`). Port of the Vue/React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport { LucideAngularModule, MessageSquare } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-sticky-cta-corner-button, [ui-sticky-cta-corner-button]',\n  standalone: true,\n  // The block renders its own fixed root <div>: keep this wrapper out of the layout.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent],\n  template: `\n    <div data-slot=\"sticky-cta-corner-button\" [class]=\"rootClass\">\n      <button\n        ui-button\n        size=\"lg\"\n        class=\"group h-12 gap-0 rounded-full pr-4 pl-4 shadow-lg\"\n        (mouseenter)=\"expanded.set(true)\"\n        (mouseleave)=\"expanded.set(false)\"\n        (focus)=\"expanded.set(true)\"\n        (blur)=\"expanded.set(false)\"\n      >\n        <lucide-icon [img]=\"MessageSquare\" class=\"size-5 shrink-0\" />\n        <!-- Width, not display: a hidden label would not animate, and a label that\n             pops in shifts the button under the cursor mid-click. -->\n        <span [class]=\"labelClass\"> Ask an engineer </span>\n      </button>\n\n      <span\n        ui-badge\n        variant=\"secondary\"\n        class=\"border-background pointer-events-none absolute -top-1 -right-1 size-5 justify-center rounded-full border-2 p-0 text-xs\"\n      >\n        1\n      </span>\n    </div>\n  `,\n})\nexport class UiStickyCtaCornerButtonComponent {\n  protected readonly MessageSquare = MessageSquare\n\n  // Expands on focus as well as hover: a keyboard user should be able to read the\n  // label before deciding whether to activate it.\n  readonly expanded = signal(false)\n\n  @Input('class') className?: string\n\n  get rootClass(): string {\n    return cn('fixed right-5 bottom-5 z-50', this.className)\n  }\n\n  get labelClass(): string {\n    return cn(\n      'overflow-hidden whitespace-nowrap transition-colors duration-200',\n      this.expanded() ? 'ml-2 max-w-[10rem] opacity-100' : 'max-w-0 opacity-0',\n    )\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/sticky-cta-corner-button/sticky-cta-corner-button.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/sticky-cta-corner-button/index.ts",
      "content": "export { UiStickyCtaCornerButtonComponent } from './sticky-cta-corner-button.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/sticky-cta-corner-button/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json"
  ],
  "description": "Compact corner action that expands on hover or focus to reveal its label, staying out of the content column on narrow screens.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "sticky-cta"
}