{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "archive-box",
  "type": "registry:component",
  "title": "archive-box",
  "description": "Animated archive-box icon for Angular",
  "author": "Aniket Pawar <pawaraniket508@gmail.com>",
  "registryDependencies": [],
  "dependencies": [],
  "files": [
    {
      "path": "packages/angular/src/icons/archive-box.ts",
      "type": "registry:component",
      "target": "~/src/app/components/heroicons-animated/archive-box.ts",
      "content": "import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  signal,\n} from \"@angular/core\";\n\n@Component({\n  selector: \"hi-archive-box\",\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    \"[attr.aria-label]\": \"'archive-box'\",\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=\"path-group\" [class.animate]=\"shouldAnimate()\">\n      <path\n        d=\"M19.6246 18.1321C19.5546 19.3214 18.5698 20.25 17.3785 20.25H6.62154C5.43022 20.25 4.44538 19.3214 4.37542 18.1321\"\n      />\n      <path d=\"M20.25 7.5L19.6246 18.1321\" />\n      <path d=\"M3.75 7.5L4.37542 18.1321\" />\n      <path d=\"M9.99976 11.25H13.9998\" />\n    </g>\n    <path\n      class=\"lid-group\"\n      [class.animate]=\"shouldAnimate()\"\n      d=\"M3.375 7.5H20.625C21.2463 7.5 21.75 6.99632 21.75 6.375V4.875C21.75 4.25368 21.2463 3.75 20.625 3.75H3.375C2.75368 3.75 2.25 4.25368 2.25 4.875V6.375C2.25 6.99632 2.75368 7.5 3.375 7.5Z\"\n    />\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      .path-group {\n        transform-box: fill-box;\n        transform-origin: center;\n        transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n      }\n\n      .path-group.animate {\n        animation: path-translate 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;\n      }\n\n      .lid-group {\n        transform-box: fill-box;\n        transform-origin: center;\n        transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n      }\n\n      .lid-group.animate {\n        animation: lid-translate 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;\n      }\n\n      @keyframes path-translate {\n        0% {\n          transform: translateY(0);\n        }\n        100% {\n          transform: translateY(1px);\n        }\n      }\n\n      @keyframes lid-translate {\n        0% {\n          transform: translateY(0);\n        }\n        100% {\n          transform: translateY(-1.5px);\n        }\n      }\n    `,\n  ],\n})\nexport class ArchiveBoxIcon {\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"
    }
  ]
}