ngx-academia-uniandes-library/lib/photo-gallery/photo-gallery.component.metadata.json

This library is used for Academia-Uniandes system.

[{"__symbolic":"module","version":4,"metadata":{"PhotoGalleryComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"app-photo-gallery","template":"\n    <div class=\"slider\">\n      <div>\n        <div class=\"previous\"><i class=\"fa fa-angle-left\" (click)=\"previous()\"></i></div>\n        <div class=\"next\"><i class=\"fa fa-angle-right\" (click)=\"next()\"></i></div>\n      </div>\n      <img *ngFor=\"let slide of slides; let i = index\"\n        [src]=\"slide\" [ngClass]=\"{'image-selected': currentIndex === i}\"\n        class=\"fade\"\n      >\n    </div>\n    <div class=\"dotsContainer\">\n      <div \n        *ngFor=\"let slide of slides; let i = index\" \n        class=\"dot\" \n        (click)=\"goTo(i)\">\n        <i class=\"fa fa-square\" [ngClass]=\"{'selected': currentIndex === i}\"></i>\n      </div>\n    </div>\n  ","styles":["\n    .fa-angle-left, .fa-angle-right {\n        font-size: 45px;\n        color: #757575;\n        transition: color 0.3s linear !important;\n    }\n\n    .fa-angle-left:hover, .fa-angle-right:hover {\n        color: #FFFF00;\n    }\n\n    .next {\n        position: absolute;\n        top: 50%;\n        transform: translate(0, -50%);\n        right: 32px;\n        z-index: 1;\n        cursor: pointer;\n    }\n  \n    .previous {\n        position: absolute;\n        top: 50%;\n        transform: translate(0, -50%);\n        left: 32px;\n        z-index: 1;\n        cursor: pointer;\n    }\n\n    .slider {\n        position: relative;\n        margin: auto;\n        overflow: hidden;\n        display: grid;\n        width: fit-content;\n        max-width: 45vw;\n        max-height: 60vh;\n        border-radius: 15px;\n        box-shadow: 0 6px 12px #757575;\n    }\n\n    .slider img {\n        display: none;\n        border-radius: 15px;\n    }\n\n    .slider img.image-selected {\n        display: block;\n        height: 60vh;\n    }\n\n    .dotsContainer {\n        position: absolute;\n        right: 0;\n        left: 0;\n        margin-top: 0.5rem;\n        display: flex;\n        justify-content: center;\n        padding: 0;\n        margin-bottom: 1 rem;\n    }\n  \n    .dot {\n      margin: 0 3px;\n      cursor: pointer;\n    }\n\n    .fa-square {\n        font-size: 15px;\n        color: #757575;\n        transition: color 0.3s linear !important;\n    }\n\n    .selected, .fa-square:hover {\n        color: #FFFF00;\n    }\n\n    .fade {\n        opacity: 1;\n        animation-name: fade;\n        animation-duration: 1s;\n    }\n\n    @keyframes fade {\n        from {\n            opacity: 0.4;\n        }\n        to {\n            opacity: 1;\n        }\n    }\n  "]}]}],"members":{"slides":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"previous":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"getCurrentSlideUrl":[{"__symbolic":"method"}],"goTo":[{"__symbolic":"method"}]}}}}]