ng-marquee
Version:
Angular 8+ CSS Marquee (Alternative To HTML Marquee Tag)
103 lines (97 loc) • 9.54 kB
JavaScript
import { Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* Generated from: lib/ng-marquee/ng-marquee.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {string} */
var MarqueeDirection = {
left: "left",
right: "right",
alternate: "alternate",
};
/** @enum {string} */
var MarqueeSpeed = {
drowsy: "drowsy",
slow: "slow",
normal: "normal",
fast: "fast",
swift: "swift",
hyper: "hyper",
};
var NgMarqueeComponent = /** @class */ (function () {
function NgMarqueeComponent() {
this.stopOnHover = false;
this.marqueeDirection = MarqueeDirection;
this.marqueeSpeed = MarqueeSpeed;
}
/**
* @return {?}
*/
NgMarqueeComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
};
NgMarqueeComponent.decorators = [
{ type: Component, args: [{
selector: 'ng-marquee',
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>",
changeDetection: ChangeDetectionStrategy.OnPush,
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}"]
}] }
];
NgMarqueeComponent.propDecorators = {
speed: [{ type: Input }],
duration: [{ type: Input }],
direction: [{ type: Input }],
stopOnHover: [{ type: Input }]
};
return NgMarqueeComponent;
}());
if (false) {
/** @type {?} */
NgMarqueeComponent.prototype.speed;
/** @type {?} */
NgMarqueeComponent.prototype.duration;
/** @type {?} */
NgMarqueeComponent.prototype.direction;
/** @type {?} */
NgMarqueeComponent.prototype.stopOnHover;
/** @type {?} */
NgMarqueeComponent.prototype.marqueeDirection;
/** @type {?} */
NgMarqueeComponent.prototype.marqueeSpeed;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/ng-marquee.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgMarqueeModule = /** @class */ (function () {
function NgMarqueeModule() {
}
NgMarqueeModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
],
declarations: [NgMarqueeComponent],
exports: [NgMarqueeComponent]
},] }
];
return NgMarqueeModule;
}());
/**
* @fileoverview added by tsickle
* Generated from: public_api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ng-marquee.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NgMarqueeComponent, NgMarqueeModule };
//# sourceMappingURL=ng-marquee.js.map