quarkd/lib/marquee/index.js

Mobile UI Components built on Web Components.

import{_ as t,a as n}from"../typeof.js";import{_ as e,a,b as i,c as r,P as o,H as s,A as u,d as f,N as l,O as p,B as c}from"../index2.js";import{_ as d}from"../defineProperty.js";function m(t){var n=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,r=e(t);if(n){var o=e(this).constructor;i=Reflect.construct(r,arguments,o)}else i=r.apply(this,arguments);return a(this,i)}}var h=function(e){i(f,s);var a=m(f);function f(){var n;t(this,f);for(var e=arguments.length,i=new Array(e),s=0;s<e;s++)i[s]=arguments[s];return n=a.call.apply(a,[this].concat(i)),d(r(n),"title",""),d(r(n),"speed","50"),d(r(n),"paused",!1),d(r(n),"reverse",!1),d(r(n),"animating",!1),d(r(n),"textWidth",0),d(r(n),"titleRef",o()),d(r(n),"transitionEnd",(function(){n.animating=!1,n.start()})),d(r(n),"start",(function(){var t=r(n),e=n.titleRef.current;if(t.offsetWidth>=(n.textWidth||e.offsetWidth))return n.animating=!1,e.style.removeProperty("animation-duration"),void e.style.removeProperty("animation-name");n.animating||(!e.style.animationName&&(n.textWidth=e.offsetWidth,e.style.paddingLeft="".concat(t.offsetWidth,"px")),n.animating=!0,e.style.animationDirection=n.reverse?"reverse":"normal",e.style.animationDuration="".concat(Math.round(e.offsetWidth/Number(n.speed)),"s"),e.style.animationName="quark-marquee-animation")})),n}return n(f,[{key:"componentDidMount",value:function(){this.start()}},{key:"render",value:function(){return s.h(u,null,s.h("span",{class:"quark-marquee-title ".concat(this.paused?"quark-marquee-paused":""),part:"root",ref:this.titleRef,onTransitionend:this.transitionEnd},this.title))}}]),f}();f([l()],h.prototype,"title",void 0),f([l()],h.prototype,"speed",void 0),f([l({type:Boolean})],h.prototype,"paused",void 0),f([l({type:Boolean})],h.prototype,"reverse",void 0),f([p()],h.prototype,"animating",void 0),f([p()],h.prototype,"textWidth",void 0);var y=h=f([c({tag:"quark-marquee",style:":host {\n  flex: 1 1;\n  overflow: hidden;\n  /* height: 100%; */\n  display: flex;\n  align-items: center;\n  color: #242729;\n  font-size: 3.73333vw;\n}\n\n:host .quark-marquee-title {\n  width: auto;\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n  padding: 0 1.06667vw;\n  white-space: nowrap;\n}\n\n:host .quark-marquee-paused {\n  animation-play-state: paused;\n}\n\n@keyframes quark-marquee-animation {\n  0% {\n    transform: translateX(0);\n  }\n\n  100% {\n    transform: translateX(-100%);\n  }\n}\n"})],h);export{y as default};