UNPKG

@dotlottie/player-component

Version:

dotLottie animation player web component.

439 lines (396 loc) 25.4 kB
var N=window,R=N.ShadowRoot&&(N.ShadyCSS===void 0||N.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,M=Symbol(),tt=new WeakMap,S=class{constructor(t,e,o){if(this._$cssResult$=!0,o!==M)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o,e=this.t;if(R&&t===void 0){let o=e!==void 0&&e.length===1;o&&(t=tt.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),o&&tt.set(e,t));}return t}toString(){return this.cssText}},et=r=>new S(typeof r=="string"?r:r+"",void 0,M),j=(r,...t)=>{let e=r.length===1?r[0]:t.reduce((o,i,n)=>o+(s=>{if(s._$cssResult$===!0)return s.cssText;if(typeof s=="number")return s;throw Error("Value passed to 'css' function must be a 'css' function result: "+s+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+r[n+1],r[0]);return new S(e,r,M)},L=(r,t)=>{R?r.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet):t.forEach(e=>{let o=document.createElement("style"),i=N.litNonce;i!==void 0&&o.setAttribute("nonce",i),o.textContent=e.cssText,r.appendChild(o);});},O=R?r=>r:r=>r instanceof CSSStyleSheet?(t=>{let e="";for(let o of t.cssRules)e+=o.cssText;return et(e)})(r):r;var B,T=window,ot=T.trustedTypes,xt=ot?ot.emptyScript:"",it=T.reactiveElementPolyfillSupport,I={toAttribute(r,t){switch(t){case Boolean:r=r?xt:null;break;case Object:case Array:r=r==null?r:JSON.stringify(r);}return r},fromAttribute(r,t){let e=r;switch(t){case Boolean:e=r!==null;break;case Number:e=r===null?null:Number(r);break;case Object:case Array:try{e=JSON.parse(r);}catch{e=null;}}return e}},rt=(r,t)=>t!==r&&(t==t||r==r),D={attribute:!0,type:String,converter:I,reflect:!1,hasChanged:rt},V="finalized",f=class extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this._$Eu();}static addInitializer(t){var e;this.finalize(),((e=this.h)!==null&&e!==void 0?e:this.h=[]).push(t);}static get observedAttributes(){this.finalize();let t=[];return this.elementProperties.forEach((e,o)=>{let i=this._$Ep(o,e);i!==void 0&&(this._$Ev.set(i,o),t.push(i));}),t}static createProperty(t,e=D){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){let o=typeof t=="symbol"?Symbol():"__"+t,i=this.getPropertyDescriptor(t,o,e);i!==void 0&&Object.defineProperty(this.prototype,t,i);}}static getPropertyDescriptor(t,e,o){return {get(){return this[e]},set(i){let n=this[t];this[e]=i,this.requestUpdate(t,n,o);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||D}static finalize(){if(this.hasOwnProperty(V))return !1;this[V]=!0;let t=Object.getPrototypeOf(this);if(t.finalize(),t.h!==void 0&&(this.h=[...t.h]),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){let e=this.properties,o=[...Object.getOwnPropertyNames(e),...Object.getOwnPropertySymbols(e)];for(let i of o)this.createProperty(i,e[i]);}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){let e=[];if(Array.isArray(t)){let o=new Set(t.flat(1/0).reverse());for(let i of o)e.unshift(O(i));}else t!==void 0&&e.push(O(t));return e}static _$Ep(t,e){let o=e.attribute;return o===!1?void 0:typeof o=="string"?o:typeof t=="string"?t.toLowerCase():void 0}_$Eu(){var t;this._$E_=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$Eg(),this.requestUpdate(),(t=this.constructor.h)===null||t===void 0||t.forEach(e=>e(this));}addController(t){var e,o;((e=this._$ES)!==null&&e!==void 0?e:this._$ES=[]).push(t),this.renderRoot!==void 0&&this.isConnected&&((o=t.hostConnected)===null||o===void 0||o.call(t));}removeController(t){var e;(e=this._$ES)===null||e===void 0||e.splice(this._$ES.indexOf(t)>>>0,1);}_$Eg(){this.constructor.elementProperties.forEach((t,e)=>{this.hasOwnProperty(e)&&(this._$Ei.set(e,this[e]),delete this[e]);});}createRenderRoot(){var t;let e=(t=this.shadowRoot)!==null&&t!==void 0?t:this.attachShadow(this.constructor.shadowRootOptions);return L(e,this.constructor.elementStyles),e}connectedCallback(){var t;this.renderRoot===void 0&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(t=this._$ES)===null||t===void 0||t.forEach(e=>{var o;return (o=e.hostConnected)===null||o===void 0?void 0:o.call(e)});}enableUpdating(t){}disconnectedCallback(){var t;(t=this._$ES)===null||t===void 0||t.forEach(e=>{var o;return (o=e.hostDisconnected)===null||o===void 0?void 0:o.call(e)});}attributeChangedCallback(t,e,o){this._$AK(t,o);}_$EO(t,e,o=D){var i;let n=this.constructor._$Ep(t,o);if(n!==void 0&&o.reflect===!0){let s=(((i=o.converter)===null||i===void 0?void 0:i.toAttribute)!==void 0?o.converter:I).toAttribute(e,o.type);this._$El=t,s==null?this.removeAttribute(n):this.setAttribute(n,s),this._$El=null;}}_$AK(t,e){var o;let i=this.constructor,n=i._$Ev.get(t);if(n!==void 0&&this._$El!==n){let s=i.getPropertyOptions(n),h=typeof s.converter=="function"?{fromAttribute:s.converter}:((o=s.converter)===null||o===void 0?void 0:o.fromAttribute)!==void 0?s.converter:I;this._$El=n,this[n]=h.fromAttribute(e,s.type),this._$El=null;}}requestUpdate(t,e,o){let i=!0;t!==void 0&&(((o=o||this.constructor.getPropertyOptions(t)).hasChanged||rt)(this[t],e)?(this._$AL.has(t)||this._$AL.set(t,e),o.reflect===!0&&this._$El!==t&&(this._$EC===void 0&&(this._$EC=new Map),this._$EC.set(t,o))):i=!1),!this.isUpdatePending&&i&&(this._$E_=this._$Ej());}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_;}catch(e){Promise.reject(e);}let t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach((i,n)=>this[n]=i),this._$Ei=void 0);let e=!1,o=this._$AL;try{e=this.shouldUpdate(o),e?(this.willUpdate(o),(t=this._$ES)===null||t===void 0||t.forEach(i=>{var n;return (n=i.hostUpdate)===null||n===void 0?void 0:n.call(i)}),this.update(o)):this._$Ek();}catch(i){throw e=!1,this._$Ek(),i}e&&this._$AE(o);}willUpdate(t){}_$AE(t){var e;(e=this._$ES)===null||e===void 0||e.forEach(o=>{var i;return (i=o.hostUpdated)===null||i===void 0?void 0:i.call(o)}),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return !0}update(t){this._$EC!==void 0&&(this._$EC.forEach((e,o)=>this._$EO(o,this[o],e)),this._$EC=void 0),this._$Ek();}updated(t){}firstUpdated(t){}};f[V]=!0,f.elementProperties=new Map,f.elementStyles=[],f.shadowRootOptions={mode:"open"},it==null||it({ReactiveElement:f}),((B=T.reactiveElementVersions)!==null&&B!==void 0?B:T.reactiveElementVersions=[]).push("1.6.3");var K,z=window,y=z.trustedTypes,st=y?y.createPolicy("lit-html",{createHTML:r=>r}):void 0,q="$lit$",g=`lit$${(Math.random()+"").slice(9)}$`,dt="?"+g,yt=`<${dt}>`,m=document,k=()=>m.createComment(""),C=r=>r===null||typeof r!="object"&&typeof r!="function",ut=Array.isArray,_t=r=>ut(r)||typeof(r==null?void 0:r[Symbol.iterator])=="function",W=`[ \f\r]`,E=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,nt=/-->/g,lt=/>/g,b=RegExp(`>|${W}(?:([^\\s"'>=/]+)(${W}*=${W}*(?:[^ \f\r"'\`<>=]|("|')|))|$)`,"g"),at=/'/g,ht=/"/g,vt=/^(?:script|style|textarea|title)$/i,ft=r=>(t,...e)=>({_$litType$:r,strings:t,values:e}),Ut=ft(1),x=Symbol.for("lit-noChange"),d=Symbol.for("lit-nothing"),ct=new WeakMap,$=m.createTreeWalker(m,129,null,!1);function gt(r,t){if(!Array.isArray(r)||!r.hasOwnProperty("raw"))throw Error("invalid template strings array");return st!==void 0?st.createHTML(t):t}var At=(r,t)=>{let e=r.length-1,o=[],i,n=t===2?"<svg>":"",s=E;for(let h=0;h<e;h++){let l=r[h],a,c,p=-1,u=0;for(;u<l.length&&(s.lastIndex=u,c=s.exec(l),c!==null);)u=s.lastIndex,s===E?c[1]==="!--"?s=nt:c[1]!==void 0?s=lt:c[2]!==void 0?(vt.test(c[2])&&(i=RegExp("</"+c[2],"g")),s=b):c[3]!==void 0&&(s=b):s===b?c[0]===">"?(s=i!=null?i:E,p=-1):c[1]===void 0?p=-2:(p=s.lastIndex-c[2].length,a=c[1],s=c[3]===void 0?b:c[3]==='"'?ht:at):s===ht||s===at?s=b:s===nt||s===lt?s=E:(s=b,i=void 0);let v=s===b&&r[h+1].startsWith("/>")?" ":"";n+=s===E?l+yt:p>=0?(o.push(a),l.slice(0,p)+q+l.slice(p)+g+v):l+g+(p===-2?(o.push(void 0),h):v);}return [gt(r,n+(r[e]||"<?>")+(t===2?"</svg>":"")),o]},U=class r{constructor({strings:t,_$litType$:e},o){let i;this.parts=[];let n=0,s=0,h=t.length-1,l=this.parts,[a,c]=At(t,e);if(this.el=r.createElement(a,o),$.currentNode=this.el.content,e===2){let p=this.el.content,u=p.firstChild;u.remove(),p.append(...u.childNodes);}for(;(i=$.nextNode())!==null&&l.length<h;){if(i.nodeType===1){if(i.hasAttributes()){let p=[];for(let u of i.getAttributeNames())if(u.endsWith(q)||u.startsWith(g)){let v=c[s++];if(p.push(u),v!==void 0){let mt=i.getAttribute(v.toLowerCase()+q).split(g),H=/([.?@])?(.*)/.exec(v);l.push({type:1,index:n,name:H[2],strings:mt,ctor:H[1]==="."?F:H[1]==="?"?Z:H[1]==="@"?G:A});}else l.push({type:6,index:n});}for(let u of p)i.removeAttribute(u);}if(vt.test(i.tagName)){let p=i.textContent.split(g),u=p.length-1;if(u>0){i.textContent=y?y.emptyScript:"";for(let v=0;v<u;v++)i.append(p[v],k()),$.nextNode(),l.push({type:2,index:++n});i.append(p[u],k());}}}else if(i.nodeType===8)if(i.data===dt)l.push({type:2,index:n});else {let p=-1;for(;(p=i.data.indexOf(g,p+1))!==-1;)l.push({type:7,index:n}),p+=g.length-1;}n++;}}static createElement(t,e){let o=m.createElement("template");return o.innerHTML=t,o}};function _(r,t,e=r,o){var i,n,s,h;if(t===x)return t;let l=o!==void 0?(i=e._$Co)===null||i===void 0?void 0:i[o]:e._$Cl,a=C(t)?void 0:t._$litDirective$;return (l==null?void 0:l.constructor)!==a&&((n=l==null?void 0:l._$AO)===null||n===void 0||n.call(l,!1),a===void 0?l=void 0:(l=new a(r),l._$AT(r,e,o)),o!==void 0?((s=(h=e)._$Co)!==null&&s!==void 0?s:h._$Co=[])[o]=l:e._$Cl=l),l!==void 0&&(t=_(r,l._$AS(r,t.values),l,o)),t}var J=class{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){var e;let{el:{content:o},parts:i}=this._$AD,n=((e=t==null?void 0:t.creationScope)!==null&&e!==void 0?e:m).importNode(o,!0);$.currentNode=n;let s=$.nextNode(),h=0,l=0,a=i[0];for(;a!==void 0;){if(h===a.index){let c;a.type===2?c=new P(s,s.nextSibling,this,t):a.type===1?c=new a.ctor(s,a.name,a.strings,this,t):a.type===6&&(c=new Q(s,this,t)),this._$AV.push(c),a=i[++l];}h!==(a==null?void 0:a.index)&&(s=$.nextNode(),h++);}return $.currentNode=m,n}v(t){let e=0;for(let o of this._$AV)o!==void 0&&(o.strings!==void 0?(o._$AI(t,o,e),e+=o.strings.length-2):o._$AI(t[e])),e++;}},P=class r{constructor(t,e,o,i){var n;this.type=2,this._$AH=d,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=o,this.options=i,this._$Cp=(n=i==null?void 0:i.isConnected)===null||n===void 0||n;}get _$AU(){var t,e;return (e=(t=this._$AM)===null||t===void 0?void 0:t._$AU)!==null&&e!==void 0?e:this._$Cp}get parentNode(){let t=this._$AA.parentNode,e=this._$AM;return e!==void 0&&(t==null?void 0:t.nodeType)===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=_(this,t,e),C(t)?t===d||t==null||t===""?(this._$AH!==d&&this._$AR(),this._$AH=d):t!==this._$AH&&t!==x&&this._(t):t._$litType$!==void 0?this.g(t):t.nodeType!==void 0?this.$(t):_t(t)?this.T(t):this._(t);}k(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}$(t){this._$AH!==t&&(this._$AR(),this._$AH=this.k(t));}_(t){this._$AH!==d&&C(this._$AH)?this._$AA.nextSibling.data=t:this.$(m.createTextNode(t)),this._$AH=t;}g(t){var e;let{values:o,_$litType$:i}=t,n=typeof i=="number"?this._$AC(t):(i.el===void 0&&(i.el=U.createElement(gt(i.h,i.h[0]),this.options)),i);if(((e=this._$AH)===null||e===void 0?void 0:e._$AD)===n)this._$AH.v(o);else {let s=new J(n,this),h=s.u(this.options);s.v(o),this.$(h),this._$AH=s;}}_$AC(t){let e=ct.get(t.strings);return e===void 0&&ct.set(t.strings,e=new U(t)),e}T(t){ut(this._$AH)||(this._$AH=[],this._$AR());let e=this._$AH,o,i=0;for(let n of t)i===e.length?e.push(o=new r(this.k(k()),this.k(k()),this,this.options)):o=e[i],o._$AI(n),i++;i<e.length&&(this._$AR(o&&o._$AB.nextSibling,i),e.length=i);}_$AR(t=this._$AA.nextSibling,e){var o;for((o=this._$AP)===null||o===void 0||o.call(this,!1,!0,e);t&&t!==this._$AB;){let i=t.nextSibling;t.remove(),t=i;}}setConnected(t){var e;this._$AM===void 0&&(this._$Cp=t,(e=this._$AP)===null||e===void 0||e.call(this,t));}},A=class{constructor(t,e,o,i,n){this.type=1,this._$AH=d,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=n,o.length>2||o[0]!==""||o[1]!==""?(this._$AH=Array(o.length-1).fill(new String),this.strings=o):this._$AH=d;}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,o,i){let n=this.strings,s=!1;if(n===void 0)t=_(this,t,e,0),s=!C(t)||t!==this._$AH&&t!==x,s&&(this._$AH=t);else {let h=t,l,a;for(t=n[0],l=0;l<n.length-1;l++)a=_(this,h[o+l],e,l),a===x&&(a=this._$AH[l]),s||(s=!C(a)||a!==this._$AH[l]),a===d?t=d:t!==d&&(t+=(a!=null?a:"")+n[l+1]),this._$AH[l]=a;}s&&!i&&this.j(t);}j(t){t===d?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t!=null?t:"");}},F=class extends A{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===d?void 0:t;}},wt=y?y.emptyScript:"",Z=class extends A{constructor(){super(...arguments),this.type=4;}j(t){t&&t!==d?this.element.setAttribute(this.name,wt):this.element.removeAttribute(this.name);}},G=class extends A{constructor(t,e,o,i,n){super(t,e,o,i,n),this.type=5;}_$AI(t,e=this){var o;if((t=(o=_(this,t,e,0))!==null&&o!==void 0?o:d)===x)return;let i=this._$AH,n=t===d&&i!==d||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,s=t!==d&&(i===d||n);n&&this.element.removeEventListener(this.name,this,i),s&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){var e,o;typeof this._$AH=="function"?this._$AH.call((o=(e=this.options)===null||e===void 0?void 0:e.host)!==null&&o!==void 0?o:this.element,t):this._$AH.handleEvent(t);}},Q=class{constructor(t,e,o){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=o;}get _$AU(){return this._$AM._$AU}_$AI(t){_(this,t);}};var pt=z.litHtmlPolyfillSupport;pt==null||pt(U,P),((K=z.litHtmlVersions)!==null&&K!==void 0?K:z.litHtmlVersions=[]).push("2.8.0");var bt=(r,t,e)=>{var o,i;let n=(o=e==null?void 0:e.renderBefore)!==null&&o!==void 0?o:t,s=n._$litPart$;if(s===void 0){let h=(i=e==null?void 0:e.renderBefore)!==null&&i!==void 0?i:null;n._$litPart$=s=new P(t.insertBefore(k(),h),h,void 0,e!=null?e:{});}return s._$AI(r),s};var X,Y;var w=class extends f{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){var t,e;let o=super.createRenderRoot();return (t=(e=this.renderOptions).renderBefore)!==null&&t!==void 0||(e.renderBefore=o.firstChild),o}update(t){let e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=bt(e,this.renderRoot,this.renderOptions);}connectedCallback(){var t;super.connectedCallback(),(t=this._$Do)===null||t===void 0||t.setConnected(!0);}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this._$Do)===null||t===void 0||t.setConnected(!1);}render(){return x}};w.finalized=!0,w._$litElement$=!0,(X=globalThis.litElementHydrateSupport)===null||X===void 0||X.call(globalThis,{LitElement:w});var $t=globalThis.litElementPolyfillSupport;$t==null||$t({LitElement:w});((Y=globalThis.litElementVersions)!==null&&Y!==void 0?Y:globalThis.litElementVersions=[]).push("3.3.3");var Kt=j` @font-face { font-family: 'Karla'; font-weight: regular; src: url('./fonts/Karla-regular.woff') format('woff'); } :host { --lottie-player-toolbar-height: 35px; --lottie-player-toolbar-background-color: transparent; --lottie-player-toolbar-hover-background-color: #f3f6f8; --lottie-player-toolbar-icon-color: #20272c; --lottie-player-toolbar-icon-hover-color: #f3f6f8; --lottie-player-toolbar-icon-active-color: #00ddb3; --lottie-player-seeker-track-color: #00ddb3; --lottie-player-seeker-accent-color: #00c1a2; --lottie-player-seeker-thumb-color: #00c1a2; --lottie-player-options-separator: #d9e0e6; display: block; width: 100%; height: 100%; font-family: 'Karla', sans-serif; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :host * { box-sizing: border-box; } .active { color: var(--lottie-player-toolbar-icon-active-color) !important; } .main { position: relative; display: flex; flex-direction: column; height: 100%; width: 100%; } .animation { position: relative; width: 100%; height: 100%; display: flex; } .animation.controls { height: calc(100% - var(--lottie-player-toolbar-height)); } .toolbar { display: flex; align-items: center; justify-items: center; background-color: var(--lottie-player-toolbar-background-color); margin: 0 8px; height: var(--lottie-player-toolbar-height); } .btn-spacing-left { margin-right: 4px; margin-left: 8px; } .btn-spacing-center { margin-right: 4px; margin-left: 4px; } .btn-spacing-right { margin-right: 8px; margin-left: 4px; } .toolbar button { color: #20272c; cursor: pointer; fill: var(--lottie-player-toolbar-icon-color); display: flex; background: none; border: 0px; border-radius: 4px; padding: 4px; outline: none; width: 24px; height: 24px; align-items: center; } .toolbar button:hover { background-color: var(--lottie-player-toolbar-icon-hover-color); border-style: solid; border-radius: 2px; } .toolbar button.active { fill: var(--lottie-player-toolbar-icon-active-color); } .toolbar button.active:hover { fill: var(--lottie-player-toolbar-icon-hover-color); border-radius: 4px; } .toolbar button:focus-visible { outline: 2px solid var(--lottie-player-toolbar-icon-active-color); border-radius: 4px; box-sizing: border-box; } .toolbar button svg { width: 16px; height: 16px; } .toolbar button.disabled svg { display: none; } .popover { position: absolute; bottom: 40px; left: calc(100% - 239px); width: 224px; min-height: 84px; max-height: 300px; background-color: #ffffff; box-shadow: 0px 8px 48px 0px rgba(243, 246, 248, 0.15), 0px 8px 16px 0px rgba(61, 72, 83, 0.16), 0px 0px 1px 0px rgba(61, 72, 83, 0.36); border-radius: 8px; padding: 8px; z-index: 100; overflow-y: scroll; scrollbar-width: none; } .popover:focus-visible { outline: 2px solid var(--lottie-player-toolbar-icon-active-color); border-radius: 4px; box-sizing: border-box; } .popover::-webkit-scrollbar { width: 0px; } .popover-button { background: none; border: none; font-family: inherit; width: 100%; flex-direction: row; cursor: pointer; height: 32px; color: #20272c; justify-content: space-between; display: flex; padding: 4px 8px; align-items: flex-start; gap: 8px; align-self: stretch; border-radius: 4px; } .popover-button:focus-visible { outline: 2px solid var(--lottie-player-toolbar-icon-active-color); border-radius: 4px; box-sizing: border-box; } .popover-button:hover { background-color: var(--lottie-player-toolbar-hover-background-color); } .popover-button-text { display: flex; color: #20272c; flex-direction: column; align-self: stretch; justify-content: center; font-family: inherit; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; letter-spacing: -0.28px; } .reset-btn { font-size: 12px; cursor: pointer; font-family: inherit; background: none; border: none; font-weight: 400; line-height: 18px; letter-spacing: 0em; text-align: left; color: #63727e; padding: 0; width: 31px; height: 18px; } .reset-btn:focus-visible { outline: 2px solid var(--lottie-player-toolbar-icon-active-color); border-radius: 4px; box-sizing: border-box; } .reset-btn:hover { color: #20272c; } .option-title-button { display: flex; flex-direction: row; width: 100%; height: 32px; align-items: center; gap: 4px; align-self: stretch; cursor: pointer; color: var(--lottie-player-toolbar-icon-color); border: none; background: none; padding: 4px; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 150%; letter-spacing: -0.32px; } .option-title-button.themes { width: auto; padding: 0; } .option-title-button:hover { background-color: var(--lottie-player-toolbar-icon-hover-color); } .option-title-themes-row { display: flex; align-items: center; gap: 8px; flex: 1 0 0; } .option-title-themes-row:hover { background-color: var(--lottie-player-toolbar-icon-hover-color); } .option-title-button:focus-visible { outline: 2px solid var(--lottie-player-toolbar-icon-active-color); border-radius: 4px; box-sizing: border-box; } .option-title-text { font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; letter-spacing: -0.32px; } .option-title-separator { margin: 8px -8px; border-bottom: 1px solid var(--lottie-player-options-separator); } .option-title-chevron { display: flex; padding: 4px; border-radius: 8px; justify-content: center; align-items: center; gap: 8px; } .option-row { display: flex; flex-direction: column; } .option-row > ul { padding: 0; margin: 0; } .option-button { width: 100%; background: none; border: none; font-family: inherit; display: flex; padding: 4px 8px; color: #20272c; overflow: hidden; align-items: center; gap: 8px; align-self: stretch; cursor: pointer; height: 32px; font-family: inherit; font-size: 14px; border-radius: 4px; } .option-button:hover { background-color: var(--lottie-player-toolbar-hover-background-color); } .option-button:focus-visible { outline: 2px solid var(--lottie-player-toolbar-icon-active-color); border-radius: 4px; box-sizing: border-box; } .option-tick { display: flex; width: 24px; height: 24px; align-items: flex-start; gap: 8px; } .seeker { height: 4px; width: 95%; outline: none; -webkit-appearance: none; -moz-apperance: none; border-radius: 9999px; cursor: pointer; background-image: linear-gradient( to right, rgb(0, 221, 179) calc(var(--seeker) * 1%), rgb(217, 224, 230) calc(var(--seeker) * 1%) ); } .seeker.to-left { background-image: linear-gradient( to right, rgb(217, 224, 230) calc(var(--seeker) * 1%), rgb(0, 221, 179) calc(var(--seeker) * 1%) ); } .seeker::-webkit-slider-runnable-track:focus-visible { color: #f07167; accent-color: #00ddb3; } .seeker::-webkit-slider-runnable-track { width: 100%; height: 5px; cursor: pointer; } .seeker::-webkit-slider-thumb { -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%; background: var(--lottie-player-seeker-thumb-color); cursor: pointer; margin-top: -5px; } .seeker:focus-visible::-webkit-slider-thumb { background: var(--lottie-player-seeker-thumb-color); outline: 2px solid var(--lottie-player-seeker-track-color); border: 1.5px solid #ffffff; } .seeker::-webkit-slider-thumb:hover { background: #019d91; } .seeker::-moz-range-thumb { appearance: none; height: 16px; width: 16px; border-radius: 50%; background: var(--lottie-player-seeker-thumb-color); cursor: pointer; margin-top: -5px; border-color: transparent; } .seeker:focus-visible::-moz-range-thumb { background: var(--lottie-player-seeker-thumb-color); outline: 2px solid var(--lottie-player-seeker-track-color); border: 1.5px solid #ffffff; } .error { display: flex; justify-content: center; margin: auto; height: 100%; align-items: center; } `;/*! Bundled license information: @lit/reactive-element/css-tag.js: (** * @license * Copyright 2019 Google LLC * SPDX-License-Identifier: BSD-3-Clause *) @lit/reactive-element/reactive-element.js: (** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause *) lit-html/lit-html.js: (** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause *) lit-element/lit-element.js: (** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause *) lit-html/is-server.js: (** * @license * Copyright 2022 Google LLC * SPDX-License-Identifier: BSD-3-Clause *) */ export { Ut as a, w as b, Kt as c }; //# sourceMappingURL=out.js.map //# sourceMappingURL=chunk-ODPU3M3Z.mjs.map