{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "academic-cap",
  "type": "registry:component",
  "title": "academic-cap",
  "description": "Animated academic-cap icon for Angular",
  "author": "Aniket Pawar <pawaraniket508@gmail.com>",
  "registryDependencies": [],
  "dependencies": [],
  "files": [
    {
      "path": "packages/angular/src/icons/academic-cap.ts",
      "type": "registry:component",
      "target": "~/src/app/components/heroicons-animated/academic-cap.ts",
      "content": "import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  signal,\n} from \"@angular/core\";\n\n@Component({\n  selector: \"hi-academic-cap\",\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    \"[attr.aria-label]\": \"'academic-cap'\",\n    role: \"img\",\n    \"(mouseenter)\": \"onMouseEnter()\",\n    \"(mouseleave)\": \"onMouseLeave()\",\n  },\n  template: `<svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    [attr.width]=\"size()\"\n    [attr.height]=\"size()\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    [attr.stroke]=\"color()\"\n    [attr.stroke-width]=\"strokeWidth()\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    class=\"icon-svg\"\n  >\n    <g [class.cap-animate]=\"shouldAnimate()\" style=\"transform-origin: center center\">\n      <path\n        d=\"M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342\"\n      />\n    </g>\n    <g [class.tassel-animate]=\"shouldAnimate()\" style=\"transform-origin: 6.75px 14.25px\">\n      <path\n        d=\"M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5\"\n      />\n    </g>\n  </svg>`,\n  styles: [\n    `\n      :host {\n        display: inline-block;\n      }\n\n      .icon-svg {\n        transform-box: fill-box;\n        transform-origin: center;\n      }\n\n      g {\n        transform-box: fill-box;\n      }\n\n      g.cap-animate {\n        animation: cap-animate 0.5s ease-in-out;\n      }\n\n      g.tassel-animate {\n        animation: tassel-animate 0.6s ease-in-out;\n      }\n\n      @keyframes cap-animate {\n        0% {\n          transform: translateY(0) rotate(0deg);\n        }\n        33% {\n          transform: translateY(-3px) rotate(-5deg);\n        }\n        66% {\n          transform: translateY(-3px) rotate(5deg);\n        }\n        100% {\n          transform: translateY(0) rotate(0deg);\n        }\n      }\n\n      @keyframes tassel-animate {\n        0% {\n          transform: rotate(0deg);\n        }\n        25% {\n          transform: rotate(10deg);\n        }\n        50% {\n          transform: rotate(-10deg);\n        }\n        75% {\n          transform: rotate(5deg);\n        }\n        100% {\n          transform: rotate(0deg);\n        }\n      }\n    `,\n  ],\n})\nexport class AcademicCapIcon {\n  readonly color = input(\"currentColor\");\n  readonly size = input(28);\n  readonly strokeWidth = input(1.5);\n  readonly animate = input(false);\n\n  protected isHovered = signal(false);\n  protected shouldAnimate = computed(() => this.animate() || this.isHovered());\n\n  onMouseEnter() {\n    this.isHovered.set(true);\n  }\n\n  onMouseLeave() {\n    this.isHovered.set(false);\n  }\n}\n"
    }
  ]
}