angular-natural-gallery - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

.yo-rc.json

 {
   "generator-angular2-library": {
     "promptValues": {
-      "gitRepositoryUrl": "https://github.com/sambaptista/angular-natural-gallery"
+      "gitRepositoryUrl": "https://github.com/Ecodev/angular-natural-gallery"
     }
   }
 }

dist/angular-natural-gallery.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":4,"exports":[{"export":[{"name":"Gallery","as":"Gallery"}],"from":"natural-gallery-js"}],"metadata":{"NaturalGalleryModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"NaturalGalleryComponent"}],"exports":[{"__symbolic":"reference","name":"NaturalGalleryComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"NaturalGalleryModule"},"providers":[]}}}},"NaturalGalleryComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"natural-gallery","template":"<!-- Gallery template --> <div #gallery></div> <!-- Photoswipe template --> <div #pswp class=\"pswp\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\"> <div class=\"pswp__bg\"></div> <div class=\"pswp__scroll-wrap\"> <div class=\"pswp__container\"> <div class=\"pswp__item\"></div> <div class=\"pswp__item\"></div> <div class=\"pswp__item\"></div> </div> <div class=\"pswp__ui pswp__ui--hidden\"> <div class=\"pswp__top-bar\"> <div class=\"pswp__counter\"></div> <button class=\"pswp__button pswp__button--close\" title=\"Close (Esc)\"></button> <button class=\"pswp__button pswp__button--fs\" title=\"Toggle fullscreen\"></button> <button class=\"pswp__button pswp__button--zoom\" title=\"Zoom in/out\"></button> <div class=\"pswp__preloader\"> <div class=\"pswp__preloader__icn\"> <div class=\"pswp__preloader__cut\"> <div class=\"pswp__preloader__donut\"></div> </div> </div> </div> </div> <div class=\"pswp__share-modal pswp__share-modal--hidden pswp__single-tap\"> <div class=\"pswp__share-tooltip\"></div> </div> <button class=\"pswp__button pswp__button--arrow--left\" title=\"Previous (arrow left)\"></button> <button class=\"pswp__button pswp__button--arrow--right\" title=\"Next (arrow right)\"></button> <div class=\"pswp__caption\"> <div class=\"pswp__caption__center\"></div> </div> </div> </div> </div> ","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"styles":[""]}]}],"members":{"gallery":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["gallery"]}]}],"pswp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["pswp"]}]}],"scrollable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"images":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}}},"origins":{"NaturalGalleryModule":"./index","NaturalGalleryComponent":"./gallery/gallery.component"},"importAs":"angular-natural-gallery"}
+{"__symbolic":"module","version":4,"exports":[{"export":[{"name":"Gallery","as":"Gallery"}],"from":"natural-gallery-js"}],"metadata":{"NaturalGalleryModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"NaturalGalleryComponent"}],"exports":[{"__symbolic":"reference","name":"NaturalGalleryComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"NaturalGalleryModule"},"providers":[]}}}},"NaturalGalleryComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"natural-gallery","template":"<!-- Gallery template --> <div #gallery></div> <!-- Photoswipe template --> <div #pswp class=\"pswp\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\"> <div class=\"pswp__bg\"></div> <div class=\"pswp__scroll-wrap\"> <div class=\"pswp__container\"> <div class=\"pswp__item\"></div> <div class=\"pswp__item\"></div> <div class=\"pswp__item\"></div> </div> <div class=\"pswp__ui pswp__ui--hidden\"> <div class=\"pswp__top-bar\"> <div class=\"pswp__counter\"></div> <button class=\"pswp__button pswp__button--close\" title=\"Close (Esc)\"></button> <button class=\"pswp__button pswp__button--fs\" title=\"Toggle fullscreen\"></button> <button class=\"pswp__button pswp__button--zoom\" title=\"Zoom in/out\"></button> <div class=\"pswp__preloader\"> <div class=\"pswp__preloader__icn\"> <div class=\"pswp__preloader__cut\"> <div class=\"pswp__preloader__donut\"></div> </div> </div> </div> </div> <div class=\"pswp__share-modal pswp__share-modal--hidden pswp__single-tap\"> <div class=\"pswp__share-tooltip\"></div> </div> <button class=\"pswp__button pswp__button--arrow--left\" title=\"Previous (arrow left)\"></button> <button class=\"pswp__button pswp__button--arrow--right\" title=\"Next (arrow right)\"></button> <div class=\"pswp__caption\"> <div class=\"pswp__caption__center\"></div> </div> </div> </div> </div> ","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"styles":["/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */ /* Styles for basic PhotoSwipe functionality (sliding area, open/close transitions) */ /* pswp = photoswipe */ .pswp { display: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; -ms-touch-action: none; touch-action: none; z-index: 1500; -webkit-text-size-adjust: 100%; /* create separate layer, to avoid paint on window.onscroll in webkit/blink */ -webkit-backface-visibility: hidden; outline: none; } .pswp * { -webkit-box-sizing: border-box; box-sizing: border-box; } .pswp img { max-width: none; } /* style is added when JS option showHideOpacity is set to true */ .pswp--animate_opacity { /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */ opacity: 0.001; will-change: opacity; /* for open/close transition */ -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--open { display: block; } .pswp--zoom-allowed .pswp__img { /* autoprefixer: off */ cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .pswp--zoomed-in .pswp__img { /* autoprefixer: off */ cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .pswp--dragging .pswp__img { /* autoprefixer: off */ cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } /* Background is added as a separate element. As animating opacity is much faster than animating rgba() background-color. */ .pswp__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; will-change: opacity; } .pswp__scroll-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .pswp__container, .pswp__zoom-wrap { -ms-touch-action: none; touch-action: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } /* Prevent selection and tap highlights */ .pswp__container, .pswp__img { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .pswp__zoom-wrap { position: absolute; width: 100%; -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; /* for open/close transition */ -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp__bg { will-change: opacity; /* for open/close transition */ -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap { -webkit-transition: none; transition: none; } .pswp__container, .pswp__zoom-wrap { -webkit-backface-visibility: hidden; } .pswp__item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; } .pswp__img { position: absolute; width: auto; height: auto; top: 0; left: 0; } /* stretched thumbnail or div placeholder element (see below) style is added to avoid flickering in webkit/blink when layers overlap */ .pswp__img--placeholder { -webkit-backface-visibility: hidden; } /* div element that matches size of large image large image loads on top of it */ .pswp__img--placeholder--blank { background: #222; } .pswp--ie .pswp__img { width: 100% !important; height: auto !important; left: 0; top: 0; } /* Error message appears when image is not loaded (JS option errorMsg controls markup) */ .pswp__error-msg { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; font-size: 14px; line-height: 16px; margin-top: -8px; color: #CCC; } .pswp__error-msg a { color: #CCC; text-decoration: underline; } /*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */ /* Contents: 1. Buttons 2. Share modal and links 3. Index indicator (\"1 of X\" counter) 4. Caption 5. Loading indicator 6. Additional styles (root element, top bar, idle state, hidden state, etc.) */ /* 1. Buttons */ /* <button> css reset */ .pswp__button { width: 44px; height: 44px; position: relative; background: none; cursor: pointer; overflow: visible; -webkit-appearance: none; display: block; border: 0; padding: 0; margin: 0; float: right; opacity: 0.75; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; -webkit-box-shadow: none; box-shadow: none; } .pswp__button:focus, .pswp__button:hover { opacity: 1; } .pswp__button:active { outline: none; opacity: 0.9; } .pswp__button::-moz-focus-inner { padding: 0; border: 0; } /* pswp__ui--over-close class it added when mouse is over element that should close gallery */ .pswp__ui--over-close .pswp__button--close { opacity: 1; } .pswp__button, .pswp__button--arrow--left:before, .pswp__button--arrow--right:before { background: url(default-skin.png) 0 0 no-repeat; background-size: 264px 88px; width: 44px; height: 44px; } @media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) { /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */ .pswp--svg .pswp__button, .pswp--svg .pswp__button--arrow--left:before, .pswp--svg .pswp__button--arrow--right:before { background-image: url(default-skin.svg); } .pswp--svg .pswp__button--arrow--left, .pswp--svg .pswp__button--arrow--right { background: none; } } .pswp__button--close { background-position: 0 -44px; } .pswp__button--share { background-position: -44px -44px; } .pswp__button--fs { display: none; } .pswp--supports-fs .pswp__button--fs { display: block; } .pswp--fs .pswp__button--fs { background-position: -44px 0; } .pswp__button--zoom { display: none; background-position: -88px 0; } .pswp--zoom-allowed .pswp__button--zoom { display: block; } .pswp--zoomed-in .pswp__button--zoom { background-position: -132px 0; } /* no arrows on touch screens */ .pswp--touch .pswp__button--arrow--left, .pswp--touch .pswp__button--arrow--right { visibility: hidden; } /* Arrow buttons hit area (icon is added to :before pseudo-element) */ .pswp__button--arrow--left, .pswp__button--arrow--right { background: none; top: 50%; margin-top: -50px; width: 70px; height: 100px; position: absolute; } .pswp__button--arrow--left { left: 0; } .pswp__button--arrow--right { right: 0; } .pswp__button--arrow--left:before, .pswp__button--arrow--right:before { content: ''; top: 35px; background-color: rgba(0, 0, 0, 0.3); height: 30px; width: 32px; position: absolute; } .pswp__button--arrow--left:before { left: 6px; background-position: -138px -44px; } .pswp__button--arrow--right:before { right: 6px; background-position: -94px -44px; } /* 2. Share modal/popup and links */ .pswp__counter, .pswp__share-modal { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .pswp__share-modal { display: block; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; top: 0; left: 0; padding: 10px; position: absolute; z-index: 1600; opacity: 0; -webkit-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; -webkit-backface-visibility: hidden; will-change: opacity; } .pswp__share-modal--hidden { display: none; } .pswp__share-tooltip { z-index: 1620; position: absolute; background: #FFF; top: 56px; border-radius: 2px; display: block; width: auto; right: 44px; -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); -webkit-transform: translateY(6px); -ms-transform: translateY(6px); transform: translateY(6px); -webkit-transition: -webkit-transform 0.25s; transition: transform 0.25s; -webkit-backface-visibility: hidden; will-change: transform; } .pswp__share-tooltip a { display: block; padding: 8px 12px; color: #000; text-decoration: none; font-size: 14px; line-height: 18px; } .pswp__share-tooltip a:hover { text-decoration: none; color: #000; } .pswp__share-tooltip a:first-child { /* round corners on the first/last list item */ border-radius: 2px 2px 0 0; } .pswp__share-tooltip a:last-child { border-radius: 0 0 2px 2px; } .pswp__share-modal--fade-in { opacity: 1; } .pswp__share-modal--fade-in .pswp__share-tooltip { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /* increase size of share links on touch devices */ .pswp--touch .pswp__share-tooltip a { padding: 16px 12px; } a.pswp__share--facebook:before { content: ''; display: block; width: 0; height: 0; position: absolute; top: -12px; right: 15px; border: 6px solid transparent; border-bottom-color: #FFF; -webkit-pointer-events: none; -moz-pointer-events: none; pointer-events: none; } a.pswp__share--facebook:hover { background: #3E5C9A; color: #FFF; } a.pswp__share--facebook:hover:before { border-bottom-color: #3E5C9A; } a.pswp__share--twitter:hover { background: #55ACEE; color: #FFF; } a.pswp__share--pinterest:hover { background: #CCC; color: #CE272D; } a.pswp__share--download:hover { background: #DDD; } /* 3. Index indicator (\"1 of X\" counter) */ .pswp__counter { position: absolute; left: 0; top: 0; height: 44px; font-size: 13px; line-height: 44px; color: #FFF; opacity: 0.75; padding: 0 10px; } /* 4. Caption */ .pswp__caption { position: absolute; left: 0; bottom: 0; width: 100%; min-height: 44px; } .pswp__caption small { font-size: 11px; color: #BBB; } .pswp__caption__center { text-align: left; max-width: 420px; margin: 0 auto; font-size: 13px; padding: 10px; line-height: 20px; color: #CCC; } .pswp__caption--empty { display: none; } /* Fake caption element, used to calculate height of next/prev image */ .pswp__caption--fake { visibility: hidden; } /* 5. Loading indicator (preloader) You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR */ .pswp__preloader { width: 44px; height: 44px; position: absolute; top: 0; left: 50%; margin-left: -22px; opacity: 0; -webkit-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; will-change: opacity; direction: ltr; } .pswp__preloader__icn { width: 20px; height: 20px; margin: 12px; } .pswp__preloader--active { opacity: 1; } .pswp__preloader--active .pswp__preloader__icn { /* We use .gif in browsers that don't support CSS animation */ background: url(preloader.gif) 0 0 no-repeat; } .pswp--css_animation .pswp__preloader--active { opacity: 1; } .pswp--css_animation .pswp__preloader--active .pswp__preloader__icn { -webkit-animation: clockwise 500ms linear infinite; animation: clockwise 500ms linear infinite; } .pswp--css_animation .pswp__preloader--active .pswp__preloader__donut { -webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; } .pswp--css_animation .pswp__preloader__icn { background: none; opacity: 0.75; width: 14px; height: 14px; position: absolute; left: 15px; top: 15px; margin: 0; } .pswp--css_animation .pswp__preloader__cut { /*  The idea of animating inner circle is based on Polymer (\"material\") loading indicator  by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html */ position: relative; width: 7px; height: 14px; overflow: hidden; } .pswp--css_animation .pswp__preloader__donut { -webkit-box-sizing: border-box; box-sizing: border-box; width: 14px; height: 14px; border: 2px solid #FFF; border-radius: 50%; border-left-color: transparent; border-bottom-color: transparent; position: absolute; top: 0; left: 0; background: none; margin: 0; } @media screen and (max-width: 1024px) { .pswp__preloader { position: relative; left: auto; top: auto; margin: 0; float: right; } } @-webkit-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes clockwise { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes donut-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(-140deg); transform: rotate(-140deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } @keyframes donut-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(-140deg); transform: rotate(-140deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } /* 6. Additional styles */ /* root element of UI */ .pswp__ui { -webkit-font-smoothing: auto; visibility: visible; opacity: 1; z-index: 1550; } /* top black bar with buttons and \"1 of X\" indicator */ .pswp__top-bar { position: absolute; left: 0; top: 0; height: 44px; width: 100%; } .pswp__caption, .pswp__top-bar, .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { -webkit-backface-visibility: hidden; will-change: opacity; -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } /* pswp--has_mouse class is added only when two subsequent mousemove events occur */ .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { visibility: visible; } .pswp__top-bar, .pswp__caption { background-color: rgba(0, 0, 0, 0.5); } /* pswp__ui--fit class is added when main image \"fits\" between top bar and bottom bar (caption) */ .pswp__ui--fit .pswp__top-bar, .pswp__ui--fit .pswp__caption { background-color: rgba(0, 0, 0, 0.3); } /* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */ .pswp__ui--idle .pswp__top-bar { opacity: 0; } .pswp__ui--idle .pswp__button--arrow--left, .pswp__ui--idle .pswp__button--arrow--right { opacity: 0; } /* pswp__ui--hidden class is added when controls are hidden e.g. when user taps to toggle visibility of controls */ .pswp__ui--hidden .pswp__top-bar, .pswp__ui--hidden .pswp__caption, .pswp__ui--hidden .pswp__button--arrow--left, .pswp__ui--hidden .pswp__button--arrow--right { /* Force paint & create composition layer for controls. */ opacity: 0.001; } /* pswp__ui--one-slide class is added when there is just one item in gallery */ .pswp__ui--one-slide .pswp__button--arrow--left, .pswp__ui--one-slide .pswp__button--arrow--right, .pswp__ui--one-slide .pswp__counter { display: none; } .pswp__element--disabled { display: none !important; } .pswp--minimal--dark .pswp__top-bar { background: none; } .pswp { z-index: 4; } .pswp .pswp__caption__center { text-align: center; } .natural-gallery { position: relative; } .natural-gallery *, .natural-gallery :after, .natural-gallery :before { box-sizing: border-box; margin: 0; padding: 0; } .natural-gallery iframe { position: absolute; width: 100%; height: 0; top: 0; left: 0; background-color: transparent; border: 0; } .natural-gallery .natural-gallery-body { padding: 0; margin: 0; } .natural-gallery .natural-gallery-body:after { content: \"\"; display: block; clear: both; } .natural-gallery .natural-gallery-body[href] { cursor: pointer; } .natural-gallery .natural-gallery-body .natural-gallery-noresults { margin: 3em auto 2em; width: 100px; height: 100px; text-align: center; font-weight: 700; font-size: 15px; color: #888; } .natural-gallery .natural-gallery-body .natural-gallery-thumbnail img { box-shadow: 3px 3px 5px #999; text-align: center; will-change: opacity; } .natural-gallery .natural-gallery-body .figure { position: relative; display: block; float: left; overflow: hidden; margin: 0; } .natural-gallery .natural-gallery-body .figure:hover .title.hover { -webkit-transform: translateY(0); transform: translateY(0); } .natural-gallery .natural-gallery-body .figure.loading:before { content: \"\"; position: absolute; z-index: 2; top: 50%; left: 50%; width: 700px; height: 700px; margin-left: -350px; margin-top: -350px; border-radius: 50%; -webkit-transform: scale(0); transform: scale(0); opacity: .3; -webkit-animation-name: a; animation-name: a; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-delay: .2s; animation-delay: .2s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; will-change: width,height,opacity; } .natural-gallery .natural-gallery-body .figure.loaded.visible > .image { opacity: 1; transition: opacity 1s ease-out,transform 1s ease-out; } .natural-gallery .natural-gallery-body .figure .image { display: block; position: relative; z-index: 1; opacity: 0; background-repeat: no-repeat; background-position: 50%; background-size: cover; } .natural-gallery .natural-gallery-body .figure[href] .title { cursor: pointer; margin: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); border-radius: 4px; text-decoration: none; } .natural-gallery .natural-gallery-body .figure .title { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; background: rgba(0, 0, 0, 0.6); text-align: center; color: #fff; font-size: 14px; line-height: 2em; font-weight: 400; padding: 10px; transition: all .2s ease; overflow: hidden; white-space: normal; } .natural-gallery .natural-gallery-body .figure .title[href]:hover { margin-bottom: 12px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5); } .natural-gallery .natural-gallery-body .figure .title.hover { padding: 10px; -webkit-transform: translateY(calc(100% + 10px)); transform: translateY(calc(100% + 10px)); } .natural-gallery .natural-gallery-body .link { cursor: pointer; } .natural-gallery .natural-gallery-body .button { cursor: pointer; margin: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); border-radius: 4px; text-decoration: none; } .natural-gallery .natural-gallery-body .zoomable { cursor: pointer; } .natural-gallery .natural-gallery-body .image.zoomable:hover, .natural-gallery .natural-gallery-body .zoomable:hover .image { -webkit-transform: rotate(2deg) scale(1.4); transform: rotate(2deg) scale(1.4); } .natural-gallery .natural-gallery-header { margin: 0 0 10px; } .natural-gallery .natural-gallery-header:after { content: \"\"; display: block; clear: both; } .natural-gallery .natural-gallery-header .natural-gallery-searchTerm > svg { width: 1.4em; height: 1.4em; top: .4em; } .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input { border: none; background: none; } .natural-gallery .natural-gallery-header .natural-gallery-categories input[type=checkbox] { display: none; } .natural-gallery .natural-gallery-header .natural-gallery-categories label { position: relative; cursor: pointer; } .natural-gallery .natural-gallery-header .natural-gallery-categories .label { margin-left: 1.5em; margin-right: 5px; } .natural-gallery .natural-gallery-header .sectionContainer { margin-top: 30px; position: relative; } .natural-gallery .natural-gallery-header .natural-gallery-categories, .natural-gallery .natural-gallery-header .natural-gallery-categories label, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm { float: left; margin-right: 5px; } .natural-gallery .natural-gallery-header .natural-gallery-categories .label > svg, .natural-gallery .natural-gallery-header .natural-gallery-images > svg, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm > svg { content: \"\"; float: left; position: absolute; left: 5px; font-size: 16px; background-repeat: no-repeat; } .natural-gallery .natural-gallery-header .natural-gallery-categories .label > svg, .natural-gallery .natural-gallery-header .natural-gallery-images > svg { width: 1.2em; height: 1.2em; top: .5em; } .natural-gallery .natural-gallery-header .natural-gallery-categories .label, .natural-gallery .natural-gallery-header .natural-gallery-images, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm .sectionName, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input { display: block; padding: 9px 5px 6px; font-size: 16px; line-height: 1.3em; height: 35px; } .natural-gallery .natural-gallery-header .natural-gallery-images { float: right; margin-right: 0; margin-left: 5px; padding-left: 2em; } .natural-gallery .natural-gallery-header .natural-gallery-categories .label, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input { font-weight: 400; } .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input { width: 300px; padding-left: 2em; } .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input:focus { outline: none; } .natural-gallery .natural-gallery-header .natural-gallery-categories label, .natural-gallery .natural-gallery-header .sectionName { margin-bottom: 0; } .natural-gallery .natural-gallery-header .sectionName { left: 5px; top: 0; margin-left: 1.5em; font-size: 16px; font-weight: 400; position: absolute; pointer-events: none; transition: all .2s ease; } .natural-gallery .natural-gallery-header .natural-gallery-categories .sectionName, .natural-gallery .natural-gallery-header .natural-gallery-images .sectionName, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm:hover .sectionName, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input:focus ~ .sectionName, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input:valid ~ .sectionName { top: -2.2em; font-size: 14px !important; line-height: 1em; padding: 0; margin: 1.2em 0 0; } .natural-gallery .natural-gallery-header .natural-gallery-categories .sectionName:last-child { display: none; } .natural-gallery .natural-gallery-header .natural-gallery-categories label, .natural-gallery .natural-gallery-header .natural-gallery-images, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm { border: none; border-bottom-width: 1px; border-bottom-style: solid; } .natural-gallery .natural-gallery-header .bar { position: relative; display: block; } .natural-gallery .natural-gallery-header .bar:after, .natural-gallery .natural-gallery-header .bar:before { content: \"\"; height: 3px; width: 0; bottom: -2px; position: absolute; transition: all .2s ease; } .natural-gallery .natural-gallery-header .bar:before { left: 50%; } .natural-gallery .natural-gallery-header .bar:after { right: 50%; } .natural-gallery .natural-gallery-header .natural-gallery-categories input[type=checkbox]:checked ~ .bar:after, .natural-gallery .natural-gallery-header .natural-gallery-categories input[type=checkbox]:checked ~ .bar:before, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input:focus ~ .bar:after, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input:focus ~ .bar:before, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input:valid ~ .bar:after, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input:valid ~ .bar:before { width: 50%; } .natural-gallery .natural-gallery-next { display: block; margin: 10px auto; text-align: center; height: 30px; } .natural-gallery .natural-gallery-next svg { cursor: pointer; font-size: 16px; height: inherit; } .natural-gallery .natural-gallery-next:after { content: \"\"; display: block; clear: both; } @-webkit-keyframes a { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: .3; } to { -webkit-transform: scale(1); transform: scale(1); opacity: .05; } } @keyframes a { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: .3; } to { -webkit-transform: scale(1); transform: scale(1); opacity: .05; } } /* * Colors * ----------------------------------------- */ .natural-gallery .natural-gallery-body .figure.loading::before, .natural-gallery .bar::before, .natural-gallery .bar::after { background-color: #0089e0 !important; } .natural-gallery .natural-gallery-body .figure.loading.errored::before { background-color: red !important; } /* Inactive */ .natural-gallery .natural-gallery-searchTerm, .natural-gallery .natural-gallery-categories label, .natural-gallery .natural-gallery-images { border-bottom-color: #999999 !important; } /* Disabled */ .natural-gallery .sectionName, .natural-gallery .natural-gallery-categories .label, .natural-gallery .natural-gallery-categories input[type=checkbox] ~ .label svg, .natural-gallery .natural-gallery-noresults svg { color: #999999 !important; fill: #999999 !important; } /* Normal */ .natural-gallery .natural-gallery-searchTerm input, .natural-gallery .natural-gallery-categories input[type=checkbox]:checked ~ .label { color: #444444 !important; } /* Highlighted */ .natural-gallery .natural-gallery-next svg, .natural-gallery .natural-gallery-header svg, .natural-gallery .natural-gallery-categories input[type=checkbox]:checked, .natural-gallery .natural-gallery-categories label:hover .label, .natural-gallery .natural-gallery-categories:hover .sectionName, .natural-gallery .natural-gallery-searchTerm:hover .sectionName, .natural-gallery .natural-gallery-searchTerm:hover input, .natural-gallery .natural-gallery-searchTerm:hover .sectionName, .natural-gallery .natural-gallery-images:hover .sectionName { color: #0089e0 !important; fill: currentColor !important; } .natural-gallery .natural-gallery-categories input[type=checkbox]:checked ~ .label svg { fill: #0089e0 !important; } .natural-gallery .natural-gallery-next:hover { background-color: #eeeeee !important; } .natural-gallery .button, .natural-gallery .figure[href] .title { background: #0089e0 !important; border-top: 1px solid #45a8e0; } .natural-gallery-next { display: none !important; } "]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"images":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"activate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"gallery":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["gallery"]}]}],"pswp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["pswp"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}}},"origins":{"NaturalGalleryModule":"./index","NaturalGalleryComponent":"./gallery/gallery.component"},"importAs":"angular-natural-gallery"}

dist/angular-natural-gallery.umd.js

@@ -14,2 +14,3 @@ (function (global, factory) {
         this.images = [];
+        this.activate = new core.EventEmitter();
     }
@@ -26,4 +27,10 @@ /**
             var /** @type {?} */ data = {
-                options: {
-                    margin: 5,
+                options: _this.options,
+                events: {
+                    link: {
+                        preventDefault: true,
+                        callback: function (item) {
+                            _this.activate.emit(item);
+                        },
+                    },
                 },
@@ -51,3 +58,3 @@ };
                     encapsulation: core.ViewEncapsulation.None,
-                    styles: [""],
+                    styles: ["/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */ /* Styles for basic PhotoSwipe functionality (sliding area, open/close transitions) */ /* pswp = photoswipe */ .pswp { display: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; -ms-touch-action: none; touch-action: none; z-index: 1500; -webkit-text-size-adjust: 100%; /* create separate layer, to avoid paint on window.onscroll in webkit/blink */ -webkit-backface-visibility: hidden; outline: none; } .pswp * { -webkit-box-sizing: border-box; box-sizing: border-box; } .pswp img { max-width: none; } /* style is added when JS option showHideOpacity is set to true */ .pswp--animate_opacity { /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */ opacity: 0.001; will-change: opacity; /* for open/close transition */ -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--open { display: block; } .pswp--zoom-allowed .pswp__img { /* autoprefixer: off */ cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .pswp--zoomed-in .pswp__img { /* autoprefixer: off */ cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .pswp--dragging .pswp__img { /* autoprefixer: off */ cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } /* Background is added as a separate element. As animating opacity is much faster than animating rgba() background-color. */ .pswp__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; will-change: opacity; } .pswp__scroll-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .pswp__container, .pswp__zoom-wrap { -ms-touch-action: none; touch-action: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } /* Prevent selection and tap highlights */ .pswp__container, .pswp__img { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .pswp__zoom-wrap { position: absolute; width: 100%; -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; /* for open/close transition */ -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp__bg { will-change: opacity; /* for open/close transition */ -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap { -webkit-transition: none; transition: none; } .pswp__container, .pswp__zoom-wrap { -webkit-backface-visibility: hidden; } .pswp__item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; } .pswp__img { position: absolute; width: auto; height: auto; top: 0; left: 0; } /* stretched thumbnail or div placeholder element (see below) style is added to avoid flickering in webkit/blink when layers overlap */ .pswp__img--placeholder { -webkit-backface-visibility: hidden; } /* div element that matches size of large image large image loads on top of it */ .pswp__img--placeholder--blank { background: #222; } .pswp--ie .pswp__img { width: 100% !important; height: auto !important; left: 0; top: 0; } /* Error message appears when image is not loaded (JS option errorMsg controls markup) */ .pswp__error-msg { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; font-size: 14px; line-height: 16px; margin-top: -8px; color: #CCC; } .pswp__error-msg a { color: #CCC; text-decoration: underline; } /*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */ /* Contents: 1. Buttons 2. Share modal and links 3. Index indicator (\"1 of X\" counter) 4. Caption 5. Loading indicator 6. Additional styles (root element, top bar, idle state, hidden state, etc.) */ /* 1. Buttons */ /* <button> css reset */ .pswp__button { width: 44px; height: 44px; position: relative; background: none; cursor: pointer; overflow: visible; -webkit-appearance: none; display: block; border: 0; padding: 0; margin: 0; float: right; opacity: 0.75; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; -webkit-box-shadow: none; box-shadow: none; } .pswp__button:focus, .pswp__button:hover { opacity: 1; } .pswp__button:active { outline: none; opacity: 0.9; } .pswp__button::-moz-focus-inner { padding: 0; border: 0; } /* pswp__ui--over-close class it added when mouse is over element that should close gallery */ .pswp__ui--over-close .pswp__button--close { opacity: 1; } .pswp__button, .pswp__button--arrow--left:before, .pswp__button--arrow--right:before { background: url(default-skin.png) 0 0 no-repeat; background-size: 264px 88px; width: 44px; height: 44px; } @media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) { /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */ .pswp--svg .pswp__button, .pswp--svg .pswp__button--arrow--left:before, .pswp--svg .pswp__button--arrow--right:before { background-image: url(default-skin.svg); } .pswp--svg .pswp__button--arrow--left, .pswp--svg .pswp__button--arrow--right { background: none; } } .pswp__button--close { background-position: 0 -44px; } .pswp__button--share { background-position: -44px -44px; } .pswp__button--fs { display: none; } .pswp--supports-fs .pswp__button--fs { display: block; } .pswp--fs .pswp__button--fs { background-position: -44px 0; } .pswp__button--zoom { display: none; background-position: -88px 0; } .pswp--zoom-allowed .pswp__button--zoom { display: block; } .pswp--zoomed-in .pswp__button--zoom { background-position: -132px 0; } /* no arrows on touch screens */ .pswp--touch .pswp__button--arrow--left, .pswp--touch .pswp__button--arrow--right { visibility: hidden; } /* Arrow buttons hit area (icon is added to :before pseudo-element) */ .pswp__button--arrow--left, .pswp__button--arrow--right { background: none; top: 50%; margin-top: -50px; width: 70px; height: 100px; position: absolute; } .pswp__button--arrow--left { left: 0; } .pswp__button--arrow--right { right: 0; } .pswp__button--arrow--left:before, .pswp__button--arrow--right:before { content: ''; top: 35px; background-color: rgba(0, 0, 0, 0.3); height: 30px; width: 32px; position: absolute; } .pswp__button--arrow--left:before { left: 6px; background-position: -138px -44px; } .pswp__button--arrow--right:before { right: 6px; background-position: -94px -44px; } /* 2. Share modal/popup and links */ .pswp__counter, .pswp__share-modal { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .pswp__share-modal { display: block; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; top: 0; left: 0; padding: 10px; position: absolute; z-index: 1600; opacity: 0; -webkit-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; -webkit-backface-visibility: hidden; will-change: opacity; } .pswp__share-modal--hidden { display: none; } .pswp__share-tooltip { z-index: 1620; position: absolute; background: #FFF; top: 56px; border-radius: 2px; display: block; width: auto; right: 44px; -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); -webkit-transform: translateY(6px); -ms-transform: translateY(6px); transform: translateY(6px); -webkit-transition: -webkit-transform 0.25s; transition: transform 0.25s; -webkit-backface-visibility: hidden; will-change: transform; } .pswp__share-tooltip a { display: block; padding: 8px 12px; color: #000; text-decoration: none; font-size: 14px; line-height: 18px; } .pswp__share-tooltip a:hover { text-decoration: none; color: #000; } .pswp__share-tooltip a:first-child { /* round corners on the first/last list item */ border-radius: 2px 2px 0 0; } .pswp__share-tooltip a:last-child { border-radius: 0 0 2px 2px; } .pswp__share-modal--fade-in { opacity: 1; } .pswp__share-modal--fade-in .pswp__share-tooltip { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /* increase size of share links on touch devices */ .pswp--touch .pswp__share-tooltip a { padding: 16px 12px; } a.pswp__share--facebook:before { content: ''; display: block; width: 0; height: 0; position: absolute; top: -12px; right: 15px; border: 6px solid transparent; border-bottom-color: #FFF; -webkit-pointer-events: none; -moz-pointer-events: none; pointer-events: none; } a.pswp__share--facebook:hover { background: #3E5C9A; color: #FFF; } a.pswp__share--facebook:hover:before { border-bottom-color: #3E5C9A; } a.pswp__share--twitter:hover { background: #55ACEE; color: #FFF; } a.pswp__share--pinterest:hover { background: #CCC; color: #CE272D; } a.pswp__share--download:hover { background: #DDD; } /* 3. Index indicator (\"1 of X\" counter) */ .pswp__counter { position: absolute; left: 0; top: 0; height: 44px; font-size: 13px; line-height: 44px; color: #FFF; opacity: 0.75; padding: 0 10px; } /* 4. Caption */ .pswp__caption { position: absolute; left: 0; bottom: 0; width: 100%; min-height: 44px; } .pswp__caption small { font-size: 11px; color: #BBB; } .pswp__caption__center { text-align: left; max-width: 420px; margin: 0 auto; font-size: 13px; padding: 10px; line-height: 20px; color: #CCC; } .pswp__caption--empty { display: none; } /* Fake caption element, used to calculate height of next/prev image */ .pswp__caption--fake { visibility: hidden; } /* 5. Loading indicator (preloader) You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR */ .pswp__preloader { width: 44px; height: 44px; position: absolute; top: 0; left: 50%; margin-left: -22px; opacity: 0; -webkit-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; will-change: opacity; direction: ltr; } .pswp__preloader__icn { width: 20px; height: 20px; margin: 12px; } .pswp__preloader--active { opacity: 1; } .pswp__preloader--active .pswp__preloader__icn { /* We use .gif in browsers that don't support CSS animation */ background: url(preloader.gif) 0 0 no-repeat; } .pswp--css_animation .pswp__preloader--active { opacity: 1; } .pswp--css_animation .pswp__preloader--active .pswp__preloader__icn { -webkit-animation: clockwise 500ms linear infinite; animation: clockwise 500ms linear infinite; } .pswp--css_animation .pswp__preloader--active .pswp__preloader__donut { -webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; } .pswp--css_animation .pswp__preloader__icn { background: none; opacity: 0.75; width: 14px; height: 14px; position: absolute; left: 15px; top: 15px; margin: 0; } .pswp--css_animation .pswp__preloader__cut { /*  The idea of animating inner circle is based on Polymer (\"material\") loading indicator  by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html */ position: relative; width: 7px; height: 14px; overflow: hidden; } .pswp--css_animation .pswp__preloader__donut { -webkit-box-sizing: border-box; box-sizing: border-box; width: 14px; height: 14px; border: 2px solid #FFF; border-radius: 50%; border-left-color: transparent; border-bottom-color: transparent; position: absolute; top: 0; left: 0; background: none; margin: 0; } @media screen and (max-width: 1024px) { .pswp__preloader { position: relative; left: auto; top: auto; margin: 0; float: right; } } @-webkit-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes clockwise { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes donut-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(-140deg); transform: rotate(-140deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } @keyframes donut-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(-140deg); transform: rotate(-140deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } /* 6. Additional styles */ /* root element of UI */ .pswp__ui { -webkit-font-smoothing: auto; visibility: visible; opacity: 1; z-index: 1550; } /* top black bar with buttons and \"1 of X\" indicator */ .pswp__top-bar { position: absolute; left: 0; top: 0; height: 44px; width: 100%; } .pswp__caption, .pswp__top-bar, .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { -webkit-backface-visibility: hidden; will-change: opacity; -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } /* pswp--has_mouse class is added only when two subsequent mousemove events occur */ .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { visibility: visible; } .pswp__top-bar, .pswp__caption { background-color: rgba(0, 0, 0, 0.5); } /* pswp__ui--fit class is added when main image \"fits\" between top bar and bottom bar (caption) */ .pswp__ui--fit .pswp__top-bar, .pswp__ui--fit .pswp__caption { background-color: rgba(0, 0, 0, 0.3); } /* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */ .pswp__ui--idle .pswp__top-bar { opacity: 0; } .pswp__ui--idle .pswp__button--arrow--left, .pswp__ui--idle .pswp__button--arrow--right { opacity: 0; } /* pswp__ui--hidden class is added when controls are hidden e.g. when user taps to toggle visibility of controls */ .pswp__ui--hidden .pswp__top-bar, .pswp__ui--hidden .pswp__caption, .pswp__ui--hidden .pswp__button--arrow--left, .pswp__ui--hidden .pswp__button--arrow--right { /* Force paint & create composition layer for controls. */ opacity: 0.001; } /* pswp__ui--one-slide class is added when there is just one item in gallery */ .pswp__ui--one-slide .pswp__button--arrow--left, .pswp__ui--one-slide .pswp__button--arrow--right, .pswp__ui--one-slide .pswp__counter { display: none; } .pswp__element--disabled { display: none !important; } .pswp--minimal--dark .pswp__top-bar { background: none; } .pswp { z-index: 4; } .pswp .pswp__caption__center { text-align: center; } .natural-gallery { position: relative; } .natural-gallery *, .natural-gallery :after, .natural-gallery :before { box-sizing: border-box; margin: 0; padding: 0; } .natural-gallery iframe { position: absolute; width: 100%; height: 0; top: 0; left: 0; background-color: transparent; border: 0; } .natural-gallery .natural-gallery-body { padding: 0; margin: 0; } .natural-gallery .natural-gallery-body:after { content: \"\"; display: block; clear: both; } .natural-gallery .natural-gallery-body[href] { cursor: pointer; } .natural-gallery .natural-gallery-body .natural-gallery-noresults { margin: 3em auto 2em; width: 100px; height: 100px; text-align: center; font-weight: 700; font-size: 15px; color: #888; } .natural-gallery .natural-gallery-body .natural-gallery-thumbnail img { box-shadow: 3px 3px 5px #999; text-align: center; will-change: opacity; } .natural-gallery .natural-gallery-body .figure { position: relative; display: block; float: left; overflow: hidden; margin: 0; } .natural-gallery .natural-gallery-body .figure:hover .title.hover { -webkit-transform: translateY(0); transform: translateY(0); } .natural-gallery .natural-gallery-body .figure.loading:before { content: \"\"; position: absolute; z-index: 2; top: 50%; left: 50%; width: 700px; height: 700px; margin-left: -350px; margin-top: -350px; border-radius: 50%; -webkit-transform: scale(0); transform: scale(0); opacity: .3; -webkit-animation-name: a; animation-name: a; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-delay: .2s; animation-delay: .2s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; will-change: width,height,opacity; } .natural-gallery .natural-gallery-body .figure.loaded.visible > .image { opacity: 1; transition: opacity 1s ease-out,transform 1s ease-out; } .natural-gallery .natural-gallery-body .figure .image { display: block; position: relative; z-index: 1; opacity: 0; background-repeat: no-repeat; background-position: 50%; background-size: cover; } .natural-gallery .natural-gallery-body .figure[href] .title { cursor: pointer; margin: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); border-radius: 4px; text-decoration: none; } .natural-gallery .natural-gallery-body .figure .title { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; background: rgba(0, 0, 0, 0.6); text-align: center; color: #fff; font-size: 14px; line-height: 2em; font-weight: 400; padding: 10px; transition: all .2s ease; overflow: hidden; white-space: normal; } .natural-gallery .natural-gallery-body .figure .title[href]:hover { margin-bottom: 12px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5); } .natural-gallery .natural-gallery-body .figure .title.hover { padding: 10px; -webkit-transform: translateY(calc(100% + 10px)); transform: translateY(calc(100% + 10px)); } .natural-gallery .natural-gallery-body .link { cursor: pointer; } .natural-gallery .natural-gallery-body .button { cursor: pointer; margin: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); border-radius: 4px; text-decoration: none; } .natural-gallery .natural-gallery-body .zoomable { cursor: pointer; } .natural-gallery .natural-gallery-body .image.zoomable:hover, .natural-gallery .natural-gallery-body .zoomable:hover .image { -webkit-transform: rotate(2deg) scale(1.4); transform: rotate(2deg) scale(1.4); } .natural-gallery .natural-gallery-header { margin: 0 0 10px; } .natural-gallery .natural-gallery-header:after { content: \"\"; display: block; clear: both; } .natural-gallery .natural-gallery-header .natural-gallery-searchTerm > svg { width: 1.4em; height: 1.4em; top: .4em; } .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input { border: none; background: none; } .natural-gallery .natural-gallery-header .natural-gallery-categories input[type=checkbox] { display: none; } .natural-gallery .natural-gallery-header .natural-gallery-categories label { position: relative; cursor: pointer; } .natural-gallery .natural-gallery-header .natural-gallery-categories .label { margin-left: 1.5em; margin-right: 5px; } .natural-gallery .natural-gallery-header .sectionContainer { margin-top: 30px; position: relative; } .natural-gallery .natural-gallery-header .natural-gallery-categories, .natural-gallery .natural-gallery-header .natural-gallery-categories label, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm { float: left; margin-right: 5px; } .natural-gallery .natural-gallery-header .natural-gallery-categories .label > svg, .natural-gallery .natural-gallery-header .natural-gallery-images > svg, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm > svg { content: \"\"; float: left; position: absolute; left: 5px; font-size: 16px; background-repeat: no-repeat; } .natural-gallery .natural-gallery-header .natural-gallery-categories .label > svg, .natural-gallery .natural-gallery-header .natural-gallery-images > svg { width: 1.2em; height: 1.2em; top: .5em; } .natural-gallery .natural-gallery-header .natural-gallery-categories .label, .natural-gallery .natural-gallery-header .natural-gallery-images, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm .sectionName, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input { display: block; padding: 9px 5px 6px; font-size: 16px; line-height: 1.3em; height: 35px; } .natural-gallery .natural-gallery-header .natural-gallery-images { float: right; margin-right: 0; margin-left: 5px; padding-left: 2em; } .natural-gallery .natural-gallery-header .natural-gallery-categories .label, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input { font-weight: 400; } .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input { width: 300px; padding-left: 2em; } .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input:focus { outline: none; } .natural-gallery .natural-gallery-header .natural-gallery-categories label, .natural-gallery .natural-gallery-header .sectionName { margin-bottom: 0; } .natural-gallery .natural-gallery-header .sectionName { left: 5px; top: 0; margin-left: 1.5em; font-size: 16px; font-weight: 400; position: absolute; pointer-events: none; transition: all .2s ease; } .natural-gallery .natural-gallery-header .natural-gallery-categories .sectionName, .natural-gallery .natural-gallery-header .natural-gallery-images .sectionName, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm:hover .sectionName, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input:focus ~ .sectionName, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input:valid ~ .sectionName { top: -2.2em; font-size: 14px !important; line-height: 1em; padding: 0; margin: 1.2em 0 0; } .natural-gallery .natural-gallery-header .natural-gallery-categories .sectionName:last-child { display: none; } .natural-gallery .natural-gallery-header .natural-gallery-categories label, .natural-gallery .natural-gallery-header .natural-gallery-images, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm { border: none; border-bottom-width: 1px; border-bottom-style: solid; } .natural-gallery .natural-gallery-header .bar { position: relative; display: block; } .natural-gallery .natural-gallery-header .bar:after, .natural-gallery .natural-gallery-header .bar:before { content: \"\"; height: 3px; width: 0; bottom: -2px; position: absolute; transition: all .2s ease; } .natural-gallery .natural-gallery-header .bar:before { left: 50%; } .natural-gallery .natural-gallery-header .bar:after { right: 50%; } .natural-gallery .natural-gallery-header .natural-gallery-categories input[type=checkbox]:checked ~ .bar:after, .natural-gallery .natural-gallery-header .natural-gallery-categories input[type=checkbox]:checked ~ .bar:before, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input:focus ~ .bar:after, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input:focus ~ .bar:before, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input:valid ~ .bar:after, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input:valid ~ .bar:before { width: 50%; } .natural-gallery .natural-gallery-next { display: block; margin: 10px auto; text-align: center; height: 30px; } .natural-gallery .natural-gallery-next svg { cursor: pointer; font-size: 16px; height: inherit; } .natural-gallery .natural-gallery-next:after { content: \"\"; display: block; clear: both; } @-webkit-keyframes a { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: .3; } to { -webkit-transform: scale(1); transform: scale(1); opacity: .05; } } @keyframes a { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: .3; } to { -webkit-transform: scale(1); transform: scale(1); opacity: .05; } } /* * Colors * ----------------------------------------- */ .natural-gallery .natural-gallery-body .figure.loading::before, .natural-gallery .bar::before, .natural-gallery .bar::after { background-color: #0089e0 !important; } .natural-gallery .natural-gallery-body .figure.loading.errored::before { background-color: red !important; } /* Inactive */ .natural-gallery .natural-gallery-searchTerm, .natural-gallery .natural-gallery-categories label, .natural-gallery .natural-gallery-images { border-bottom-color: #999999 !important; } /* Disabled */ .natural-gallery .sectionName, .natural-gallery .natural-gallery-categories .label, .natural-gallery .natural-gallery-categories input[type=checkbox] ~ .label svg, .natural-gallery .natural-gallery-noresults svg { color: #999999 !important; fill: #999999 !important; } /* Normal */ .natural-gallery .natural-gallery-searchTerm input, .natural-gallery .natural-gallery-categories input[type=checkbox]:checked ~ .label { color: #444444 !important; } /* Highlighted */ .natural-gallery .natural-gallery-next svg, .natural-gallery .natural-gallery-header svg, .natural-gallery .natural-gallery-categories input[type=checkbox]:checked, .natural-gallery .natural-gallery-categories label:hover .label, .natural-gallery .natural-gallery-categories:hover .sectionName, .natural-gallery .natural-gallery-searchTerm:hover .sectionName, .natural-gallery .natural-gallery-searchTerm:hover input, .natural-gallery .natural-gallery-searchTerm:hover .sectionName, .natural-gallery .natural-gallery-images:hover .sectionName { color: #0089e0 !important; fill: currentColor !important; } .natural-gallery .natural-gallery-categories input[type=checkbox]:checked ~ .label svg { fill: #0089e0 !important; } .natural-gallery .natural-gallery-next:hover { background-color: #eeeeee !important; } .natural-gallery .button, .natural-gallery .figure[href] .title { background: #0089e0 !important; border-top: 1px solid #45a8e0; } .natural-gallery-next { display: none !important; } "],
                 },] },
@@ -58,6 +65,8 @@ ];
     NaturalGalleryComponent.propDecorators = {
+        "options": [{ type: core.Input },],
+        "scrollable": [{ type: core.Input },],
+        "images": [{ type: core.Input },],
+        "activate": [{ type: core.Output },],
         "gallery": [{ type: core.ViewChild, args: ['gallery',] },],
         "pswp": [{ type: core.ViewChild, args: ['pswp',] },],
-        "scrollable": [{ type: core.Input },],
-        "images": [{ type: core.Input },],
     };
@@ -64,0 +73,0 @@ return NaturalGalleryComponent;

dist/gallery/gallery.component.d.ts

@@ -1,7 +0,9 @@
-import { OnChanges, OnInit } from '@angular/core';
+import { EventEmitter, OnChanges, OnInit } from '@angular/core';
 export declare class NaturalGalleryComponent implements OnInit, OnChanges {
+    options: any;
+    scrollable: any;
+    images: any[];
+    activate: EventEmitter<{}>;
     gallery: any;
     pswp: any;
-    scrollable: any;
-    images: any[];
     constructor();
@@ -8,0 +10,0 @@ ngOnInit(): void;

dist/index.js

@@ -1,2 +0,2 @@
-import { Component, Input, NgModule, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Component, EventEmitter, Input, NgModule, Output, ViewChild, ViewEncapsulation } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -12,2 +12,3 @@ import { Gallery } from 'natural-gallery-js';
         this.images = [];
+        this.activate = new EventEmitter();
     }
@@ -24,4 +25,10 @@ /**
             var /** @type {?} */ data = {
-                options: {
-                    margin: 5,
+                options: _this.options,
+                events: {
+                    link: {
+                        preventDefault: true,
+                        callback: function (item) {
+                            _this.activate.emit(item);
+                        },
+                    },
                 },
@@ -49,3 +56,3 @@ };
                     encapsulation: ViewEncapsulation.None,
-                    styles: [""],
+                    styles: ["/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */ /* Styles for basic PhotoSwipe functionality (sliding area, open/close transitions) */ /* pswp = photoswipe */ .pswp { display: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; -ms-touch-action: none; touch-action: none; z-index: 1500; -webkit-text-size-adjust: 100%; /* create separate layer, to avoid paint on window.onscroll in webkit/blink */ -webkit-backface-visibility: hidden; outline: none; } .pswp * { -webkit-box-sizing: border-box; box-sizing: border-box; } .pswp img { max-width: none; } /* style is added when JS option showHideOpacity is set to true */ .pswp--animate_opacity { /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */ opacity: 0.001; will-change: opacity; /* for open/close transition */ -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--open { display: block; } .pswp--zoom-allowed .pswp__img { /* autoprefixer: off */ cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .pswp--zoomed-in .pswp__img { /* autoprefixer: off */ cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .pswp--dragging .pswp__img { /* autoprefixer: off */ cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } /* Background is added as a separate element. As animating opacity is much faster than animating rgba() background-color. */ .pswp__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; will-change: opacity; } .pswp__scroll-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .pswp__container, .pswp__zoom-wrap { -ms-touch-action: none; touch-action: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } /* Prevent selection and tap highlights */ .pswp__container, .pswp__img { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .pswp__zoom-wrap { position: absolute; width: 100%; -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; /* for open/close transition */ -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp__bg { will-change: opacity; /* for open/close transition */ -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap { -webkit-transition: none; transition: none; } .pswp__container, .pswp__zoom-wrap { -webkit-backface-visibility: hidden; } .pswp__item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; } .pswp__img { position: absolute; width: auto; height: auto; top: 0; left: 0; } /* stretched thumbnail or div placeholder element (see below) style is added to avoid flickering in webkit/blink when layers overlap */ .pswp__img--placeholder { -webkit-backface-visibility: hidden; } /* div element that matches size of large image large image loads on top of it */ .pswp__img--placeholder--blank { background: #222; } .pswp--ie .pswp__img { width: 100% !important; height: auto !important; left: 0; top: 0; } /* Error message appears when image is not loaded (JS option errorMsg controls markup) */ .pswp__error-msg { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; font-size: 14px; line-height: 16px; margin-top: -8px; color: #CCC; } .pswp__error-msg a { color: #CCC; text-decoration: underline; } /*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */ /* Contents: 1. Buttons 2. Share modal and links 3. Index indicator (\"1 of X\" counter) 4. Caption 5. Loading indicator 6. Additional styles (root element, top bar, idle state, hidden state, etc.) */ /* 1. Buttons */ /* <button> css reset */ .pswp__button { width: 44px; height: 44px; position: relative; background: none; cursor: pointer; overflow: visible; -webkit-appearance: none; display: block; border: 0; padding: 0; margin: 0; float: right; opacity: 0.75; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; -webkit-box-shadow: none; box-shadow: none; } .pswp__button:focus, .pswp__button:hover { opacity: 1; } .pswp__button:active { outline: none; opacity: 0.9; } .pswp__button::-moz-focus-inner { padding: 0; border: 0; } /* pswp__ui--over-close class it added when mouse is over element that should close gallery */ .pswp__ui--over-close .pswp__button--close { opacity: 1; } .pswp__button, .pswp__button--arrow--left:before, .pswp__button--arrow--right:before { background: url(default-skin.png) 0 0 no-repeat; background-size: 264px 88px; width: 44px; height: 44px; } @media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) { /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */ .pswp--svg .pswp__button, .pswp--svg .pswp__button--arrow--left:before, .pswp--svg .pswp__button--arrow--right:before { background-image: url(default-skin.svg); } .pswp--svg .pswp__button--arrow--left, .pswp--svg .pswp__button--arrow--right { background: none; } } .pswp__button--close { background-position: 0 -44px; } .pswp__button--share { background-position: -44px -44px; } .pswp__button--fs { display: none; } .pswp--supports-fs .pswp__button--fs { display: block; } .pswp--fs .pswp__button--fs { background-position: -44px 0; } .pswp__button--zoom { display: none; background-position: -88px 0; } .pswp--zoom-allowed .pswp__button--zoom { display: block; } .pswp--zoomed-in .pswp__button--zoom { background-position: -132px 0; } /* no arrows on touch screens */ .pswp--touch .pswp__button--arrow--left, .pswp--touch .pswp__button--arrow--right { visibility: hidden; } /* Arrow buttons hit area (icon is added to :before pseudo-element) */ .pswp__button--arrow--left, .pswp__button--arrow--right { background: none; top: 50%; margin-top: -50px; width: 70px; height: 100px; position: absolute; } .pswp__button--arrow--left { left: 0; } .pswp__button--arrow--right { right: 0; } .pswp__button--arrow--left:before, .pswp__button--arrow--right:before { content: ''; top: 35px; background-color: rgba(0, 0, 0, 0.3); height: 30px; width: 32px; position: absolute; } .pswp__button--arrow--left:before { left: 6px; background-position: -138px -44px; } .pswp__button--arrow--right:before { right: 6px; background-position: -94px -44px; } /* 2. Share modal/popup and links */ .pswp__counter, .pswp__share-modal { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .pswp__share-modal { display: block; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; top: 0; left: 0; padding: 10px; position: absolute; z-index: 1600; opacity: 0; -webkit-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; -webkit-backface-visibility: hidden; will-change: opacity; } .pswp__share-modal--hidden { display: none; } .pswp__share-tooltip { z-index: 1620; position: absolute; background: #FFF; top: 56px; border-radius: 2px; display: block; width: auto; right: 44px; -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); -webkit-transform: translateY(6px); -ms-transform: translateY(6px); transform: translateY(6px); -webkit-transition: -webkit-transform 0.25s; transition: transform 0.25s; -webkit-backface-visibility: hidden; will-change: transform; } .pswp__share-tooltip a { display: block; padding: 8px 12px; color: #000; text-decoration: none; font-size: 14px; line-height: 18px; } .pswp__share-tooltip a:hover { text-decoration: none; color: #000; } .pswp__share-tooltip a:first-child { /* round corners on the first/last list item */ border-radius: 2px 2px 0 0; } .pswp__share-tooltip a:last-child { border-radius: 0 0 2px 2px; } .pswp__share-modal--fade-in { opacity: 1; } .pswp__share-modal--fade-in .pswp__share-tooltip { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /* increase size of share links on touch devices */ .pswp--touch .pswp__share-tooltip a { padding: 16px 12px; } a.pswp__share--facebook:before { content: ''; display: block; width: 0; height: 0; position: absolute; top: -12px; right: 15px; border: 6px solid transparent; border-bottom-color: #FFF; -webkit-pointer-events: none; -moz-pointer-events: none; pointer-events: none; } a.pswp__share--facebook:hover { background: #3E5C9A; color: #FFF; } a.pswp__share--facebook:hover:before { border-bottom-color: #3E5C9A; } a.pswp__share--twitter:hover { background: #55ACEE; color: #FFF; } a.pswp__share--pinterest:hover { background: #CCC; color: #CE272D; } a.pswp__share--download:hover { background: #DDD; } /* 3. Index indicator (\"1 of X\" counter) */ .pswp__counter { position: absolute; left: 0; top: 0; height: 44px; font-size: 13px; line-height: 44px; color: #FFF; opacity: 0.75; padding: 0 10px; } /* 4. Caption */ .pswp__caption { position: absolute; left: 0; bottom: 0; width: 100%; min-height: 44px; } .pswp__caption small { font-size: 11px; color: #BBB; } .pswp__caption__center { text-align: left; max-width: 420px; margin: 0 auto; font-size: 13px; padding: 10px; line-height: 20px; color: #CCC; } .pswp__caption--empty { display: none; } /* Fake caption element, used to calculate height of next/prev image */ .pswp__caption--fake { visibility: hidden; } /* 5. Loading indicator (preloader) You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR */ .pswp__preloader { width: 44px; height: 44px; position: absolute; top: 0; left: 50%; margin-left: -22px; opacity: 0; -webkit-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; will-change: opacity; direction: ltr; } .pswp__preloader__icn { width: 20px; height: 20px; margin: 12px; } .pswp__preloader--active { opacity: 1; } .pswp__preloader--active .pswp__preloader__icn { /* We use .gif in browsers that don't support CSS animation */ background: url(preloader.gif) 0 0 no-repeat; } .pswp--css_animation .pswp__preloader--active { opacity: 1; } .pswp--css_animation .pswp__preloader--active .pswp__preloader__icn { -webkit-animation: clockwise 500ms linear infinite; animation: clockwise 500ms linear infinite; } .pswp--css_animation .pswp__preloader--active .pswp__preloader__donut { -webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; } .pswp--css_animation .pswp__preloader__icn { background: none; opacity: 0.75; width: 14px; height: 14px; position: absolute; left: 15px; top: 15px; margin: 0; } .pswp--css_animation .pswp__preloader__cut { /*  The idea of animating inner circle is based on Polymer (\"material\") loading indicator  by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html */ position: relative; width: 7px; height: 14px; overflow: hidden; } .pswp--css_animation .pswp__preloader__donut { -webkit-box-sizing: border-box; box-sizing: border-box; width: 14px; height: 14px; border: 2px solid #FFF; border-radius: 50%; border-left-color: transparent; border-bottom-color: transparent; position: absolute; top: 0; left: 0; background: none; margin: 0; } @media screen and (max-width: 1024px) { .pswp__preloader { position: relative; left: auto; top: auto; margin: 0; float: right; } } @-webkit-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes clockwise { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes donut-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(-140deg); transform: rotate(-140deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } @keyframes donut-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(-140deg); transform: rotate(-140deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } /* 6. Additional styles */ /* root element of UI */ .pswp__ui { -webkit-font-smoothing: auto; visibility: visible; opacity: 1; z-index: 1550; } /* top black bar with buttons and \"1 of X\" indicator */ .pswp__top-bar { position: absolute; left: 0; top: 0; height: 44px; width: 100%; } .pswp__caption, .pswp__top-bar, .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { -webkit-backface-visibility: hidden; will-change: opacity; -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } /* pswp--has_mouse class is added only when two subsequent mousemove events occur */ .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { visibility: visible; } .pswp__top-bar, .pswp__caption { background-color: rgba(0, 0, 0, 0.5); } /* pswp__ui--fit class is added when main image \"fits\" between top bar and bottom bar (caption) */ .pswp__ui--fit .pswp__top-bar, .pswp__ui--fit .pswp__caption { background-color: rgba(0, 0, 0, 0.3); } /* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */ .pswp__ui--idle .pswp__top-bar { opacity: 0; } .pswp__ui--idle .pswp__button--arrow--left, .pswp__ui--idle .pswp__button--arrow--right { opacity: 0; } /* pswp__ui--hidden class is added when controls are hidden e.g. when user taps to toggle visibility of controls */ .pswp__ui--hidden .pswp__top-bar, .pswp__ui--hidden .pswp__caption, .pswp__ui--hidden .pswp__button--arrow--left, .pswp__ui--hidden .pswp__button--arrow--right { /* Force paint & create composition layer for controls. */ opacity: 0.001; } /* pswp__ui--one-slide class is added when there is just one item in gallery */ .pswp__ui--one-slide .pswp__button--arrow--left, .pswp__ui--one-slide .pswp__button--arrow--right, .pswp__ui--one-slide .pswp__counter { display: none; } .pswp__element--disabled { display: none !important; } .pswp--minimal--dark .pswp__top-bar { background: none; } .pswp { z-index: 4; } .pswp .pswp__caption__center { text-align: center; } .natural-gallery { position: relative; } .natural-gallery *, .natural-gallery :after, .natural-gallery :before { box-sizing: border-box; margin: 0; padding: 0; } .natural-gallery iframe { position: absolute; width: 100%; height: 0; top: 0; left: 0; background-color: transparent; border: 0; } .natural-gallery .natural-gallery-body { padding: 0; margin: 0; } .natural-gallery .natural-gallery-body:after { content: \"\"; display: block; clear: both; } .natural-gallery .natural-gallery-body[href] { cursor: pointer; } .natural-gallery .natural-gallery-body .natural-gallery-noresults { margin: 3em auto 2em; width: 100px; height: 100px; text-align: center; font-weight: 700; font-size: 15px; color: #888; } .natural-gallery .natural-gallery-body .natural-gallery-thumbnail img { box-shadow: 3px 3px 5px #999; text-align: center; will-change: opacity; } .natural-gallery .natural-gallery-body .figure { position: relative; display: block; float: left; overflow: hidden; margin: 0; } .natural-gallery .natural-gallery-body .figure:hover .title.hover { -webkit-transform: translateY(0); transform: translateY(0); } .natural-gallery .natural-gallery-body .figure.loading:before { content: \"\"; position: absolute; z-index: 2; top: 50%; left: 50%; width: 700px; height: 700px; margin-left: -350px; margin-top: -350px; border-radius: 50%; -webkit-transform: scale(0); transform: scale(0); opacity: .3; -webkit-animation-name: a; animation-name: a; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-delay: .2s; animation-delay: .2s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; will-change: width,height,opacity; } .natural-gallery .natural-gallery-body .figure.loaded.visible > .image { opacity: 1; transition: opacity 1s ease-out,transform 1s ease-out; } .natural-gallery .natural-gallery-body .figure .image { display: block; position: relative; z-index: 1; opacity: 0; background-repeat: no-repeat; background-position: 50%; background-size: cover; } .natural-gallery .natural-gallery-body .figure[href] .title { cursor: pointer; margin: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); border-radius: 4px; text-decoration: none; } .natural-gallery .natural-gallery-body .figure .title { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; background: rgba(0, 0, 0, 0.6); text-align: center; color: #fff; font-size: 14px; line-height: 2em; font-weight: 400; padding: 10px; transition: all .2s ease; overflow: hidden; white-space: normal; } .natural-gallery .natural-gallery-body .figure .title[href]:hover { margin-bottom: 12px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5); } .natural-gallery .natural-gallery-body .figure .title.hover { padding: 10px; -webkit-transform: translateY(calc(100% + 10px)); transform: translateY(calc(100% + 10px)); } .natural-gallery .natural-gallery-body .link { cursor: pointer; } .natural-gallery .natural-gallery-body .button { cursor: pointer; margin: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); border-radius: 4px; text-decoration: none; } .natural-gallery .natural-gallery-body .zoomable { cursor: pointer; } .natural-gallery .natural-gallery-body .image.zoomable:hover, .natural-gallery .natural-gallery-body .zoomable:hover .image { -webkit-transform: rotate(2deg) scale(1.4); transform: rotate(2deg) scale(1.4); } .natural-gallery .natural-gallery-header { margin: 0 0 10px; } .natural-gallery .natural-gallery-header:after { content: \"\"; display: block; clear: both; } .natural-gallery .natural-gallery-header .natural-gallery-searchTerm > svg { width: 1.4em; height: 1.4em; top: .4em; } .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input { border: none; background: none; } .natural-gallery .natural-gallery-header .natural-gallery-categories input[type=checkbox] { display: none; } .natural-gallery .natural-gallery-header .natural-gallery-categories label { position: relative; cursor: pointer; } .natural-gallery .natural-gallery-header .natural-gallery-categories .label { margin-left: 1.5em; margin-right: 5px; } .natural-gallery .natural-gallery-header .sectionContainer { margin-top: 30px; position: relative; } .natural-gallery .natural-gallery-header .natural-gallery-categories, .natural-gallery .natural-gallery-header .natural-gallery-categories label, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm { float: left; margin-right: 5px; } .natural-gallery .natural-gallery-header .natural-gallery-categories .label > svg, .natural-gallery .natural-gallery-header .natural-gallery-images > svg, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm > svg { content: \"\"; float: left; position: absolute; left: 5px; font-size: 16px; background-repeat: no-repeat; } .natural-gallery .natural-gallery-header .natural-gallery-categories .label > svg, .natural-gallery .natural-gallery-header .natural-gallery-images > svg { width: 1.2em; height: 1.2em; top: .5em; } .natural-gallery .natural-gallery-header .natural-gallery-categories .label, .natural-gallery .natural-gallery-header .natural-gallery-images, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm .sectionName, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input { display: block; padding: 9px 5px 6px; font-size: 16px; line-height: 1.3em; height: 35px; } .natural-gallery .natural-gallery-header .natural-gallery-images { float: right; margin-right: 0; margin-left: 5px; padding-left: 2em; } .natural-gallery .natural-gallery-header .natural-gallery-categories .label, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input { font-weight: 400; } .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input { width: 300px; padding-left: 2em; } .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input:focus { outline: none; } .natural-gallery .natural-gallery-header .natural-gallery-categories label, .natural-gallery .natural-gallery-header .sectionName { margin-bottom: 0; } .natural-gallery .natural-gallery-header .sectionName { left: 5px; top: 0; margin-left: 1.5em; font-size: 16px; font-weight: 400; position: absolute; pointer-events: none; transition: all .2s ease; } .natural-gallery .natural-gallery-header .natural-gallery-categories .sectionName, .natural-gallery .natural-gallery-header .natural-gallery-images .sectionName, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm:hover .sectionName, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input:focus ~ .sectionName, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input:valid ~ .sectionName { top: -2.2em; font-size: 14px !important; line-height: 1em; padding: 0; margin: 1.2em 0 0; } .natural-gallery .natural-gallery-header .natural-gallery-categories .sectionName:last-child { display: none; } .natural-gallery .natural-gallery-header .natural-gallery-categories label, .natural-gallery .natural-gallery-header .natural-gallery-images, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm { border: none; border-bottom-width: 1px; border-bottom-style: solid; } .natural-gallery .natural-gallery-header .bar { position: relative; display: block; } .natural-gallery .natural-gallery-header .bar:after, .natural-gallery .natural-gallery-header .bar:before { content: \"\"; height: 3px; width: 0; bottom: -2px; position: absolute; transition: all .2s ease; } .natural-gallery .natural-gallery-header .bar:before { left: 50%; } .natural-gallery .natural-gallery-header .bar:after { right: 50%; } .natural-gallery .natural-gallery-header .natural-gallery-categories input[type=checkbox]:checked ~ .bar:after, .natural-gallery .natural-gallery-header .natural-gallery-categories input[type=checkbox]:checked ~ .bar:before, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input:focus ~ .bar:after, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input:focus ~ .bar:before, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input:valid ~ .bar:after, .natural-gallery .natural-gallery-header .natural-gallery-searchTerm input:valid ~ .bar:before { width: 50%; } .natural-gallery .natural-gallery-next { display: block; margin: 10px auto; text-align: center; height: 30px; } .natural-gallery .natural-gallery-next svg { cursor: pointer; font-size: 16px; height: inherit; } .natural-gallery .natural-gallery-next:after { content: \"\"; display: block; clear: both; } @-webkit-keyframes a { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: .3; } to { -webkit-transform: scale(1); transform: scale(1); opacity: .05; } } @keyframes a { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: .3; } to { -webkit-transform: scale(1); transform: scale(1); opacity: .05; } } /* * Colors * ----------------------------------------- */ .natural-gallery .natural-gallery-body .figure.loading::before, .natural-gallery .bar::before, .natural-gallery .bar::after { background-color: #0089e0 !important; } .natural-gallery .natural-gallery-body .figure.loading.errored::before { background-color: red !important; } /* Inactive */ .natural-gallery .natural-gallery-searchTerm, .natural-gallery .natural-gallery-categories label, .natural-gallery .natural-gallery-images { border-bottom-color: #999999 !important; } /* Disabled */ .natural-gallery .sectionName, .natural-gallery .natural-gallery-categories .label, .natural-gallery .natural-gallery-categories input[type=checkbox] ~ .label svg, .natural-gallery .natural-gallery-noresults svg { color: #999999 !important; fill: #999999 !important; } /* Normal */ .natural-gallery .natural-gallery-searchTerm input, .natural-gallery .natural-gallery-categories input[type=checkbox]:checked ~ .label { color: #444444 !important; } /* Highlighted */ .natural-gallery .natural-gallery-next svg, .natural-gallery .natural-gallery-header svg, .natural-gallery .natural-gallery-categories input[type=checkbox]:checked, .natural-gallery .natural-gallery-categories label:hover .label, .natural-gallery .natural-gallery-categories:hover .sectionName, .natural-gallery .natural-gallery-searchTerm:hover .sectionName, .natural-gallery .natural-gallery-searchTerm:hover input, .natural-gallery .natural-gallery-searchTerm:hover .sectionName, .natural-gallery .natural-gallery-images:hover .sectionName { color: #0089e0 !important; fill: currentColor !important; } .natural-gallery .natural-gallery-categories input[type=checkbox]:checked ~ .label svg { fill: #0089e0 !important; } .natural-gallery .natural-gallery-next:hover { background-color: #eeeeee !important; } .natural-gallery .button, .natural-gallery .figure[href] .title { background: #0089e0 !important; border-top: 1px solid #45a8e0; } .natural-gallery-next { display: none !important; } "],
                 },] },
@@ -56,6 +63,8 @@ ];
     NaturalGalleryComponent.propDecorators = {
+        "options": [{ type: Input },],
+        "scrollable": [{ type: Input },],
+        "images": [{ type: Input },],
+        "activate": [{ type: Output },],
         "gallery": [{ type: ViewChild, args: ['gallery',] },],
         "pswp": [{ type: ViewChild, args: ['pswp',] },],
-        "scrollable": [{ type: Input },],
-        "images": [{ type: Input },],
     };
@@ -62,0 +71,0 @@ return NaturalGalleryComponent;

dist/package.json

@@ -6,3 +6,3 @@ {
     "type": "git",
-    "url": "https://github.com/sambaptista/angular-natural-gallery"
+    "url": "https://github.com/Ecodev/angular-natural-gallery"
   },
@@ -18,3 +18,3 @@ "author": {
   "bugs": {
-    "url": "https://github.com/sambaptista/angular-natural-gallery/issues"
+    "url": "https://github.com/Ecodev/angular-natural-gallery/issues"
   },
@@ -21,0 +21,0 @@ "main": "angular-natural-gallery.umd.js",

gulpfile.js

@@ -182,2 +182,10 @@ /* eslint-disable */
 /**
+ * 9b. Copy README.md from / to /dist
+ */
+gulp.task('copy:themes', function () {
+    return gulp.src([`${srcFolder}/**/*.theme.scss`])
+               .pipe(gulp.dest(distFolder + '/theming'));
+});
+
+/**
  * 10. Delete /.tmp folder
@@ -207,2 +215,3 @@ */
     'copy:readme',
+    'copy:themes',
     'clean:build',
@@ -209,0 +218,0 @@ 'clean:tmp',

package.json

 {
   "name": "angular-natural-gallery",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "scripts": {
@@ -19,3 +19,3 @@ "build": "gulp build",
     "type": "git",
-    "url": "https://github.com/sambaptista/angular-natural-gallery"
+    "url": "https://github.com/Ecodev/angular-natural-gallery"
   },
@@ -31,3 +31,3 @@ "author": {
   "bugs": {
-    "url": "https://github.com/sambaptista/angular-natural-gallery/issues"
+    "url": "https://github.com/Ecodev/angular-natural-gallery/issues"
   },
@@ -77,5 +77,6 @@ "devDependencies": {
   },
-  "peerDependencies": {
-    "natural-gallery-js": "https://github.com/Ecodev/natural-gallery-js#develop"
+  "peerDependencies": {},
+  "dependencies": {
+    "natural-gallery-js": "https://github.com/Ecodev/natural-gallery-js#master"
   }
 }

New alerts

HTTP dependency

Supply chain risk

Contains a dependency which resolves to a remote HTTP URL which could be used to inject untrusted code and reduce overall package reliability.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

371967

increased by20.55%

Worsened metrics

Number of package files

29

decreased by-19.44%

Lines of code

2843

decreased by-3.63%

Number of high supply chain risk alerts

1

increased byInfinity%

Number of low supply chain risk alerts

5

increased by66.67%

Number of medium supply chain risk alerts

2

increased by100%

Dependency changes

• + Addednatural-gallery-js@https://github.com/Ecodev/natural-gallery-js#master