ng-marquee/ng-marquee.metadata.json

Angular 8+ CSS Marquee (Alternative To HTML Marquee Tag)

{"__symbolic":"module","version":4,"metadata":{"NgMarqueeComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":17,"character":1},"arguments":[{"selector":"ng-marquee","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":21,"character":19},"member":"OnPush"},"template":"<div class=\"ng-marquee\" [ngClass]=\"{\n  'ng-marquee-direction-left': marqueeDirection.left === direction,\n  'ng-marquee-direction-right': marqueeDirection.right === direction,\n  'ng-marquee-direction-alternate': marqueeDirection.alternate === direction,\n  'ng-marquee-speed-drowsy': marqueeSpeed.drowsy === speed,\n  'ng-marquee-speed-slow': marqueeSpeed.slow === speed,\n  'ng-marquee-speed-normal': marqueeSpeed.normal === speed,\n  'ng-marquee-speed-fast': marqueeSpeed.fast === speed,\n  'ng-marquee-speed-swift': marqueeSpeed.swift === speed,\n  'ng-marquee-speed-hyper': marqueeSpeed.hyper === speed,\n  'ng-marquee-stop-on-hover': stopOnHover\n}\">\n  <span [ngStyle]=\"{'animation-duration': duration}\">\n    <ng-content></ng-content>\n  </span>\n</div>","styles":[".ng-marquee{overflow:hidden;text-align:left}.ng-marquee.ng-marquee-speed-drowsy>span{-webkit-animation-duration:30s;animation-duration:30s}.ng-marquee.ng-marquee-speed-slow>span{-webkit-animation-duration:20s;animation-duration:20s}.ng-marquee.ng-marquee-speed-normal>span{-webkit-animation-duration:10s;animation-duration:10s}.ng-marquee.ng-marquee-speed-fast>span{-webkit-animation-duration:7s;animation-duration:7s}.ng-marquee.ng-marquee-speed-swift>span{-webkit-animation-duration:5s;animation-duration:5s}.ng-marquee.ng-marquee-speed-hyper>span{-webkit-animation-duration:2s;animation-duration:2s}.ng-marquee.ng-marquee-stop-on-hover:hover>span{-webkit-animation-play-state:paused;animation-play-state:paused}@-webkit-keyframes movement-smooth{from{transform:translateX(0);left:100%}to{transform:translateX(-100%);left:0}}@keyframes movement-smooth{from{transform:translateX(0);left:100%}to{transform:translateX(-100%);left:0}}@-webkit-keyframes movement-steps20{0%{transform:translateX(0);left:100%}5%,9.99%{transform:translateX(-5%);left:95%}10%,14.99%{transform:translateX(-10%);left:90%}15%,19.99%{transform:translateX(-15%);left:85%}20%,24.99%{transform:translateX(-20%);left:80%}25%,29.99%{transform:translateX(-25%);left:75%}30%,34.99%{transform:translateX(-30%);left:70%}35%,39.99%{transform:translateX(-35%);left:65%}40%,44.99%{transform:translateX(-40%);left:60%}45%,49.99%{transform:translateX(-45%);left:55%}50%,54.99%{transform:translateX(-50%);left:50%}55%,59.99%{transform:translateX(-55%);left:45%}60%,64.99%{transform:translateX(-60%);left:40%}65%,69.99%{transform:translateX(-65%);left:35%}70%,74.99%{transform:translateX(-70%);left:30%}75%,79.99%{transform:translateX(-75%);left:25%}80%,84.99%{transform:translateX(-80%);left:20%}85%,89.99%{transform:translateX(-85%);left:15%}90%,94.99%{transform:translateX(-90%);left:10%}95%,99.99%{transform:translateX(-95%);left:5%}100%{transform:translateX(-100%);left:0}}@keyframes movement-steps20{0%{transform:translateX(0);left:100%}5%,9.99%{transform:translateX(-5%);left:95%}10%,14.99%{transform:translateX(-10%);left:90%}15%,19.99%{transform:translateX(-15%);left:85%}20%,24.99%{transform:translateX(-20%);left:80%}25%,29.99%{transform:translateX(-25%);left:75%}30%,34.99%{transform:translateX(-30%);left:70%}35%,39.99%{transform:translateX(-35%);left:65%}40%,44.99%{transform:translateX(-40%);left:60%}45%,49.99%{transform:translateX(-45%);left:55%}50%,54.99%{transform:translateX(-50%);left:50%}55%,59.99%{transform:translateX(-55%);left:45%}60%,64.99%{transform:translateX(-60%);left:40%}65%,69.99%{transform:translateX(-65%);left:35%}70%,74.99%{transform:translateX(-70%);left:30%}75%,79.99%{transform:translateX(-75%);left:25%}80%,84.99%{transform:translateX(-80%);left:20%}85%,89.99%{transform:translateX(-85%);left:15%}90%,94.99%{transform:translateX(-90%);left:10%}95%,99.99%{transform:translateX(-95%);left:5%}100%{transform:translateX(-100%);left:0}}@-webkit-keyframes movement-steps10{0%{transform:translateX(0);left:100%}10%,19.99%{transform:translateX(-10%);left:90%}20%,29.99%{transform:translateX(-20%);left:80%}30%,39.99%{transform:translateX(-30%);left:70%}40%,49.99%{transform:translateX(-40%);left:60%}50%,59.99%{transform:translateX(-50%);left:50%}60%,69.99%{transform:translateX(-60%);left:40%}70%,79.99%{transform:translateX(-70%);left:30%}80%,89.99%{transform:translateX(-80%);left:20%}90%,99.99%{transform:translateX(-90%);left:10%}100%{transform:translateX(-100%);left:0}}@keyframes movement-steps10{0%{transform:translateX(0);left:100%}10%,19.99%{transform:translateX(-10%);left:90%}20%,29.99%{transform:translateX(-20%);left:80%}30%,39.99%{transform:translateX(-30%);left:70%}40%,49.99%{transform:translateX(-40%);left:60%}50%,59.99%{transform:translateX(-50%);left:50%}60%,69.99%{transform:translateX(-60%);left:40%}70%,79.99%{transform:translateX(-70%);left:30%}80%,89.99%{transform:translateX(-80%);left:20%}90%,99.99%{transform:translateX(-90%);left:10%}100%{transform:translateX(-100%);left:0}}@-webkit-keyframes movement-steps5{0%,19.99%{transform:translateX(0);left:100%}20%,39.99%{transform:translateX(-20%);left:80%}40%,59.99%{transform:translateX(-40%);left:60%}60%,79.99%{transform:translateX(-60%);left:40%}80%,99.99%{transform:translateX(-80%);left:20%}100%{transform:translateX(-100%);left:0}}@keyframes movement-steps5{0%,19.99%{transform:translateX(0);left:100%}20%,39.99%{transform:translateX(-20%);left:80%}40%,59.99%{transform:translateX(-40%);left:60%}60%,79.99%{transform:translateX(-60%);left:40%}80%,99.99%{transform:translateX(-80%);left:20%}100%{transform:translateX(-100%);left:0}}.ng-marquee.ng-marquee-movement-smooth>span{-webkit-animation-name:movement-smooth;animation-name:movement-smooth}.ng-marquee.ng-marquee-movement-steps20>span{-webkit-animation-name:movement-steps20;animation-name:movement-steps20}.ng-marquee.ng-marquee-movement-steps10>span{-webkit-animation-name:movement-steps10;animation-name:movement-steps10}.ng-marquee.ng-marquee-movement-steps5>span{-webkit-animation-name:movement-steps5;animation-name:movement-steps5}.ng-marquee.ng-marquee-direction-left>span,.ng-marquee.ng-marquee-direction-normal>span{-webkit-animation-direction:normal;animation-direction:normal}.ng-marquee.ng-marquee-direction-alternate>span{-webkit-animation-direction:alternate;animation-direction:alternate}.ng-marquee.ng-marquee-direction-reverse>span,.ng-marquee.ng-marquee-direction-right>span{animation-direction:reverse}.ng-marquee>span{content:attr(data-marquee);white-space:nowrap;position:relative;transform:translateX(-50%);display:inline-block;left:50%;-webkit-animation:10s linear infinite movement-smooth;animation:10s linear infinite movement-smooth}"]}]}],"members":{"speed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"duration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"direction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"stopOnHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}]}},"NgMarqueeModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":4}],"declarations":[{"__symbolic":"reference","name":"NgMarqueeComponent"}],"exports":[{"__symbolic":"reference","name":"NgMarqueeComponent"}]}]}],"members":{}}},"origins":{"NgMarqueeComponent":"./lib/ng-marquee/ng-marquee.component","NgMarqueeModule":"./lib/ng-marquee.module"},"importAs":"ng-marquee"}