@ronantakizawa/airpln-ui/dist/index.js

A collection of airline-themed UI web components

!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((t="undefined"!=typeof globalThis?globalThis:t||self)["airpln-ui"]={})}(this,(function(t){"use strict";function n(t,n,e,o,r,i,a){try{var s=t[i](a),l=s.value}catch(t){return void e(t)}s.done?n(l):Promise.resolve(l).then(o,r)}function e(t){return function(){var e=this,o=arguments;return new Promise((function(r,i){var a=t.apply(e,o);function s(t){n(a,r,i,s,l,"next",t)}function l(t){n(a,r,i,s,l,"throw",t)}s(void 0)}))}}function o(t,n,e){return n=a(n),function(t,n){if(n&&("object"==typeof n||"function"==typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}(t,l()?Reflect.construct(n,[],a(t).constructor):n.apply(t,e))}function r(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}function i(t,n,e){return n&&function(t,n){for(var e=0;e<n.length;e++){var o=n[e];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,u(o.key),o)}}(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),t}function a(t){return a=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},a(t)}function s(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(n&&n.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),n&&d(t,n)}function l(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(t){}return(l=function(){return!!t})()}function c(){c=function(){return n};var t,n={},e=Object.prototype,o=e.hasOwnProperty,r=Object.defineProperty||function(t,n,e){t[n]=e.value},i="function"==typeof Symbol?Symbol:{},a=i.iterator||"@@iterator",s=i.asyncIterator||"@@asyncIterator",l=i.toStringTag||"@@toStringTag";function d(t,n,e){return Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}),t[n]}try{d({},"")}catch(t){d=function(t,n,e){return t[n]=e}}function u(t,n,e,o){var i=n&&n.prototype instanceof v?n:v,a=Object.create(i.prototype),s=new B(o||[]);return r(a,"_invoke",{value:P(t,e,s)}),a}function p(t,n,e){try{return{type:"normal",arg:t.call(n,e)}}catch(t){return{type:"throw",arg:t}}}n.wrap=u;var h="suspendedStart",f="suspendedYield",g="executing",m="completed",y={};function v(){}function b(){}function x(){}var w={};d(w,a,(function(){return this}));var k=Object.getPrototypeOf,E=k&&k(k(A([])));E&&E!==e&&o.call(E,a)&&(w=E);var L=x.prototype=v.prototype=Object.create(w);function M(t){["next","throw","return"].forEach((function(n){d(t,n,(function(t){return this._invoke(n,t)}))}))}function R(t,n){function e(r,i,a,s){var l=p(t[r],t,i);if("throw"!==l.type){var c=l.arg,d=c.value;return d&&"object"==typeof d&&o.call(d,"__await")?n.resolve(d.__await).then((function(t){e("next",t,a,s)}),(function(t){e("throw",t,a,s)})):n.resolve(d).then((function(t){c.value=t,a(c)}),(function(t){return e("throw",t,a,s)}))}s(l.arg)}var i;r(this,"_invoke",{value:function(t,o){function r(){return new n((function(n,r){e(t,o,n,r)}))}return i=i?i.then(r,r):r()}})}function P(n,e,o){var r=h;return function(i,a){if(r===g)throw Error("Generator is already running");if(r===m){if("throw"===i)throw a;return{value:t,done:!0}}for(o.method=i,o.arg=a;;){var s=o.delegate;if(s){var l=I(s,o);if(l){if(l===y)continue;return l}}if("next"===o.method)o.sent=o._sent=o.arg;else if("throw"===o.method){if(r===h)throw r=m,o.arg;o.dispatchException(o.arg)}else"return"===o.method&&o.abrupt("return",o.arg);r=g;var c=p(n,e,o);if("normal"===c.type){if(r=o.done?m:f,c.arg===y)continue;return{value:c.arg,done:o.done}}"throw"===c.type&&(r=m,o.method="throw",o.arg=c.arg)}}}function I(n,e){var o=e.method,r=n.iterator[o];if(r===t)return e.delegate=null,"throw"===o&&n.iterator.return&&(e.method="return",e.arg=t,I(n,e),"throw"===e.method)||"return"!==o&&(e.method="throw",e.arg=new TypeError("The iterator does not provide a '"+o+"' method")),y;var i=p(r,n.iterator,e.arg);if("throw"===i.type)return e.method="throw",e.arg=i.arg,e.delegate=null,y;var a=i.arg;return a?a.done?(e[n.resultName]=a.value,e.next=n.nextLoc,"return"!==e.method&&(e.method="next",e.arg=t),e.delegate=null,y):a:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,y)}function T(t){var n={tryLoc:t[0]};1 in t&&(n.catchLoc=t[1]),2 in t&&(n.finallyLoc=t[2],n.afterLoc=t[3]),this.tryEntries.push(n)}function C(t){var n=t.completion||{};n.type="normal",delete n.arg,t.completion=n}function B(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(T,this),this.reset(!0)}function A(n){if(n||""===n){var e=n[a];if(e)return e.call(n);if("function"==typeof n.next)return n;if(!isNaN(n.length)){var r=-1,i=function e(){for(;++r<n.length;)if(o.call(n,r))return e.value=n[r],e.done=!1,e;return e.value=t,e.done=!0,e};return i.next=i}}throw new TypeError(typeof n+" is not iterable")}return b.prototype=x,r(L,"constructor",{value:x,configurable:!0}),r(x,"constructor",{value:b,configurable:!0}),b.displayName=d(x,l,"GeneratorFunction"),n.isGeneratorFunction=function(t){var n="function"==typeof t&&t.constructor;return!!n&&(n===b||"GeneratorFunction"===(n.displayName||n.name))},n.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,x):(t.__proto__=x,d(t,l,"GeneratorFunction")),t.prototype=Object.create(L),t},n.awrap=function(t){return{__await:t}},M(R.prototype),d(R.prototype,s,(function(){return this})),n.AsyncIterator=R,n.async=function(t,e,o,r,i){void 0===i&&(i=Promise);var a=new R(u(t,e,o,r),i);return n.isGeneratorFunction(e)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},M(L),d(L,l,"Generator"),d(L,a,(function(){return this})),d(L,"toString",(function(){return"[object Generator]"})),n.keys=function(t){var n=Object(t),e=[];for(var o in n)e.push(o);return e.reverse(),function t(){for(;e.length;){var o=e.pop();if(o in n)return t.value=o,t.done=!1,t}return t.done=!0,t}},n.values=A,B.prototype={constructor:B,reset:function(n){if(this.prev=0,this.next=0,this.sent=this._sent=t,this.done=!1,this.delegate=null,this.method="next",this.arg=t,this.tryEntries.forEach(C),!n)for(var e in this)"t"===e.charAt(0)&&o.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=t)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(n){if(this.done)throw n;var e=this;function r(o,r){return s.type="throw",s.arg=n,e.next=o,r&&(e.method="next",e.arg=t),!!r}for(var i=this.tryEntries.length-1;i>=0;--i){var a=this.tryEntries[i],s=a.completion;if("root"===a.tryLoc)return r("end");if(a.tryLoc<=this.prev){var l=o.call(a,"catchLoc"),c=o.call(a,"finallyLoc");if(l&&c){if(this.prev<a.catchLoc)return r(a.catchLoc,!0);if(this.prev<a.finallyLoc)return r(a.finallyLoc)}else if(l){if(this.prev<a.catchLoc)return r(a.catchLoc,!0)}else{if(!c)throw Error("try statement without catch or finally");if(this.prev<a.finallyLoc)return r(a.finallyLoc)}}}},abrupt:function(t,n){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc<=this.prev&&o.call(r,"finallyLoc")&&this.prev<r.finallyLoc){var i=r;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=n&&n<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=n,i?(this.method="next",this.next=i.finallyLoc,y):this.complete(a)},complete:function(t,n){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&n&&(this.next=n),y},finish:function(t){for(var n=this.tryEntries.length-1;n>=0;--n){var e=this.tryEntries[n];if(e.finallyLoc===t)return this.complete(e.completion,e.afterLoc),C(e),y}},catch:function(t){for(var n=this.tryEntries.length-1;n>=0;--n){var e=this.tryEntries[n];if(e.tryLoc===t){var o=e.completion;if("throw"===o.type){var r=o.arg;C(e)}return r}}throw Error("illegal catch attempt")},delegateYield:function(n,e,o){return this.delegate={iterator:A(n),resultName:e,nextLoc:o},"next"===this.method&&(this.arg=t),y}},n}function d(t,n){return d=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,n){return t.__proto__=n,t},d(t,n)}function u(t){var n=function(t,n){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var o=e.call(t,n);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t,"string");return"symbol"==typeof n?n:n+""}function p(t){var n="function"==typeof Map?new Map:void 0;return p=function(t){if(null===t||!function(t){try{return-1!==Function.toString.call(t).indexOf("[native code]")}catch(n){return"function"==typeof t}}(t))return t;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==n){if(n.has(t))return n.get(t);n.set(t,e)}function e(){return function(t,n,e){if(l())return Reflect.construct.apply(null,arguments);var o=[null];o.push.apply(o,n);var r=new(t.bind.apply(t,o));return e&&d(r,e.prototype),r}(t,arguments,a(this).constructor)}return e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),d(e,t)},p(t)}var h=function(t){function n(){var t;return r(this,n),(t=o(this,n)).attachShadow({mode:"open"}),t.shadowRoot.innerHTML='\n            <style>\n                .plane-button {\n                    padding: 16px 32px;\n                    font-size: 18px;\n                    background: linear-gradient(135deg, #0477BF, #0369a1);\n                    color: white;\n                    border: none;\n                    border-radius: 8px;\n                    cursor: pointer;\n                    position: relative;\n                    overflow: hidden;\n                    transition: transform 0.2s;\n                }\n\n                .plane-button:hover {\n                    transform: translateY(-2px);\n                }\n\n                .plane {\n                    position: absolute;\n                    width: 24px;\n                    height: 24px;\n                    fill: #0477BF;\n                    opacity: 0;\n                    pointer-events: none;\n                }\n\n                @keyframes flyPlane {\n                    0% {\n                        transform: translate(0, 0) rotate(0deg);\n                        opacity: 1;\n                    }\n                    100% {\n                        transform: translate(var(--tx), var(--ty)) rotate(var(--rotation));\n                        opacity: 0;\n                    }\n                }\n            </style>\n            <button class="plane-button">\n                <slot>Click!</slot>\n            </button>\n        ',t.button=t.shadowRoot.querySelector(".plane-button"),t.button.addEventListener("click",(function(){return t.createPlanes()})),t}return s(n,t),i(n,[{key:"createPlanes",value:function(){for(var t=0;t<8;t++)this.createPlane()}},{key:"createPlane",value:function(){if(!document.querySelector("#burst-plane-style")){var t=document.createElement("style");t.id="burst-plane-style",t.textContent="\n                @keyframes burstFlyPlane {\n                    0% {\n                        transform: translate(-50%, -50%) rotate(0deg);\n                        opacity: 1;\n                    }\n                    100% {\n                        opacity: 0;\n                    }\n                }\n            ",document.head.appendChild(t)}var n=document.createElement("div");n.style.position="fixed",n.style.zIndex="9999",n.style.pointerEvents="none",n.innerHTML='\n            <svg class="plane" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" style="width: 24px; height: 24px; fill: #0477BF;">\n                <path d="M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64l-116.6 0L265.2 495.9c-5.7 10-16.3 16.1-27.8 16.1l-56.2 0c-10.6 0-18.3-10.2-15.4-20.4l49-171.6L112 320 68.8 377.6c-3 4-7.8 6.4-12.8 6.4l-42 0c-7.8 0-14-6.3-14-14c0-1.3 .2-2.6 .5-3.9L32 256 .5 145.9c-.4-1.3-.5-2.6-.5-3.9c0-7.8 6.3-14 14-14l42 0c5 0 9.8 2.4 12.8 6.4L112 192l102.9 0-49-171.6C162.9 10.2 170.6 0 181.2 0l56.2 0c11.5 0 22.1 6.2 27.8 16.1L365.7 192l116.6 0z"/>\n            </svg>\n        ';var e=this.button.getBoundingClientRect(),o=Math.random()*Math.PI*2,r=100+200*Math.random(),i=Math.cos(o)*r,a=Math.sin(o)*r;n.style.left="".concat(e.left+e.width/2,"px"),n.style.top="".concat(e.top+e.height/2,"px"),n.style.transform="translate(-50%, -50%)",n.style.animation="burstFlyPlane 1s ease-out forwards",n.style.animationName="none",n.offsetWidth,n.style.animationName="burstFlyPlane",n.style.transform="translate(calc(-50% + ".concat(i,"px), calc(-50% + ").concat(a,"px)) rotate(").concat(o*(180/Math.PI),"deg)"),document.body.appendChild(n),setTimeout((function(){document.body.removeChild(n)}),1e3)}}])}(p(HTMLElement));customElements.define("burst-button",h);var f=function(t){function n(){var t;return r(this,n),(t=o(this,n)).attachShadow({mode:"open"}),t.shadowRoot.innerHTML='\n            <style>\n                .download-button {\n                    padding: 12px 32px;\n                    font-size: 16px;\n                    background: #0284c7;\n                    color: white;\n                    border: none;\n                    border-radius: 50px;\n                    cursor: pointer;\n                    position: relative;\n                    overflow: hidden;\n                    transition: background-color 0.3s ease;\n                    font-family: \'Roboto\', sans-serif;\n                    min-width: 140px;\n                }\n\n                .download-button:hover {\n                    background: #0369a1;\n                }\n\n                .button-text {\n                    display: inline-block;\n                    transition: opacity 0.2s ease;\n                }\n\n                .plane {\n                    position: absolute;\n                    width: 20px;\n                    height: 20px;\n                    fill: white;\n                    top: 50%;\n                    left: -30px;\n                    transform: translateY(-50%);\n                    transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);\n                }\n\n                .checkmark {\n                    position: absolute;\n                    width: 20px;\n                    height: 20px;\n                    top: 50%;\n                    left: 50%;\n                    transform: translate(-50%, -50%) scale(0);\n                    opacity: 0;\n                    transition: all 0.3s ease;\n                }\n\n                .checkmark path {\n                    stroke: white;\n                    stroke-width: 2;\n                    stroke-linecap: round;\n                    stroke-linejoin: round;\n                    stroke-dasharray: 48;\n                    stroke-dashoffset: 48;\n                    transition: stroke-dashoffset 0.3s ease 0.1s;\n                }\n\n                .button-success {\n                    background: #16a34a;\n                }\n\n                .button-success:hover {\n                    background: #16a34a;\n                }\n\n                .download-button[disabled] {\n                    cursor: default;\n                }\n            </style>\n            <button class="download-button">\n                <span class="button-text"><slot>Book Flight</slot></span>\n                <svg class="plane" viewBox="0 0 576 512">\n                    <path d="M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64l-116.6 0L265.2 495.9c-5.7 10-16.3 16.1-27.8 16.1l-56.2 0c-10.6 0-18.3-10.2-15.4-20.4l49-171.6L112 320 68.8 377.6c-3 4-7.8 6.4-12.8 6.4l-42 0c-7.8 0-14-6.3-14-14c0-1.3 .2-2.6 .5-3.9L32 256 .5 145.9c-.4-1.3-.5-2.6-.5-3.9c0-7.8 6.3-14 14-14l42 0c5 0 9.8 2.4 12.8 6.4L112 192l102.9 0-49-171.6C162.9 10.2 170.6 0 181.2 0l56.2 0c11.5 0 22.1 6.2 27.8 16.1L365.7 192l116.6 0z"/>\n                </svg>\n                <svg class="checkmark" viewBox="0 0 24 24">\n                    <path fill="none" d="M3.5 12.5L9.5 18.5L20.5 5.5"/>\n                </svg>\n            </button>\n        ',t.button=t.shadowRoot.querySelector(".download-button"),t.plane=t.shadowRoot.querySelector(".plane"),t.buttonText=t.shadowRoot.querySelector(".button-text"),t.checkmark=t.shadowRoot.querySelector(".checkmark"),t.button.addEventListener("click",(function(){return t.startAnimation()})),t}return s(n,t),i(n,[{key:"startAnimation",value:function(){var t=this;this.button.disabled||(this.button.disabled=!0,this.plane.style.left="calc(100% + 30px)",this.buttonText.style.opacity="0",setTimeout((function(){t.button.classList.add("button-success"),t.plane.style.opacity="0",t.checkmark.style.transform="translate(-50%, -50%) scale(1)",t.checkmark.style.opacity="1",t.checkmark.querySelector("path").style.strokeDashoffset="0",setTimeout((function(){t.reset()}),2e3)}),800))}},{key:"reset",value:function(){var t=this;this.button.disabled=!1,this.button.classList.remove("button-success"),this.plane.style.opacity="0",this.plane.style.left="-30px",setTimeout((function(){t.plane.style.opacity="1"}),1e3),this.buttonText.style.opacity="1",this.checkmark.style.transform="translate(-50%, -50%) scale(0)",this.checkmark.style.opacity="0"}}])}(p(HTMLElement));customElements.define("progress-button",f);var g=function(t){function n(){var t;return r(this,n),(t=o(this,n)).attachShadow({mode:"open"}),t.shadowRoot.innerHTML='\n            <style>\n                :host {\n                    display: block;\n                }\n\n                #loading-container {\n                    position: relative;\n                    width: 200px;\n                    height: 200px;\n                }\n\n                #loading-text {\n                    font-size: 20px;\n                    color: #0477BF;\n                    position: absolute;\n                    top: 50%;\n                    left: 50%;\n                    transform: translate(-50%, -50%);\n                    font-family: \'Roboto\', sans-serif;\n                }\n\n                #plane-container {\n                    position: absolute;\n                    width: 100px;\n                    height: 100px;\n                    top: 30%;\n                    left: 30%;\n                    transform: translate(-30%, -30%);\n                    animation: orbit 3s linear infinite;\n                }\n\n                #plane {\n                    position: absolute;\n                    top: -45px;\n                    left: 80%;\n                    transform: translateX(-50%);\n                    width: 30px;\n                    height: 30px;\n                    fill: #0477BF;\n                    transform-origin: 50% 100%;\n                }\n\n                @keyframes orbit {\n                    from { transform: rotate(0deg); }\n                    to { transform: rotate(360deg); }\n                }\n            </style>\n            <div id="loading-container">\n                <span id="loading-text">Loading</span>\n                <div id="plane-container">\n                    <svg id="plane" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">\n                        <path d="M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64l-116.6 0L265.2 495.9c-5.7 10-16.3 16.1-27.8 16.1l-56.2 0c-10.6 0-18.3-10.2-15.4-20.4l49-171.6L112 320 68.8 377.6c-3 4-7.8 6.4-12.8 6.4l-42 0c-7.8 0-14-6.3-14-14c0-1.3 .2-2.6 .5-3.9L32 256 .5 145.9c-.4-1.3-.5-2.6-.5-3.9c0-7.8 6.3-14 14-14l42 0c5 0 9.8 2.4 12.8 6.4L112 192l102.9 0-49-171.6C162.9 10.2 170.6 0 181.2 0l56.2 0c11.5 0 22.1 6.2 27.8 16.1L365.7 192l116.6 0z"/>\n                    </svg>\n                </div>\n            </div>\n        ',t.loadingText=t.shadowRoot.getElementById("loading-text"),t.dots=1,setInterval((function(){t.loadingText.textContent="Loading"+".".repeat(t.dots),t.dots=t.dots%3+1}),500),t}return s(n,t),i(n)}(p(HTMLElement));customElements.define("orbit-loading",g);var m=function(t){function n(){var t;return r(this,n),(t=o(this,n)).attachShadow({mode:"open"}),t.shadowRoot.innerHTML='\n            <style>\n                :host {\n                    display: block;\n                }\n \n \n                #loading-container {\n                    position: relative;\n                    width: 200px;\n                    height: 200px;\n                }\n \n \n                #loading-text {\n                    font-size: 20px;\n                    color: #0477BF;\n                    position: absolute;\n                    top: 50%;\n                    left: 50%;\n                    transform: translate(-50%, -50%);\n                    font-family: \'Roboto\', sans-serif;\n                }\n \n \n                #progress-ring {\n                    position: absolute;\n                    top: 50%;\n                    left: 50%;\n                    transform: translate(-50%, -50%);\n                    width: 140px;\n                    height: 140px;\n                    border-radius: 50%;\n                    border: 3px solid rgba(4, 119, 191, 0.1);\n                }\n \n \n                #progress-ring::after {\n                    content: \'\';\n                    position: absolute;\n                    top: 70px;\n                    left: 70px;\n                    width: 140px;\n                    height: 140px;\n                    border-radius: 50%;\n                    border: 3px solid transparent;\n                    border-top-color: #0477BF;\n                    transform-origin: center;\n                    animation: spin 2s linear infinite;\n                }\n \n \n                #plane {\n                    position: absolute;\n                    width: 24px;\n                    height: 24px;\n                    fill: #0477BF;\n                    top: 14px;\n                    left: 128px;\n                    transform: translateX(-50%) rotate(45deg);\n                }\n \n \n                #plane-wrapper {\n                    position: absolute;\n                    top: 50%;\n                    left: 50%;\n                    width: 146px;\n                    height: 146px;\n                    transform-origin: center;\n                    animation: spin 2s linear infinite;\n                }\n \n \n                @keyframes spin {\n                    from { transform: translate(-50%, -50%) rotate(0deg); }\n                    to { transform: translate(-50%, -50%) rotate(360deg); }\n                }\n            </style>\n            <div id="loading-container">\n                <div id="progress-ring"></div>\n                <div id="plane-wrapper">\n                    <svg id="plane" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">\n                        <path d="M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64l-116.6 0L265.2 495.9c-5.7 10-16.3 16.1-27.8 16.1l-56.2 0c-10.6 0-18.3-10.2-15.4-20.4l49-171.6L112 320 68.8 377.6c-3 4-7.8 6.4-12.8 6.4l-42 0c-7.8 0-14-6.3-14-14c0-1.3 .2-2.6 .5-3.9L32 256 .5 145.9c-.4-1.3-.5-2.6-.5-3.9c0-7.8 6.3-14 14-14l42 0c5 0 9.8 2.4 12.8 6.4L112 192l102.9 0-49-171.6C162.9 10.2 170.6 0 181.2 0l56.2 0c11.5 0 22.1 6.2 27.8 16.1L365.7 192l116.6 0z"/>\n                    </svg>\n                </div>\n                <span id="loading-text">Loading</span>\n            </div>\n        ',t.loadingText=t.shadowRoot.getElementById("loading-text"),t.dots=1,setInterval((function(){t.loadingText.textContent="Loading"+".".repeat(t.dots),t.dots=t.dots%3+1}),500),t}return s(n,t),i(n)}(p(HTMLElement));customElements.define("orbit-loading-circle",m);var y=function(t){function n(){var t;return r(this,n),(t=o(this,n)).attachShadow({mode:"open"}),t.shadowRoot.innerHTML='\n            <style>\n                :host {\n                display: block;\n                    min-height: 200px;\n                }\n\n                .scene {\n                    position: relative;\n                    width: 300px;\n                    height: 200px;\n                    background: linear-gradient(to bottom, #3498db, #85c1e9);\n                    border-radius: 8px;\n                    overflow: hidden;\n                }\n\n                .plane {\n                    position: absolute;\n                    width: 40px;\n                    height: 40px;\n                    fill: white;\n                    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.2));\n                    z-index: 2;\n                    animation: fly 4s infinite ease-in-out;\n                }\n\n                .cloud {\n                    position: absolute;\n                    background: white;\n                    border-radius: 20px;\n                    animation: float-across 8s linear infinite;\n                    opacity: 0.9;\n                }\n\n                .cloud::before,\n                .cloud::after {\n                    content: \'\';\n                    position: absolute;\n                    background: white;\n                    border-radius: 50%;\n                }\n\n                .cloud-1 {\n                    width: 100px;\n                    height: 30px;\n                    top: 50px;\n                }\n\n                .cloud-1::before {\n                    width: 35px;\n                    height: 35px;\n                    top: -20px;\n                    left: 10px;\n                }\n\n                .cloud-1::after {\n                    width: 45px;\n                    height: 45px;\n                    top: -25px;\n                    left: 40px;\n                }\n\n                .cloud-2 {\n                    width: 80px;\n                    height: 25px;\n                    top: 100px;\n                    animation-delay: -4s;\n                }\n\n                .cloud-2::before {\n                    width: 30px;\n                    height: 30px;\n                    top: -15px;\n                    left: 5px;\n                }\n\n                .cloud-2::after {\n                    width: 35px;\n                    height: 35px;\n                    top: -20px;\n                    left: 30px;\n                }\n\n                .cloud-3 {\n                    width: 120px;\n                    height: 35px;\n                    top: 150px;\n                    animation-delay: -2s;\n                }\n\n                .cloud-3::before {\n                    width: 40px;\n                    height: 40px;\n                    top: -25px;\n                    left: 15px;\n                }\n\n                .cloud-3::after {\n                    width: 50px;\n                    height: 50px;\n                    top: -30px;\n                    left: 45px;\n                }\n\n                @keyframes float-across {\n                    from {\n                        left: 320px;\n                        transform: translateX(0);\n                    }\n                    to {\n                        left: -150px;\n                        transform: translateX(0);\n                    }\n                }\n\n                @keyframes fly {\n                    0%, 100% {\n                        transform: translate(130px, 80px) rotate(5deg);\n                    }\n                    25% {\n                        transform: translate(130px, 60px) rotate(-2deg);\n                    }\n                    75% {\n                        transform: translate(130px, 100px) rotate(8deg);\n                    }\n                }\n\n                .loading-text {\n                    position: absolute;\n                    bottom: 10px;\n                    left: 50%;\n                    transform: translateX(-50%);\n                    color: white;\n                    font-size: 16px;\n                    font-weight: 600;\n                    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);\n                    white-space: nowrap;\n                    font-family: \'Roboto\', sans-serif;\n                }\n\n                .dots {\n                    display: inline-block;\n                    width: 24px;\n                }\n            </style>\n            <div class="scene">\n                <svg class="plane" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">\n                    <path d="M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64l-116.6 0L265.2 495.9c-5.7 10-16.3 16.1-27.8 16.1l-56.2 0c-10.6 0-18.3-10.2-15.4-20.4l49-171.6L112 320 68.8 377.6c-3 4-7.8 6.4-12.8 6.4l-42 0c-7.8 0-14-6.3-14-14c0-1.3 .2-2.6 .5-3.9L32 256 .5 145.9c-.4-1.3-.5-2.6-.5-3.9c0-7.8 6.3-14 14-14l42 0c5 0 9.8 2.4 12.8 6.4L112 192l102.9 0-49-171.6C162.9 10.2 170.6 0 181.2 0l56.2 0c11.5 0 22.1 6.2 27.8 16.1L365.7 192l116.6 0z"/>\n                </svg>\n                <div class="cloud cloud-1"></div>\n                <div class="cloud cloud-2"></div>\n                <div class="cloud cloud-3"></div>\n                <div class="loading-text">Loading<span class="dots"></span></div>\n            </div>\n        ',t.dots=t.shadowRoot.querySelector(".dots"),t.dotCount=0,setInterval((function(){t.dotCount=t.dotCount%3+1,t.dots.textContent=".".repeat(t.dotCount)}),500),t}return s(n,t),i(n)}(p(HTMLElement));customElements.define("cloud-loading",y);var v=function(t){function n(){var t;return r(this,n),(t=o(this,n)).attachShadow({mode:"open"}),t.shadowRoot.innerHTML='\n            <style>\n                :host {\n                    display: block;\n                    width: 250px;\n                    height: 250px;\n                    position: relative;\n                    background: transparent;\n                }\n                \n                .bg-container {\n                    position: absolute;\n                    width: 100%;\n                    height: 100%;\n                    overflow: hidden;\n                }\n                \n                .bg-plane {\n                    position: absolute;\n                    font-size: 1.5rem;\n                    color: rgba(0, 0, 0, 0.2);\n                    animation: roam linear infinite;\n                    transform: translateX(-100%);\n                }\n                \n                .bg-plane:nth-child(1) {\n                    top: 20%;\n                    animation-duration: 4s;\n                    animation-delay: 0s;\n                }\n                \n                .bg-plane:nth-child(2) {\n                    top: 45%;\n                    font-size: 1.8rem;\n                    color: rgba(0, 0, 0, 0.15);\n                    animation-duration: 5s;\n                    animation-delay: 2s;\n                }\n                \n                .bg-plane:nth-child(3) {\n                    top: 70%;\n                    font-size: 1.3rem;\n                    color: rgba(0, 0, 0, 0.25);\n                    animation-duration: 3s;\n                    animation-delay: 1s;\n                }\n                \n                @keyframes roam {\n                    from {\n                        transform: translateX(-100%);\n                    }\n                    to {\n                        transform: translateX(250px);\n                    }\n                }\n            </style>\n            \n            <div class="bg-container">\n                <div class="bg-plane">✈</div>\n                <div class="bg-plane">✈</div>\n                <div class="bg-plane">✈</div>\n            </div>\n        ',t}return s(n,t),i(n,[{key:"connectedCallback",value:function(){this.style.display="block"}}])}(p(HTMLElement));customElements.define("plane-background",v);var b=function(t){function n(){var t;return r(this,n),(t=o(this,n)).attachShadow({mode:"open"}),t.shadowRoot.innerHTML='\n            <style>\n                :host {\n                    display: block;\n                    width: 100%;\n                    height: 100%;\n                    min-height: 500px;\n                }\n                #metrics-container {\n                    position: absolute;\n                    top: 100px;\n                    right: 20px;\n                    color: white;\n                    background: rgba(0, 0, 0, 0.6);\n                    padding: 20px;\n                    border-radius: 8px;\n                    max-width: 300px;\n                    backdrop-filter: blur(5px);\n                    display: none;\n                }\n                .metric-group {\n                    margin-bottom: 15px;\n                }\n                .metric-group h3 {\n                    margin: 0 0 8px 0;\n                    font-size: 14px;\n                    color: #88ccff;\n                }\n                .metric-item {\n                    margin: 5px 0;\n                    font-size: 13px;\n                }\n                #input-container {\n                    position: absolute;\n                    top: 20px;\n                    left: 50%;\n                    transform: translateX(-50%);\n                    z-index: 1000;\n                    display: flex;\n                    gap: 10px;\n                }\n                .location-input {\n                    padding: 8px 12px;\n                    border: 1px solid #ccc;\n                    border-radius: 4px;\n                    width: 200px;\n                }\n                #add-flight-btn {\n                    padding: 8px 16px;\n                    background: #4CAF50;\n                    color: white;\n                    border: none;\n                    border-radius: 4px;\n                    cursor: pointer;\n                }\n                #add-flight-btn:hover {\n                    background: #45a049;\n                }\n                #error-message {\n                    position: absolute;\n                    top: 60px;\n                    left: 50%;\n                    transform: translateX(-50%);\n                    color: red;\n                    background: rgba(255, 255, 255, 0.9);\n                    padding: 5px 10px;\n                    border-radius: 4px;\n                    display: none;\n                }\n                #globeViz {\n                    width: 100%;\n                    height: 100%;\n                }\n            </style>\n            <div id="input-container">\n                <input type="text" id="from-input" class="location-input" placeholder="From (e.g., \'New York\')">\n                <input type="text" id="to-input" class="location-input" placeholder="To (e.g., \'London\')">\n                <button id="add-flight-btn">Add Flight Path</button>\n            </div>\n            <div id="error-message"></div>\n            <div id="globeViz"></div>\n            <div id="metrics-container">\n                <div class="metric-group">\n                    <h3>Flight Information</h3>\n                    <div id="flight-duration" class="metric-item"></div>\n                    <div id="flight-distance" class="metric-item"></div>\n                    <div id="time-difference" class="metric-item"></div>\n                </div>\n                <div class="metric-group">\n                    <h3>Environmental Impact</h3>\n                    <div id="co2-emissions" class="metric-item"></div>\n                    <div id="fuel-consumption" class="metric-item"></div>\n                </div>\n                <div class="metric-group">\n                    <h3>Route Details</h3>\n                    <div id="avg-flights" class="metric-item"></div>\n                    <div id="typical-aircraft" class="metric-item"></div>\n                    <div id="cruising-altitude" class="metric-item"></div>\n                </div>\n            </div>\n        ',t.world=null,t.points=[],t.arcs=[],t.airplaneModel=null,t.AIRPLANE_SCALE=.5,t.AIRPLANE_ALTITUDE=.15,t}return s(n,t),i(n,[{key:"connectedCallback",value:(u=e(c().mark((function t(){return c().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,this.loadDependencies();case 2:this.initializeGlobe(),this.setupEventListeners();case 4:case"end":return t.stop()}}),t,this)}))),function(){return u.apply(this,arguments)})},{key:"loadDependencies",value:(d=e(c().mark((function t(){return c().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,Promise.all([this.loadScript("https://unpkg.com/three@0.139.2/build/three.min.js"),this.loadScript("https://unpkg.com/three@0.139.2/examples/js/loaders/GLTFLoader.js"),this.loadScript("https://unpkg.com/globe.gl@2.32.1/dist/globe.gl.min.js")]);case 2:case"end":return t.stop()}}),t,this)}))),function(){return d.apply(this,arguments)})},{key:"loadScript",value:function(t){return new Promise((function(n,e){var o=document.createElement("script");o.src=t,o.onload=n,o.onerror=e,document.head.appendChild(o)}))}},{key:"initializeGlobe",value:function(){var t=this;this.world=Globe().globeImageUrl("//unpkg.com/three-globe/example/img/earth-blue-marble.jpg").bumpImageUrl("//unpkg.com/three-globe/example/img/earth-topology.png").arcColor((function(){return"#ffff00"})).arcAltitude(0).arcStroke(1.5).arcsData([]).pointsData([]).pointColor((function(){return"#ff0000"})).pointAltitude(.1).pointRadius(.5)(this.shadowRoot.getElementById("globeViz")),this.world.camera().position.set(0,0,300),this.world.controls().enableZoom=!0,this.world.controls().enablePan=!0,this.world.controls().dampingFactor=.1,this.world.controls().minDistance=100,this.world.controls().maxDistance=500,this.world.controls().autoRotate=!0,this.world.controls().autoRotateSpeed=.1,(new THREE.GLTFLoader).load("Plane.glb",(function(n){t.airplaneModel=n.scene,t.airplaneModel.scale.set(t.AIRPLANE_SCALE,t.AIRPLANE_SCALE,t.AIRPLANE_SCALE)}),void 0,(function(t){return console.error("Error loading airplane model:",t)}))}},{key:"setupEventListeners",value:function(){var t=this;this.shadowRoot.getElementById("add-flight-btn").addEventListener("click",(function(){return t.addFlightPath()})),this.shadowRoot.getElementById("from-input").addEventListener("keypress",(function(n){"Enter"===n.key&&t.shadowRoot.getElementById("to-input").focus()})),this.shadowRoot.getElementById("to-input").addEventListener("keypress",(function(n){"Enter"===n.key&&t.addFlightPath()}))}},{key:"getCoordinates",value:(l=e(c().mark((function t(n){var e,o;return c().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.prev=0,t.next=3,fetch("https://geocoding-api.open-meteo.com/v1/search?name=".concat(encodeURIComponent(n),"&count=1&language=en&format=json"));case 3:return e=t.sent,t.next=6,e.json();case 6:if(!((o=t.sent).results&&o.results.length>0)){t.next=9;break}return t.abrupt("return",{lat:o.results[0].latitude,lng:o.results[0].longitude});case 9:throw new Error("Location not found");case 12:throw t.prev=12,t.t0=t.catch(0),console.error("Error in getCoordinates:",t.t0),t.t0;case 16:case"end":return t.stop()}}),t,null,[[0,12]])}))),function(t){return l.apply(this,arguments)})},{key:"calculateDistance",value:function(t,n,e,o){var r=(e-t)*Math.PI/180,i=(o-n)*Math.PI/180,a=Math.sin(r/2)*Math.sin(r/2)+Math.cos(t*Math.PI/180)*Math.cos(e*Math.PI/180)*Math.sin(i/2)*Math.sin(i/2);return 6371*(2*Math.atan2(Math.sqrt(a),Math.sqrt(1-a)))}},{key:"calculateFlightDuration",value:function(t){var n=t/850,e=Math.floor(n),o=Math.round(60*(n-e));return"".concat(e,"h ").concat(o,"m")}},{key:"calculateCO2",value:function(t){return Math.round(.09*t*300)}},{key:"addFlightPath",value:(a=e(c().mark((function t(){var n,e,o,r,i;return c().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(n=this.shadowRoot.getElementById("from-input").value.trim(),e=this.shadowRoot.getElementById("to-input").value.trim(),n&&e){t.next=5;break}return this.showError("Please enter both locations"),t.abrupt("return");case 5:return t.prev=5,t.next=8,this.getCoordinates(n);case 8:return o=t.sent,t.next=11,this.getCoordinates(e);case 11:r=t.sent,this.points=[o,r],this.world.pointsData(this.points),i={startLat:o.lat,startLng:o.lng,endLat:r.lat,endLng:r.lng},this.arcs=[i],this.world.arcsData(this.arcs),this.updateAirplanePosition(o,r),this.updateMetrics(o,r),this.shadowRoot.getElementById("from-input").value="",this.shadowRoot.getElementById("to-input").value="",this.shadowRoot.getElementById("error-message").style.display="none",t.next=28;break;case 24:t.prev=24,t.t0=t.catch(5),console.error("Error adding flight path:",t.t0),this.showError("Error finding locations. Please try again.");case 28:case"end":return t.stop()}}),t,this,[[5,24]])}))),function(){return a.apply(this,arguments)})},{key:"updateAirplanePosition",value:function(t,n){if(this.airplaneModel){var e=t.lng*Math.PI/180,o=t.lat*Math.PI/180,r=n.lng*Math.PI/180,i=n.lat*Math.PI/180,a=Math.cos(i)*Math.cos(r-e),s=Math.cos(i)*Math.sin(r-e),l=Math.atan2(Math.sin(o)+Math.sin(i),Math.sqrt((Math.cos(o)+a)*(Math.cos(o)+a)+s*s)),c=e+Math.atan2(s,Math.cos(o)+a),d=180*l/Math.PI,u=180*c/Math.PI,p=this.world.getCoords(d,u,this.AIRPLANE_ALTITUDE);this.world.getCoords(t.lat,t.lng,this.AIRPLANE_ALTITUDE);var h=this.world.getCoords(n.lat,n.lng,this.AIRPLANE_ALTITUDE),f=this.world.scene().getObjectByName("airplane");f&&this.world.scene().remove(f);var g=this.airplaneModel.clone();g.position.set(p.x,p.y,p.z),g.name="airplane";var m=(new THREE.Vector3).subVectors(h,p).normalize(),y=new THREE.Vector3(p.x,p.y,p.z).normalize(),v=(new THREE.Vector3).crossVectors(y,m).normalize(),b=(new THREE.Vector3).crossVectors(m,v).normalize(),x=new THREE.Matrix4;x.set(v.x,b.x,m.x,0,v.y,b.y,m.y,0,v.z,b.z,m.z,0,0,0,0,1),g.rotation.setFromRotationMatrix(x),this.world.scene().add(g)}}},{key:"updateMetrics",value:function(t,n){var e=this.calculateDistance(t.lat,t.lng,n.lat,n.lng),o=this.calculateFlightDuration(e),r=this.calculateCO2(e);this.shadowRoot.getElementById("flight-duration").textContent="Flight Duration: ".concat(o),this.shadowRoot.getElementById("flight-distance").textContent="Distance: ".concat(Math.round(e)," km (").concat(Math.round(.621371*e)," miles)"),this.shadowRoot.getElementById("time-difference").textContent="Time Zones Crossed: ".concat(Math.abs(Math.round(t.lng-n.lng)/15)),this.shadowRoot.getElementById("co2-emissions").textContent="CO₂ Emissions: ".concat(r," kg"),this.shadowRoot.getElementById("fuel-consumption").textContent="Fuel Consumption: ".concat(Math.round(.1*e)," gallons"),this.shadowRoot.getElementById("avg-flights").textContent="Average Flights: 3-5 daily",this.shadowRoot.getElementById("typical-aircraft").textContent="Common Aircraft: Boeing 777, Airbus A350",this.shadowRoot.getElementById("cruising-altitude").textContent="Cruising Altitude: 35,000 ft",this.shadowRoot.getElementById("metrics-container").style.display="block"}},{key:"showError",value:function(t){var n=this.shadowRoot.getElementById("error-message");n.textContent=t,n.style.display="block"}}]);var a,l,d,u}(p(HTMLElement));customElements.define("flight-map-globe",b),t.BurstButton=h,t.CloudLoading=y,t.FlightMapGlobe=b,t.OrbitLoading=g,t.OrbitLoadingCircle=m,t.PlaneBackground=v,t.ProgressButton=f}));