@lordicon/element/dist/index.js

This package offers developers a convenient method for embedding, controlling, and customizing animated icons from Lordicon within web projects.

function e(e){return JSON.parse(JSON.stringify(e))}function t(e){return null==e}function i(e){return null!==e&&"object"==typeof e}function s(e,t,s){const r=Array.isArray(t)?t:t.split(".");let n=e;for(const e of r){if(!i(n))return s;if(!(e in n))return s;n=n[e]}return void 0===n?s:n}function r(e,t,i){let s=e;const r=Array.isArray(t)?t:t.split(".");for(let e=0;e<r.length;++e)e===r.length-1?s[r[e]]=i:s=s[r[e]]}const n={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",gold:"#ffd700",goldenrod:"#daa520",gray:"#808080",green:"#008000",greenyellow:"#adff2f",honeydew:"#f0fff0",hotpink:"#ff69b4","indianred ":"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavender:"#e6e6fa",lavenderblush:"#fff0f5",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgrey:"#d3d3d3",lightgreen:"#90ee90",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370d8",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#d87093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",rebeccapurple:"#663399",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"};function a(e){return e.startsWith("#")?4===e.length?`#${e[1]}${e[1]}${e[2]}${e[2]}${e[3]}${e[3]}`:e:n[e.toLowerCase()]||"#000000"}function o(e){if(e&&"string"==typeof e)return e.split(",").filter((e=>e)).map((e=>e.split(":"))).filter((e=>2==e.length)).reduce(((e,t)=>(e[t[0].toLowerCase()]=a(t[1]),e)),{})}function l(e){return"light"===e||1===e||"1"===e?1:"regular"===e||2===e||"2"===e?2:"bold"===e||3===e||"3"===e?3:"number"==typeof e||"string"==typeof e?+e:void 0}function h(e){if("string"==typeof e)return e}function c(e){const t=e.toString(16);return 1==t.length?"0"+t:t}function d(e){return Math.round(e/255*1e3)/1e3}function g(e){return Math.round(255*e)}function f(e){const{r:t,g:i,b:s}=function(e){let t=parseInt("#"!=e[0]?e:e.substring(1),16);return{r:t>>16&255,g:t>>8&255,b:255&t}}(e);return[d(t),d(i),d(s)]}function u(e){return function(e){return"#"+c(e.r)+c(e.g)+c(e.b)}({r:g(e[0]),g:g(e[1]),b:g(e[2])})}function m(e,{lottieInstance:t}={}){const i=[];return e&&e.layers?(e.layers.forEach(((e,s)=>{e.nm&&e.ef&&e.ef.forEach(((e,r)=>{const n=e?.ef?.[0]?.v?.k;if(void 0===n)return;let a,o;if(a=t?`renderer.elements.${s}.effectsManager.effectElements.${r}.effectElements.0.p.v`:`layers.${s}.ef.${r}.ef.0.v.k`,"ADBE Color Control"===e.mn?o="color":"ADBE Slider Control"===e.mn?o="slider":"ADBE Point Control"===e.mn?o="point":"ADBE Checkbox Control"===e.mn?o="checkbox":e.mn.startsWith("Pseudo/")&&(o="feature"),!o)return;const l=e.nm.toLowerCase();i.push({name:l,path:a,value:n,type:o})}))})),i):i}function y(e,t){for(const i of t)r(e,i.path,i.value)}function p(e,t,i){for(const s of t)"color"===s.type?"object"==typeof i&&"r"in i&&"g"in i&&"b"in i?r(e,s.path,[d(i.r),d(i.g),d(i.b)]):Array.isArray(i)?r(e,s.path,i):"string"==typeof i&&r(e,s.path,f(a(i))):"point"===s.type?"object"==typeof i&&"x"in i&&"y"in i?(r(e,s.path+".0",i.x),r(e,s.path+".1",i.y)):Array.isArray(i)&&(r(e,s.path+".0",i[0]),r(e,s.path+".1",i[1])):r(e,s.path,i)}const _=["click","mouseenter","mouseleave"],b="adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,v="\n    :host {\n        position: relative;\n        display: inline-block;\n        width: 32px;\n        height: 32px;\n        transform: translate3d(0px, 0px, 0px);\n    }\n\n    :host(.current-color) svg path[fill] {\n        fill: currentColor;\n    }\n\n    :host(.current-color) svg path[stroke] {\n        stroke: currentColor;\n    }\n\n    svg {\n        position: absolute;\n        pointer-events: none;\n        display: block;\n        transform: unset!important;\n    }\n\n    ::slotted(*) {\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n    }\n\n    .body.ready ::slotted(*) {\n        display: none;\n    }\n";let E=null;const k=["colors","src","icon","state","trigger","loading","target","stroke"];class I extends HTMLElement{static _iconLoader;static _playerFactory;static _definedTriggers=new Map;static get version(){return"1.10.1"}static get observedAttributes(){return k}static setIconLoader(e){I._iconLoader=e}static setPlayerFactory(e){I._playerFactory=e}static defineTrigger(e,t){I._definedTriggers.set(e,t)}_root;_isConnected=!1;_isReady=!1;_assignedIconData;_loadedIconData;_triggerInstance;_playerInstance;delayedLoading=null;attributeChangedCallback(e,t,i){this[`${e}Changed`].call(this)}connectedCallback(){if(this._root||this.createElements(),"lazy"===this.loading){let e;this.delayedLoading=t=>{e.unobserve(this),e=void 0,this.delayedLoading=null,t||this.createPlayer()};e=new IntersectionObserver(((t,i)=>{t.forEach((t=>{t.isIntersecting&&e&&this.delayedLoading&&this.delayedLoading()}))})),e.observe(this)}else if("interaction"===this.loading){let e;this.delayedLoading=s=>{for(const e of _)(t||this).removeEventListener(e,i);this.delayedLoading=null,s||this.createPlayer().then((()=>{e&&(t||this).dispatchEvent(new Event(e))}))};const t=this.target?this.closest(this.target):null;let i=t=>{const i=t?.type;e?e=i:(e=i,this.delayedLoading&&this.delayedLoading())};i=i.bind(this);for(const e of _)(t||this).addEventListener(e,i)}else if("delay"===this.loading){this.delayedLoading=e=>{this.delayedLoading=null,e||this.createPlayer()};const e=this.hasAttribute("delay")?+this.getAttribute("delay"):0;setTimeout((()=>{this.delayedLoading&&this.delayedLoading()}),e)}else this.createPlayer();this._isConnected=!0}disconnectedCallback(){this.delayedLoading&&this.delayedLoading(!0),this.destroyPlayer(),this._isConnected=!1}createElements(){if(this._root=this.attachShadow({mode:"open"}),b)E||(E=new CSSStyleSheet,E.replaceSync(v)),this._root.adoptedStyleSheets=[E];else{const e=document.createElement("style");e.innerHTML=v,this._root.appendChild(e)}const e=document.createElement("div");e.classList.add("body"),this._root.appendChild(e);const t=document.createElement("slot");e.appendChild(t)}async createPlayer(){if(!I._playerFactory)throw new Error("Missing player loader!");if(this.delayedLoading)return;const e=await this.loadIconData();if(!e)return;this._playerInstance=I._playerFactory(this.animationContainer,e,{state:h(this.state),stroke:l(this.stroke),colors:o(this.colors),scale:parseFloat(""+this.getAttribute("scale")||""),axisX:parseFloat(""+this.getAttribute("axis-x")||""),axisY:parseFloat(""+this.getAttribute("axis-y")||"")});const t=Object.entries(this._playerInstance.colors||{});if(t.length){let e="";for(const[i,s]of t)e+=`\n                    :host(:not(.current-color)) svg path[fill].${i} {\n                        fill: var(--lord-icon-${i}, var(--lord-icon-${i}-base, #000));\n                    }\n        \n                    :host(:not(.current-color)) svg path[stroke].${i} {\n                        stroke: var(--lord-icon-${i}, var(--lord-icon-${i}-base, #000));\n                    }\n                `;const i=document.createElement("style");i.innerHTML=e,this.animationContainer.appendChild(i)}this._playerInstance.connect(),this._playerInstance.addEventListener("ready",(()=>{this._triggerInstance&&this._triggerInstance.onReady&&this._triggerInstance.onReady()})),this._playerInstance.addEventListener("refresh",(()=>{this.refresh(),this._triggerInstance&&this._triggerInstance.onRefresh&&this._triggerInstance.onRefresh()})),this._playerInstance.addEventListener("complete",(()=>{this._triggerInstance&&this._triggerInstance.onComplete&&this._triggerInstance.onComplete()})),this._playerInstance.addEventListener("frame",(()=>{this._triggerInstance&&this._triggerInstance.onFrame&&this._triggerInstance.onFrame()})),this.refresh(),this.triggerChanged(),await new Promise(((e,t)=>{this._playerInstance.isReady?e():this._playerInstance.addEventListener("ready",e)})),this.animationContainer.classList.add("ready"),this._isReady=!0,this.dispatchEvent(new CustomEvent("ready"))}destroyPlayer(){this._isReady=!1,this._loadedIconData=void 0,this._triggerInstance&&(this._triggerInstance.onDisconnected&&this._triggerInstance.onDisconnected(),this._triggerInstance=void 0),this._playerInstance&&(this._playerInstance.disconnect(),this._playerInstance=void 0,this.animationContainer.classList.remove("ready"))}async loadIconData(){let e=this.iconData;if(!e)if(this.icon&&I._iconLoader)this._loadedIconData=e=await I._iconLoader(this.icon);else if(this.src){const t=await fetch(this.src);this._loadedIconData=e=await t.json()}return e}refresh(){this.movePaletteToCssVariables()}movePaletteToCssVariables(){for(const[e,t]of Object.entries(this._playerInstance.colors||{}))t?this.animationContainer.style.setProperty(`--lord-icon-${e}-base`,t):this.animationContainer.style.removeProperty(`--lord-icon-${e}-base`)}targetChanged(){this.triggerChanged()}loadingChanged(){}triggerChanged(){if(this._triggerInstance&&(this._triggerInstance.onDisconnected&&this._triggerInstance.onDisconnected(),this._triggerInstance=void 0,this._playerInstance?.pause()),!this.trigger||!this._playerInstance)return;const e=I._definedTriggers.get(this.trigger);if(!e)throw new Error("Can't use unregistered trigger!");const t=this.target?this.closest(this.target):null;this._triggerInstance=new e(this._playerInstance,this,t||this),this._triggerInstance.onConnected&&this._triggerInstance.onConnected(),this._playerInstance.isReady&&this._triggerInstance.onReady&&this._triggerInstance.onReady()}colorsChanged(){this._playerInstance&&(this._playerInstance.colors=o(this.colors)||null)}strokeChanged(){this._playerInstance&&(this._playerInstance.stroke=l(this.stroke)||null)}stateChanged(){this._playerInstance&&(this._playerInstance.state=this.state)}iconChanged(){this._isConnected&&(this.destroyPlayer(),this.createPlayer())}srcChanged(){this._isConnected&&(this.destroyPlayer(),this.createPlayer())}set icon(e){const t=this._assignedIconData;e&&i(e)?(this._assignedIconData=e,t!==e&&(this.hasAttribute("icon")?this.removeAttribute("icon"):this.iconChanged())):(this._assignedIconData=void 0,e&&"string"==typeof e?this.setAttribute("icon",e):this.hasAttribute("icon")?this.removeAttribute("icon"):t&&this.iconChanged())}get icon(){return this._assignedIconData||this.getAttribute("icon")}set src(e){e?this.setAttribute("src",e):this.removeAttribute("src")}get src(){return this.getAttribute("src")}set state(e){e?this.setAttribute("state",e):this.removeAttribute("state")}get state(){return this.getAttribute("state")}set colors(e){e?this.setAttribute("colors",e):this.removeAttribute("colors")}get colors(){return this.getAttribute("colors")}set trigger(e){e?this.setAttribute("trigger",e):this.removeAttribute("trigger")}get trigger(){return this.getAttribute("trigger")}set loading(e){e?this.setAttribute("loading",e):this.removeAttribute("loading")}get loading(){if(this.getAttribute("loading")){const e=this.getAttribute("loading").toLowerCase();if("lazy"===e)return"lazy";if("interaction"===e)return"interaction";if("delay"===e)return"delay"}return null}set target(e){e?this.setAttribute("target",e):this.removeAttribute("target")}get target(){return this.getAttribute("target")}set stroke(e){e?this.setAttribute("stroke",e):this.removeAttribute("stroke")}get stroke(){return this.hasAttribute("stroke")?this.getAttribute("stroke"):null}set iconData(e){e!==this._assignedIconData&&(this._assignedIconData=e,this.iconChanged())}get iconData(){return this._assignedIconData||this._loadedIconData}get isReady(){return this._isReady}get playerInstance(){return this._playerInstance}get triggerInstance(){return this._triggerInstance}get animationContainer(){return this._root.lastElementChild}}const C={renderer:"svg",loop:!1,autoplay:!1,rendererSettings:{preserveAspectRatio:"xMidYMid meet",progressiveLoad:!0,hideOnTransparent:!0}};function w(){return new Proxy(this,{set:(e,t,i,s)=>("string"==typeof t&&(i?p(this.lottie,this.rawProperties.filter((e=>"color"===e.type&&e.name===t)),i):y(this.lottie,this.rawProperties.filter((e=>"color"===e.type&&e.name===t))),e.refresh()),!0),get:(e,t,i)=>{for(const i of e.rawProperties)if("color"==i.type&&"string"==typeof t&&t==i.name){const e=s(this.lottie,i.path);if(e)return u(e)}},deleteProperty:(e,t)=>("string"==typeof t&&(y(this.lottie,this.rawProperties.filter((e=>"color"===e.type&&e.name===t))),e.refresh()),!0),ownKeys:e=>e.rawProperties.filter((e=>"color"==e.type)).map((e=>e.name)),has:(e,t)=>{for(const i of e.rawProperties)if("color"==i.type&&"string"==typeof t&&t==i.name)return!0;return!1},getOwnPropertyDescriptor:e=>({enumerable:!0,configurable:!0})})}class L{_animationLoader;_container;_iconData;_initial;_options;_lottie;_isReady=!1;_colorsProxy;_direction=1;_speed=1;_rawProperties;_eventCallbacks={};_state;_states;constructor(i,s,n,a,o){if(this._animationLoader=i,this._container=s,this._iconData=n,this._initial=a||{},this._options=o||C,this._states=(n.markers||[]).map((e=>{const[i,s]=e.cm.split(":"),r={time:e.tm,duration:e.dr,name:s||i,default:!(!s||!i.includes("default"))};return(r.name===this._initial.state||r.default&&t(this._initial.state))&&(this._state=r),r})).filter((e=>e.duration>0)),this._states.length&&(this._initial.stroke&&![1,2,3,"light","regular","bold"].includes(this._initial.stroke)&&delete this._initial.stroke,this._initial.state&&!this._state&&(this._state=this._states.filter((e=>e.default))[0])),!this._states.length){this._iconData=e(this._iconData);const t=m(this._iconData,{lottieInstance:!1});if(t&&this._initial.state){const e=`state-${this._initial.state.toLowerCase()}`;p(this._iconData,t.filter((e=>e.name.startsWith("state-"))),0),p(this._iconData,t.filter((t=>t.name===e)),1)}if(t&&this._initial.stroke){const e=t.filter((e=>"stroke"===e.name))[0];if(e){const t=e.value/50,i=this._initial.stroke*t;r(this._iconData,e.path,i)}}if(t&&this._initial.scale){const e=t.filter((e=>"scale"===e.name))[0];if(e){const t=e.value/50,i=this._initial.scale*t;r(this._iconData,e.path,i)}}if(t&&this._initial.axisX&&this._initial.axisY){const e=t.filter((e=>"axis"===e.name))[0];if(e){const t=(e.value[0]+e.value[1])/2/50;r(this._iconData,e.path+".0",this._initial.axisX*t),r(this._iconData,e.path+".1",this._initial.axisY*t)}}}}connect(){if(this._lottie)throw new Error("Already connected player!");const t={},i={};if(this._state&&(i.initialSegment=[this._state.time,this._state.time+this._state.duration+1]),this._states.length){const e=this._states[0],i=this._states[this._states.length-1];t.ip=e.time,t.op=i.time+i.duration+1}this._lottie=this._animationLoader({...this._options,...i,container:this._container,animationData:Object.assign(e(this._iconData),t)}),this._initial.colors&&(this.colors=this._initial.colors),this._initial.stroke&&(this.stroke=this._initial.stroke),this._lottie.addEventListener("complete",(e=>{this.triggerEvent("complete")})),this._lottie.addEventListener("loopComplete",(()=>{this.triggerEvent("complete")})),this._lottie.addEventListener("enterFrame",(e=>{this.triggerEvent("frame")})),this._lottie.isLoaded?(this._isReady=!0,this.triggerEvent("ready")):this._lottie.addEventListener("config_ready",(()=>{this._isReady=!0,this.triggerEvent("ready")}))}disconnect(){if(!this._lottie)throw new Error("Not connected player!");this._isReady=!1,this._lottie.destroy(),this._lottie=void 0,this._colorsProxy=void 0,this._rawProperties=void 0}addEventListener(e,t){return this._eventCallbacks[e]||(this._eventCallbacks[e]=[]),this._eventCallbacks[e].push(t),()=>{this.removeEventListener(e,t)}}removeEventListener(e,t){if(t){if(this._eventCallbacks[e]){let i=0,s=this._eventCallbacks[e].length;for(;i<s;)this._eventCallbacks[e][i]===t&&(this._eventCallbacks[e].splice(i,1),i-=1,s-=1),i+=1;this._eventCallbacks[e].length||(this._eventCallbacks[e]=null)}}else this._eventCallbacks[e]=null}triggerEvent(e,t){if(this._eventCallbacks[e]){const i=this._eventCallbacks[e];for(let e=0;e<i.length;e+=1)i[e](t)}}refresh(){this._lottie?.renderer.renderFrame(null),this.triggerEvent("refresh")}play(){this._lottie.setDirection(this._direction),this._lottie.play()}playFromBeginning(){this._lottie.setDirection(1),this._state?this._lottie.playSegments([this._state.time,this._state.time+this._state.duration+1],!0):this._lottie.goToAndPlay(0)}pause(){this._lottie.pause()}stop(){this._lottie.stop()}goToFrame(e){this._lottie.goToAndStop(e,!0)}goToFirstFrame(){this.goToFrame(0)}goToLastFrame(){this.goToFrame(Math.max(0,this.frames))}set properties(e){this.colors=e.colors||null,this.stroke=e.stroke||null,this.state=e.state||null}get properties(){const e={};return this.rawProperties.filter((e=>"color"===e.type)).length&&(e.colors={...this.colors}),this.rawProperties.filter((e=>"stroke"===e.name||"stroke-layers"===e.name)).length&&(e.stroke=this.stroke),this._states.length&&(e.state=this.state),e}set colors(e){if(y(this._lottie,this.rawProperties.filter((e=>"color"===e.type))),e)for(const[t,i]of Object.entries(e))p(this._lottie,this.rawProperties.filter((e=>"color"===e.type&&e.name===t)),i);this.refresh()}get colors(){return this._colorsProxy||(this._colorsProxy=w.call(this)),this._colorsProxy}set stroke(e){y(this._lottie,this.rawProperties.filter((e=>"stroke"===e.name||"stroke-layers"===e.name)));const t=l(e);t&&p(this._lottie,this.rawProperties.filter((e=>"stroke"===e.name||"stroke-layers"===e.name)),t),this.refresh()}get stroke(){const e=this.rawProperties.filter((e=>"stroke"===e.name||"stroke-layers"===e.name))[0];if(e){return l(+s(this._lottie,e.path))||null}return null}set state(e){if(e===this.state)return;const i=this.isPlaying;this._state=void 0,t(e)?this._state=this._states.filter((e=>e.default))[0]:e&&(this._state=this._states.filter((t=>t.name===e))[0],this._state||(this._state=this._states.filter((e=>e.default))[0])),this._state?this._lottie?.setSegment(this._state.time,this._state.time+this._state.duration+1):this._lottie.resetSegments(!0),this.goToFirstFrame(),i&&(this.pause(),this.play())}get state(){return this._state?this._state.name:""}set speed(e){this._speed=e,this._lottie?.setSpeed(e)}get speed(){return this._speed}set direction(e){this._direction=e,this._lottie.setDirection(e)}get direction(){return this._direction}set loop(e){this._lottie.loop=e}get loop(){return!!this._lottie.loop}set frame(e){this.goToFrame(Math.max(0,Math.min(this.frames,e)))}get frame(){return this._lottie.currentFrame}get states(){return this._states}get isPlaying(){return!this._lottie.isPaused}get isReady(){return this._isReady}get frames(){return this._lottie.getDuration(!0)-1}get duration(){return this._lottie.getDuration(!1)}get lottie(){return this._lottie}get rawProperties(){return this._rawProperties||(this._rawProperties=m(this._iconData,{lottieInstance:!0}),!this._states.length&&this._rawProperties&&(this._rawProperties=this._rawProperties.filter((e=>"scale"!==e.name&&"axis"!==e.name&&"stroke"!==e.name&&!e.name.startsWith("state-"))))),this._rawProperties||[]}}class D{player;element;targetElement;constructor(e,t,i){this.player=e,this.element=t,this.targetElement=i,this.onHover=this.onHover.bind(this)}onConnected(){this.targetElement.addEventListener("mouseenter",this.onHover)}onDisconnected(){this.targetElement.removeEventListener("mouseenter",this.onHover),this.player.direction=1}onComplete(){this.player.direction=-1,this.player.play()}onHover(){this.player.direction=1,this.player.play()}}const T=[{name:"mousedown"},{name:"touchstart",options:{passive:!0}}];class P{player;element;targetElement;constructor(e,t,i){this.player=e,this.element=t,this.targetElement=i,this.onClick=this.onClick.bind(this)}onConnected(){for(const e of T)this.targetElement.addEventListener(e.name,this.onClick,e.options)}onDisconnected(){for(const e of T)this.targetElement.removeEventListener(e.name,this.onClick)}onClick(){this.player.isPlaying||this.player.playFromBeginning()}}class A{player;element;targetElement;constructor(e,t,i){this.player=e,this.element=t,this.targetElement=i,this.onHover=this.onHover.bind(this)}onConnected(){this.targetElement.addEventListener("mouseenter",this.onHover)}onDisconnected(){this.targetElement.removeEventListener("mouseenter",this.onHover)}onHover(){this.player.isPlaying||this.player.playFromBeginning()}}class F{player;element;targetElement;playTimeout=null;played=!1;intersectionObserver;constructor(e,t,i){this.player=e,this.element=t,this.targetElement=i}onConnected(){if(this.loading)this.play();else{const e=(e,t)=>{e.forEach((e=>{e.isIntersecting&&(this.play(),this.resetIntersectionObserver())}))};this.intersectionObserver=new IntersectionObserver(e),this.intersectionObserver.observe(this.element)}}onDisconnected(){this.played=!1,this.resetIntersectionObserver(),this.resetPlayDelayTimer()}play(){this.played||(this.played=!0,this.resetPlayDelayTimer(),this.delay>0?this.playTimeout=setTimeout((()=>{this.player.playFromBeginning(),this.playTimeout=null}),this.delay):this.player.playFromBeginning())}resetIntersectionObserver(){this.intersectionObserver&&(this.intersectionObserver.unobserve(this.element),this.intersectionObserver=void 0)}resetPlayDelayTimer(){this.playTimeout&&(clearTimeout(this.playTimeout),this.playTimeout=null)}get delay(){const e=this.element.hasAttribute("delay")?+(this.element.getAttribute("delay")||0):0;return Math.max(e,0)}get loading(){return this.element.hasAttribute("loading")}}class x{player;element;targetElement;playTimeout=null;constructor(e,t,i){this.player=e,this.element=t,this.targetElement=i}onReady(){this.play()}onComplete(){this.play()}onDisconnected(){this.resetPlayDelayTimer()}play(){this.resetPlayDelayTimer(),this.delay>0?this.playTimeout=setTimeout((()=>{this.player.playFromBeginning()}),this.delay):this.player.playFromBeginning()}resetPlayDelayTimer(){this.playTimeout&&(clearTimeout(this.playTimeout),this.playTimeout=null)}get delay(){const e=this.element.hasAttribute("delay")?+(this.element.getAttribute("delay")||0):0;return Math.max(e,0)}}class M{player;element;targetElement;playTimeout=null;mouseIn=!1;constructor(e,t,i){this.player=e,this.element=t,this.targetElement=i,this.onMouseEnter=this.onMouseEnter.bind(this),this.onMouseLeave=this.onMouseLeave.bind(this)}onConnected(){this.targetElement.addEventListener("mouseenter",this.onMouseEnter),this.targetElement.addEventListener("mouseleave",this.onMouseLeave)}onDisconnected(){this.targetElement.removeEventListener("mouseenter",this.onMouseEnter),this.targetElement.removeEventListener("mouseleave",this.onMouseLeave),this.resetPlayDelayTimer()}onMouseEnter(){this.mouseIn=!0,this.player.isPlaying||this.play()}onMouseLeave(){this.mouseIn=!1,this.resetPlayDelayTimer()}onComplete(){this.play()}play(){this.resetPlayDelayTimer(),this.mouseIn&&(this.delay>0?this.playTimeout=setTimeout((()=>{this.player.playFromBeginning()}),this.delay):this.player.playFromBeginning())}resetPlayDelayTimer(){this.playTimeout&&(clearTimeout(this.playTimeout),this.playTimeout=null)}get delay(){const e=this.element.hasAttribute("delay")?+(this.element.getAttribute("delay")||0):0;return Math.max(e,0)}}class S{player;element;targetElement;constructor(e,t,i){this.player=e,this.element=t,this.targetElement=i,this.onMouseEnter=this.onMouseEnter.bind(this),this.onMouseLeave=this.onMouseLeave.bind(this)}onConnected(){this.targetElement.addEventListener("mouseenter",this.onMouseEnter),this.targetElement.addEventListener("mouseleave",this.onMouseLeave)}onDisconnected(){this.targetElement.removeEventListener("mouseenter",this.onMouseEnter),this.targetElement.removeEventListener("mouseleave",this.onMouseLeave),this.player.direction=1}onMouseEnter(){this.player.direction=1,this.player.play()}onMouseLeave(){this.player.direction=-1,this.player.play()}}const R=/^\d*(\.\d+)?$/,$={attributes:!0,childList:!1,subtree:!1};class q{player;element;targetElement;sequenceIndex=0;frameState=null;frameDelayFirst=null;frameDelayLast=null;timer;observer;constructor(e,t,i){this.player=e,this.element=t,this.targetElement=i,this.observer=new MutationObserver(((e,t)=>{for(const t of e)"attributes"===t.type&&["sequence","speed"].includes(t.attributeName)&&(this.reset(),this.step())}))}onReady(){this.step()}onComplete(){this.timer=setTimeout((()=>{this.timer=null,this.frameDelayLast=null,this.step()}),this.frameDelayLast||0)}onConnected(){this.observer.observe(this.element,$),this.player.speed=this.speed}onDisconnected(){this.observer.disconnect(),this.timer&&(clearTimeout(this.timer),this.timer=null),this.player.speed=1}reset(){this.player.pause(),this.player.speed=this.speed,this.sequenceIndex=0,this.frameState=this.frameDelayFirst=this.frameDelayLast=null,this.timer&&(clearTimeout(this.timer),this.timer=null)}takeStep(){const e=this.sequence.split(","),t=e[this.sequenceIndex];this.sequenceIndex++,this.sequenceIndex>=e.length&&(this.sequenceIndex=0);const[i,...s]=t.split(":");return{action:i,params:s}}handleStep(e,t){if("play"===e){this.frameState&&(this.player.state=this.frameState,this.frameState=null);t.includes("reverse")?(this.player.goToLastFrame(),this.player.direction=-1):(this.player.goToFirstFrame(),this.player.direction=1),this.timer=setTimeout((()=>{this.timer=null,this.frameDelayFirst=null,this.player.play()}),this.frameDelayFirst||0)}else if("frame"===e){let e=0;t.length&&t[0].match(R)&&(e=Math.max(0,Math.min(this.player.frames,+t[0]))),this.player.frame=e,this.timer=setTimeout((()=>{this.timer=null,this.frameDelayFirst=null,this.step()}),this.frameDelayFirst||0)}else if("state"===e)this.frameState=t[0],this.step();else if("delay"===e){let e=null;for(const i of t)i&&i.match(R)&&(e=+i);e&&e>0&&(t.includes("first")&&t.includes("last")?(this.frameDelayFirst=e,this.frameDelayLast=e):t.includes("first")?this.frameDelayFirst=e:t.includes("last")?this.frameDelayLast=e:this.frameDelayFirst=e),this.step()}else if("idle"!==e)throw new Error(`Invalid sequence action: ${e}`)}step(){const{action:e,params:t}=this.takeStep();e&&this.handleStep(e,t)}get sequence(){return this.element.getAttribute("sequence")||""}get speed(){return this.element.hasAttribute("speed")?+(this.element.getAttribute("speed")||1):1}}function O(e){I.setPlayerFactory(((t,i,s)=>new L(e,t,i,s))),I.defineTrigger("in",F),I.defineTrigger("click",P),I.defineTrigger("hover",A),I.defineTrigger("loop",x),I.defineTrigger("loop-on-hover",M),I.defineTrigger("morph",S),I.defineTrigger("boomerang",D),I.defineTrigger("sequence",q),I.defineTrigger("morph-two-way",D),customElements.get&&customElements.get("lord-icon")||customElements.define("lord-icon",I)}export{D as Boomerang,P as Click,I as Element,A as Hover,F as In,x as Loop,M as LoopOnHover,S as Morph,L as Player,q as Sequence,O as defineElement};
//# sourceMappingURL=index.js.map