Architecture

Directory structure and component tree of the gallery.

Directory Structure

src/
├── public-api.ts                ← Public API surface
├── assets/i18n/{en,es}.json
└── lib/
    ├── gallery.component.ts  ← Root entry component
    ├── components/
    │   ├── gallery/              ← Main grid + state hub
    │   ├── lightbox/             ← Lightbox overlay + animation
    │   ├── full-gallery/         ← Scrollable full-screen gallery
    │   └── shared/               ← buttons, controls, dialog-share, …
    ├── constants/                ← animations + constants
    ├── directives/               ← click-outside, device, back-nav
    ├── interface/                ← typed option/image interfaces
    ├── pipes/translate.pipe.ts
    ├── services/                 ← device, gallery, scroll, translation
    ├── types/                    ← distribution types
    └── utils/                    ← defaults + distribution helpers

Component Tree

GalleryComponent  (selector: ngx-gallery)   ← public entry component
└── GalleryGridComponent  (state hub — signals, computed, methods)
    ├── GalleryImageComponent × N    (OnPush, NgOptimizedImage)
    ├── ImageSkeletonComponent × N   (loading placeholders)
    ├── AllPicturesBtnComponent      (opens full-gallery)
    ├── HorizontalGalleryComponent   (thumbnail strip)
    ├── LightboxComponent            (slide-up modal)
    │   ├── LightboxGalleryComponent
    │   ├── ControlsComponent        (prev/next)
    │   └── ImageCaptionComponent
    ├── FullGalleryComponent         (full-screen overlay)
    ├── DialogShareComponent         (social share)
    └── OverlayComponent