hart-estate-widget 0.0.51 → 0.0.52

package/build/assets/css/app.css

@@ -1 +1 @@
-*,*:before,*:after{box-sizing:border-box;-webkit-box-sizing:border-box;margin:0;padding:0}html,body{font-size:20px}.widget-application{--vh: 100vh;width:100%;height:calc(100*var(--vh));overflow:hidden;position:relative;z-index:1;background-color:#fff}.widget-application *,.widget-application *:before,.widget-application *:after{font-family:"Roboto Mono",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;outline:none;font-weight:700;text-decoration:none;color:#413e3e}.widget-application .widget-logo{position:absolute;left:45px;top:30px;z-index:3}@media only screen and (max-width: 545px){.widget-application .widget-logo{left:20px;top:20px}}.widget-application .widget-logo img{display:block;width:82px;height:82px;object-fit:contain;object-position:center}@media only screen and (max-width: 900px){.widget-application .widget-logo img{width:65px;height:65px}}.widget-application .widget-enter-fullscreen,.widget-application .widget-exit-fullscreen{position:absolute;right:45px;top:36px;z-index:3;ouline:none;border:none;box-shadow:none;background:rgba(0,0,0,0);cursor:pointer;padding:10px}@media only screen and (max-width: 545px){.widget-application .widget-enter-fullscreen,.widget-application .widget-exit-fullscreen{right:20px;top:20px}}.widget-application .widget-enter-fullscreen img,.widget-application .widget-exit-fullscreen img{display:block;width:50px;height:50px;object-fit:contain;object-position:center}@media only screen and (max-width: 900px){.widget-application .widget-enter-fullscreen img,.widget-application .widget-exit-fullscreen img{width:40px;height:40px}}.widget-application .widget-close{position:absolute;display:flex;align-items:center;justify-content:center;z-index:3;right:15px;top:15px;color:#000;background-color:#fac62d;padding:5px 15px;border-radius:10px;font-size:.8rem;border:none;cursor:pointer}.widget-application .widget-close:hover{box-shadow:1px 1px 10px rgba(0,0,0,.15)}.widget-application .widget-tab-buttons{position:absolute;z-index:3;right:44px;bottom:35px;display:flex;align-items:center;justify-content:flex-end}@media only screen and (max-width: 545px){.widget-application .widget-tab-buttons{right:20px;bottom:20px}}.widget-application .widget-tab-button{ouline:none;border:none;box-shadow:none;background:rgba(0,0,0,0);cursor:pointer;width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:#eaeaea;color:#413e3e;font-size:28px;line-height:120%;font-weight:bold;margin-left:40px}@media only screen and (max-width: 900px){.widget-application .widget-tab-button{width:60px;height:60px;font-size:24px;margin-left:20px}}@media only screen and (max-width: 545px){.widget-application .widget-tab-button{margin-left:10px}}.widget-application .widget-tab-button--active{background-color:#fac62d}.widget-application .widget-tab{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:60px 30px}@media(max-width: 630px){.widget-application .widget-tab{padding:60px 15px}}.widget-application .widget-tab__image{max-width:100%;max-height:100%;object-fit:contain;display:block}.widget-application .widget-tab__threesixty{width:100%;height:100%;touch-action:none;-webkit-touch-action:none}.widget-application .widget-tab__threesixty-start{ouline:none;border:none;box-shadow:none;background:rgba(0,0,0,0);cursor:pointer;position:absolute;left:50%;bottom:35px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;padding:0 30px 0 27px;background-color:#eaeaea;border-radius:38px;height:72px}@media only screen and (max-width: 900px){.widget-application .widget-tab__threesixty-start{height:60px;width:60px;padding:0;left:45px;transform:none}}@media only screen and (max-width: 545px){.widget-application .widget-tab__threesixty-start{left:20px;bottom:20px}}.widget-application .widget-tab__threesixty-start img{display:block;margin-right:20px;position:relative;top:2px}@media only screen and (max-width: 900px){.widget-application .widget-tab__threesixty-start img{width:30px;margin-right:0}}.widget-application .widget-tab__threesixty-start span{font-size:24px;font-weight:bold;color:#413e3e;text-transform:uppercase}@media only screen and (max-width: 900px){.widget-application .widget-tab__threesixty-start span{display:none}}.widget-application .widget-tab__threesixty-container{width:100% !important;height:100% !important;position:relative;background-image:none !important}.widget-application .widget-tab__threesixty-container img{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);max-width:100%;max-height:100%;width:600px;height:600px;object-fit:contain;opacity:0;user-select:none;-webkit-user-select:none;user-drag:none;-webkit-user-drag:none}.widget-application .widget-tab__threesixty-container img.active{opacity:1}.widget-application .widget-tab__threesixty--active .widget-tab__threesixty-container{cursor:move}.widget-application .widget-tab-menu{position:absolute;z-index:3;left:15px;top:15px;max-height:100%;overflow-y:auto;padding-bottom:30px}.widget-application .widget-tab-menu__wallpapers{display:flex;flex-wrap:wrap;align-items:flex-start;margin-top:10px;width:100%}.widget-application .widget-tab-menu__wallpapers img{width:30px;height:30px;display:block;object-fit:cover;cursor:pointer;margin-right:10px;margin-block-end:10px}.widget-application .widget-tab-menu ul{list-style-type:none}.widget-application .widget-tab-menu ul li{color:#000;background-color:#fac62d;padding:5px 15px;border-radius:10px;font-size:.7rem;border:none;cursor:pointer;margin-bottom:15px;width:200px;user-select:none;-webkit-user-select:none;user-drag:none;-webkit-user-drag:none}.widget-application .widget-tab-menu ul li label{display:flex;cursor:inherit;width:100%}.widget-application .widget-tab-menu ul li input[type=color]{cursor:pointer;margin-left:auto;width:50px;height:20px;border:0;border-radius:5px}.widget-application .widget-tab-menu ul li input[type=color]::-webkit-color-swatch-wrapper{display:none !important}.widget-application .widget-tab-menu ul li input[type=file]{display:none}.widget-application .widget-tab-menu ul li:nth-child(1){position:relative}.widget-application .widget-tab-menu ul li:nth-child(1)::after{--bar-width: 2px;content:"";width:20px;height:15px;display:block;background:repeating-linear-gradient(180deg, #000000, #000000 var(--bar-width), rgba(0, 0, 0, 0) var(--bar-width), rgba(0, 0, 0, 0) calc(var(--bar-width) * 3));position:absolute;right:10px;top:50%;transform:translateY(-50%)}.widget-application .widget-instructions{position:absolute;z-index:2;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-position:center;background-repeat:no-repeat;background-size:cover}.widget-application .widget-instructions__content{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background-color:rgba(234,234,234,.85);border-radius:20px;overflow:hidden;width:400px;max-width:calc(100% - 60px);padding:36px 30px 30px 30px;backdrop-filter:blur(5px);-moz-backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.widget-application .widget-instructions__steps{display:flex;align-items:flex-start;justify-content:center}.widget-application .widget-instructions__step{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;margin:0 15px}@media only screen and (max-width: 900px){.widget-application .widget-instructions__step{margin:0 10px}}.widget-application .widget-instructions__step img{display:block;width:52px;height:80px;object-fit:contain;object-position:center}.widget-application .widget-instructions__step p{color:#413e3e;font-size:20px;font-weight:bold;text-align:center;margin-top:10px;max-width:135px}@media only screen and (max-width: 900px){.widget-application .widget-instructions__step p{font-size:18px}}.widget-application .widget-instructions button{ouline:none;border:none;box-shadow:none;background:rgba(0,0,0,0);cursor:pointer;display:flex;align-items:center;justify-content:center;height:44px;padding:0 33px;border-radius:52px;background-color:#fac62d;color:#413e3e;font-size:24px;font-weight:bold;text-transform:uppercase;margin:25px auto 0 auto}.widget-application .widget-tab__panorama{width:100%;height:100%;position:absolute;left:0;top:0;z-index:2}.widget-application .widget-tab__panorama-overlay{width:100%;height:100%;overflow:hidden;background:#fff !important}.widget-application .widget-tab__panorama-controls{position:absolute;left:50%;bottom:35px;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:38px;background-color:rgba(0,0,0,.2);transform:translateX(-50%);backdrop-filter:blur(5px);-moz-backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}@media only screen and (max-width: 900px){.widget-application .widget-tab__panorama-controls{right:45px;left:unset;transform:none;bottom:120px}}@media only screen and (max-width: 545px){.widget-application .widget-tab__panorama-controls{right:20px;bottom:100px}}.widget-application .widget-tab__panorama-controls-button{ouline:none;border:none;box-shadow:none;background:rgba(0,0,0,0);cursor:pointer;width:55px;height:55px;border-radius:50%;background-color:#fff;display:flex;align-items:center;justify-content:center;margin-right:18px}@media only screen and (max-width: 900px){.widget-application .widget-tab__panorama-controls-button{width:40px;height:40px}}.widget-application .widget-tab__panorama-controls-button img{display:block}@media only screen and (max-width: 900px){.widget-application .widget-tab__panorama-controls-button img{transform:scale(0.7)}}.widget-application .widget-tab__panorama-controls-button:nth-last-child(1){margin-right:0}.widget-application .widget-tab__panorama-map{position:absolute;left:45px;bottom:35px;z-index:3;border-radius:10px;opacity:1;transition:opacity .5s;overflow:hidden}@media only screen and (max-width: 545px){.widget-application .widget-tab__panorama-map{left:20px;bottom:20px}}.widget-application .widget-tab__panorama-map--hidden{opacity:0;pointer-events:none}.widget-application .widget-tab__panorama-map img{width:195px;border-radius:inherit;display:block;user-select:none;-webkit-user-select:none;user-drag:none;-webkit-user-drag:none}@media only screen and (max-width: 900px){.widget-application .widget-tab__panorama-map img{width:150px}}.widget-application .widget-tab__panorama-map img:hover{box-shadow:1px 1px 10px rgba(0,0,0,.15)}.widget-application .widget-tab__panorama-map svg{position:absolute;left:0;top:0;width:195px;height:100%;z-index:3;display:block;border-radius:inherit}@media only screen and (max-width: 900px){.widget-application .widget-tab__panorama-map svg{width:150px}}.widget-application .widget-tab__panorama-map svg polygon{opacity:0;fill:#fac62d;cursor:pointer}.widget-application .widget-tab__panorama-map svg polygon:hover{opacity:.3}.widget-application .widget-tab__panorama-map__fov{position:absolute;left:0;top:0;width:0px;height:0px;border-radius:50%;border:30px solid rgba(0,0,0,0);border-top:40px solid rgba(250,198,45,.4);transform:translate(-50%, -50%) rotate(0rad);transform-origin:50% 50%;z-index:4;pointer-events:none}.widget-application .widget-tab__panorama-map__dot{position:absolute;left:0;top:0;transform:translate(-50%, -50%);width:5px;height:5px;background-color:#fac62d;border-radius:50%;z-index:5;visibility:hidden;pointer-events:none}.widget-application .widget-tab__panorama-map__dot--big{border:2px solid #fac62d;box-shadow:inset 0 0 0 2px #fff;width:15px;height:15px}.widget-application .widget-tab__panorama-map__dot--active{visibility:visible}.widget-loader{display:block;position:relative;width:80px;height:80px}.widget-loader--absolute{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.widget-loader--sm{transform:translate(-50%, -50%) scale(0.75)}.widget-loader div{position:absolute;top:33px;width:13px;height:13px;border-radius:50%;background:#fac62d;animation-timing-function:cubic-bezier(0, 1, 1, 0)}.widget-loader div:nth-child(1){left:8px;animation:widget-loader-1 .6s infinite}.widget-loader div:nth-child(2){left:8px;animation:widget-loader-2 .6s infinite}.widget-loader div:nth-child(3){left:32px;animation:widget-loader-2 .6s infinite}.widget-loader div:nth-child(4){left:56px;animation:widget-loader-3 .6s infinite}@keyframes widget-loader-1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes widget-loader-3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes widget-loader-2{0%{transform:translate(0, 0)}100%{transform:translate(24px, 0)}}.widget-application .widget-tab__model{width:100%;height:100%;position:absolute;left:0;top:0;z-index:2}.widget-application .widget-tab__model-scene{width:100%;height:100%;display:block}.widget-application .widget-tab__model-joystick{position:absolute;left:100px;bottom:100px;opacity:0;pointer-events:none}@media only screen and (max-width: 545px){.widget-application .widget-tab__model-joystick{left:50%;transform:translateX(-50%)}}.widget-application .widget-tab__model-joystick--active{opacity:1;pointer-events:unset}/*# sourceMappingURL=app.css.map */
+*,*:before,*:after{box-sizing:border-box;-webkit-box-sizing:border-box;margin:0;padding:0}html,body{font-size:20px}.widget-application{--vh: 100vh;width:100%;height:calc(100*var(--vh));overflow:hidden;position:relative;z-index:1;background-color:#fff}.widget-application *,.widget-application *:before,.widget-application *:after{font-family:"Roboto Mono",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;outline:none;font-weight:700;text-decoration:none;color:#413e3e}.widget-application .widget-logo{position:absolute;left:45px;top:30px;z-index:3}@media only screen and (max-width: 900px){.widget-application .widget-logo{left:20px;top:20px}}.widget-application .widget-logo img{display:block;width:82px;height:82px;object-fit:contain;object-position:center}@media only screen and (max-width: 900px){.widget-application .widget-logo img{width:65px;height:65px}}.widget-application .widget-enter-fullscreen,.widget-application .widget-exit-fullscreen{position:absolute;right:45px;top:36px;z-index:3;ouline:none;border:none;box-shadow:none;background:rgba(0,0,0,0);cursor:pointer;padding:10px}@media only screen and (max-width: 900px){.widget-application .widget-enter-fullscreen,.widget-application .widget-exit-fullscreen{right:20px;top:20px}}.widget-application .widget-enter-fullscreen img,.widget-application .widget-exit-fullscreen img{display:block;width:50px;height:50px;object-fit:contain;object-position:center}@media only screen and (max-width: 900px){.widget-application .widget-enter-fullscreen img,.widget-application .widget-exit-fullscreen img{width:40px;height:40px}}.widget-application .widget-close{position:absolute;display:flex;align-items:center;justify-content:center;z-index:3;right:15px;top:15px;color:#000;background-color:#fac62d;padding:5px 15px;border-radius:10px;font-size:.8rem;border:none;cursor:pointer}.widget-application .widget-close:hover{box-shadow:1px 1px 10px rgba(0,0,0,.15)}.widget-application .widget-tab-buttons{position:absolute;z-index:3;right:44px;bottom:35px;display:flex;align-items:center;justify-content:flex-end}@media only screen and (max-width: 900px){.widget-application .widget-tab-buttons{flex-direction:column;right:20px;bottom:20px}}.widget-application .widget-tab-button{ouline:none;border:none;box-shadow:none;background:rgba(0,0,0,0);cursor:pointer;width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:#eaeaea;color:#413e3e;font-size:28px;line-height:120%;font-weight:bold;margin-left:40px}@media only screen and (max-width: 900px){.widget-application .widget-tab-button{width:60px;height:60px;font-size:24px;margin-left:0px;margin-top:20px}}@media only screen and (max-width: 545px){.widget-application .widget-tab-button{margin-top:10px}}.widget-application .widget-tab-button--active{background-color:#fac62d}.widget-application .widget-tab{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:60px 30px}@media(max-width: 630px){.widget-application .widget-tab{padding:60px 15px}}.widget-application .widget-tab__image{max-width:100%;max-height:100%;object-fit:contain;display:block}.widget-application .widget-tab__threesixty{width:100%;height:100%;touch-action:none;-webkit-touch-action:none}.widget-application .widget-tab__threesixty-start{ouline:none;border:none;box-shadow:none;background:rgba(0,0,0,0);cursor:pointer;position:absolute;left:50%;bottom:35px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;padding:0 30px 0 27px;background-color:#eaeaea;border-radius:38px;height:72px}@media only screen and (max-width: 900px){.widget-application .widget-tab__threesixty-start{height:60px;width:60px;padding:0;left:20px;bottom:20px;transform:none}}.widget-application .widget-tab__threesixty-start img{display:block;margin-right:20px;position:relative;top:2px}@media only screen and (max-width: 900px){.widget-application .widget-tab__threesixty-start img{width:30px;margin-right:0}}.widget-application .widget-tab__threesixty-start span{font-size:24px;font-weight:bold;color:#413e3e;text-transform:uppercase}@media only screen and (max-width: 900px){.widget-application .widget-tab__threesixty-start span{display:none}}.widget-application .widget-tab__threesixty-container{width:100% !important;height:100% !important;position:relative;background-image:none !important}.widget-application .widget-tab__threesixty-container img{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);max-width:100%;max-height:100%;width:600px;height:600px;object-fit:contain;opacity:0;pointer-events:none;user-select:none;-webkit-user-select:none;user-drag:none;-webkit-user-drag:none}.widget-application .widget-tab__threesixty-container img.active{opacity:1}.widget-application .widget-tab__threesixty--active .widget-tab__threesixty-container{cursor:move}.widget-application .widget-tab-menu{position:absolute;z-index:3;left:15px;top:15px;max-height:100%;overflow-y:auto;padding-bottom:30px}.widget-application .widget-tab-menu__wallpapers{display:flex;flex-wrap:wrap;align-items:flex-start;margin-top:10px;width:100%}.widget-application .widget-tab-menu__wallpapers img{width:30px;height:30px;display:block;object-fit:cover;cursor:pointer;margin-right:10px;margin-block-end:10px}.widget-application .widget-tab-menu ul{list-style-type:none}.widget-application .widget-tab-menu ul li{color:#000;background-color:#fac62d;padding:5px 15px;border-radius:10px;font-size:.7rem;border:none;cursor:pointer;margin-bottom:15px;width:200px;user-select:none;-webkit-user-select:none;user-drag:none;-webkit-user-drag:none}.widget-application .widget-tab-menu ul li label{display:flex;cursor:inherit;width:100%}.widget-application .widget-tab-menu ul li input[type=color]{cursor:pointer;margin-left:auto;width:50px;height:20px;border:0;border-radius:5px}.widget-application .widget-tab-menu ul li input[type=color]::-webkit-color-swatch-wrapper{display:none !important}.widget-application .widget-tab-menu ul li input[type=file]{display:none}.widget-application .widget-tab-menu ul li:nth-child(1){position:relative}.widget-application .widget-tab-menu ul li:nth-child(1)::after{--bar-width: 2px;content:"";width:20px;height:15px;display:block;background:repeating-linear-gradient(180deg, #000000, #000000 var(--bar-width), rgba(0, 0, 0, 0) var(--bar-width), rgba(0, 0, 0, 0) calc(var(--bar-width) * 3));position:absolute;right:10px;top:50%;transform:translateY(-50%)}.widget-application .widget-instructions{position:absolute;z-index:2;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-position:center;background-repeat:no-repeat;background-size:cover}.widget-application .widget-instructions__content{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background-color:rgba(234,234,234,.85);border-radius:20px;overflow:hidden;width:400px;max-width:calc(100% - 60px);padding:36px 30px 30px 30px;backdrop-filter:blur(5px);-moz-backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.widget-application .widget-instructions__steps{display:flex;align-items:flex-start;justify-content:center}.widget-application .widget-instructions__step{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;margin:0 15px}@media only screen and (max-width: 900px){.widget-application .widget-instructions__step{margin:0 10px}}.widget-application .widget-instructions__step img{display:block;width:52px;height:80px;object-fit:contain;object-position:center}.widget-application .widget-instructions__step p{color:#413e3e;font-size:20px;font-weight:bold;text-align:center;margin-top:10px;max-width:135px}@media only screen and (max-width: 900px){.widget-application .widget-instructions__step p{font-size:18px}}.widget-application .widget-instructions button{ouline:none;border:none;box-shadow:none;background:rgba(0,0,0,0);cursor:pointer;display:flex;align-items:center;justify-content:center;height:44px;padding:0 33px;border-radius:52px;background-color:#fac62d;color:#413e3e;font-size:24px;font-weight:bold;text-transform:uppercase;margin:25px auto 0 auto}.widget-application .widget-tab__panorama{width:100%;height:100%;position:absolute;left:0;top:0;z-index:2}.widget-application .widget-tab__panorama-overlay{width:100%;height:100%;overflow:hidden;background:#fff !important}.widget-application .widget-tab__panorama-overlay *{display:none !important}.widget-application .widget-tab__panorama-overlay canvas{display:block !important}.widget-application .widget-tab__panorama-controls{position:absolute;z-index:2;left:50%;bottom:35px;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:38px;background-color:rgba(0,0,0,.2);transform:translateX(-50%);backdrop-filter:blur(5px);-moz-backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}@media only screen and (max-width: 900px){.widget-application .widget-tab__panorama-controls{bottom:20px}}.widget-application .widget-tab__panorama-controls-button{ouline:none;border:none;box-shadow:none;background:rgba(0,0,0,0);cursor:pointer;width:55px;height:55px;border-radius:50%;background-color:#fff;display:flex;align-items:center;justify-content:center;margin-right:18px}@media only screen and (max-width: 900px){.widget-application .widget-tab__panorama-controls-button{width:40px;height:40px}}@media only screen and (max-width: 545px){.widget-application .widget-tab__panorama-controls-button{margin-right:13px}}.widget-application .widget-tab__panorama-controls-button img{display:block}@media only screen and (max-width: 900px){.widget-application .widget-tab__panorama-controls-button img{transform:scale(0.7)}}.widget-application .widget-tab__panorama-controls-button:nth-last-child(1){margin-right:0}.widget-application .widget-tab__panorama-map{position:absolute;left:45px;bottom:35px;z-index:3;border-radius:10px;border:8px solid #fff;background-color:#fff;opacity:1;transition:opacity .5s}@media only screen and (max-width: 900px){.widget-application .widget-tab__panorama-map{left:20px;bottom:20px;transform:scale(0.6);transform-origin:0% 100%}.widget-application .widget-tab__panorama-map svg polygon{opacity:0}.widget-application .widget-tab__panorama-map--scaled{transform:scale(1) !important}.widget-application .widget-tab__panorama-map--scaled svg polygon:active{opacity:.3 !important}}@media only screen and (max-width: 545px){.widget-application .widget-tab__panorama-map{transform:scale(0.4)}}.widget-application .widget-tab__panorama-map--hidden{opacity:0;pointer-events:none}.widget-application .widget-tab__panorama-map img{width:195px;border-radius:none;display:block;user-select:none;-webkit-user-select:none;user-drag:none;-webkit-user-drag:none}.widget-application .widget-tab__panorama-map img:hover{box-shadow:1px 1px 10px rgba(0,0,0,.15)}.widget-application .widget-tab__panorama-map svg{position:absolute;left:0;top:0;width:195px;height:100%;z-index:3;display:block;border-radius:inherit}.widget-application .widget-tab__panorama-map svg polygon{opacity:0;fill:#fac62d;cursor:pointer}.widget-application .widget-tab__panorama-map svg polygon:hover{opacity:.3}@media only screen and (max-width: 900px){.widget-application .widget-tab__panorama-map svg polygon:hover{opacity:0}}.widget-application .widget-tab__panorama-map__fov{position:absolute;left:0;top:0;width:0px;height:0px;border-radius:50%;border:30px solid rgba(0,0,0,0);border-top:40px solid rgba(250,198,45,.4);transform:translate(-50%, -50%) rotate(0rad);transform-origin:50% 50%;z-index:4;pointer-events:none}.widget-application .widget-tab__panorama-map__fov::before{content:"";position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%, -50%) translateY(-5px);width:15px;height:15px;background-color:#fac62d;border-radius:50%;border:2px solid #fac62d;box-shadow:inset 0 0 0 2px #fff}.widget-loader{display:block;position:relative;width:80px;height:80px}.widget-loader--absolute{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.widget-loader--sm{transform:translate(-50%, -50%) scale(0.75)}.widget-loader div{position:absolute;top:33px;width:13px;height:13px;border-radius:50%;background:#fac62d;animation-timing-function:cubic-bezier(0, 1, 1, 0)}.widget-loader div:nth-child(1){left:8px;animation:widget-loader-1 .6s infinite}.widget-loader div:nth-child(2){left:8px;animation:widget-loader-2 .6s infinite}.widget-loader div:nth-child(3){left:32px;animation:widget-loader-2 .6s infinite}.widget-loader div:nth-child(4){left:56px;animation:widget-loader-3 .6s infinite}@keyframes widget-loader-1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes widget-loader-3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes widget-loader-2{0%{transform:translate(0, 0)}100%{transform:translate(24px, 0)}}.widget-application .widget-tab__model{width:100%;height:100%;position:absolute;left:0;top:0;z-index:2}.widget-application .widget-tab__model-scene{width:100%;height:100%;display:block}.widget-application .widget-tab__model-joystick{position:absolute;left:100px;bottom:100px;opacity:0;pointer-events:none}@media only screen and (max-width: 545px){.widget-application .widget-tab__model-joystick{left:50%;transform:translateX(-50%)}}.widget-application .widget-tab__model-joystick--active{opacity:1;pointer-events:unset}/*# sourceMappingURL=app.css.map */

package/build/assets/css/app.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/assets/sass/index.sass","../../../src/assets/sass/vars.sass","../../../src/assets/sass/mixin.sass","../../../src/assets/sass/components/tabs.sass","../../../src/assets/sass/components/instructions.sass","../../../src/assets/sass/components/panorama.sass","../../../src/assets/sass/components/loader.sass","../../../src/assets/sass/components/model.sass"],"names":[],"mappings":"AAGA,mBACE,sBACA,8BACA,SACA,UAEF,UACE,eAEF,oBACE,YAEA,WACA,2BACA,gBACA,kBACA,UACA,iBCfM,KDiBN,+EACE,qCACA,mCACA,kCACA,aACA,gBACA,qBACA,MClBQ,QDoBV,iCACE,kBACA,UACA,SACA,UACA,0CALF,iCAMI,UACA,UACF,qCACE,cACA,WACA,YACA,mBACA,uBACA,0CANF,qCAOI,WACA,aAEN,yFAEE,kBACA,WACA,SACA,UErDF,YACA,YACA,gBACA,yBACA,eFmDE,aACA,0CARF,yFASI,WACA,UACF,iGACE,cACA,WACA,YACA,mBACA,uBACA,0CANF,iGAOI,WACA,aAEN,kCACE,kBACA,aACA,mBACA,uBACA,UACA,WACA,SACA,MCxEI,KDyEJ,iBCtEQ,QDuER,iBACA,mBACA,gBACA,YACA,eACA,wCACE,wCGlFJ,wCACE,kBACA,UACA,WACA,YACA,aACA,mBACA,yBACA,0CARF,wCASI,WACA,aACJ,uCDdA,YACA,YACA,gBACA,yBACA,eCYE,WACA,YACA,kBACA,aACA,mBACA,uBACA,iBFhBG,QEiBH,MFbQ,QEcR,eACA,iBACA,iBACA,iBACA,0CAdF,uCAeI,WACA,YACA,eACA,kBACF,0CAnBF,uCAoBI,kBACF,+CACE,iBF5BM,QE8BV,gCACE,WACA,YACA,aACA,mBACA,uBACA,kBACA,yBAPF,gCAQI,mBACF,uCACE,eACA,gBACA,mBACA,cACF,4CACE,WACA,YACA,kBACA,0BACA,kDDzDJ,YACA,YACA,gBACA,yBACA,eCuDM,kBACA,SACA,YACA,2BACA,aACA,mBACA,uBACA,sBACA,iBF7DD,QE8DC,mBACA,YACA,0CAbF,kDAcI,YACA,WACA,UACA,UACA,gBACF,0CAnBF,kDAoBI,UACA,aACF,sDACE,cACA,kBACA,kBACA,QACA,0CALF,sDAMI,WACA,gBACJ,uDACE,eACA,iBACA,MFhFE,QEiFF,yBACA,0CALF,uDAMI,cACN,sDACE,sBACA,uBACA,kBACA,iCACA,0DACE,kBACA,SACA,QACA,gCACA,eACA,gBACA,YACA,aACA,mBACA,UFhGR,iBACA,yBACA,eACA,uBE+FQ,iEACE,UAEJ,sFACE,YAEN,qCACE,kBACA,UACA,UACA,SACA,gBACA,gBACA,oBACA,iDACE,aACA,eACA,uBACA,gBACA,WACA,qDACE,WACA,YACA,cACA,iBACA,eACA,kBACA,sBACJ,wCACE,qBACA,2CACE,MFzIF,KE0IE,iBFvIE,QEwIF,iBACA,mBACA,gBACA,YACA,eACA,mBACA,YFzIR,iBACA,yBACA,eACA,uBEwIQ,iDACE,aACA,eACA,WAEA,6DACE,eACA,iBACA,WACA,YACA,SACA,kBACA,2FACE,wBACJ,4DACE,aACJ,wDACE,kBACA,+DACE,iBACA,WACA,WACA,YACA,cACA,gKACA,kBACA,WACA,QACA,2BCjLZ,yCACE,kBACA,UACA,OACA,MACA,WACA,YACA,aACA,mBACA,uBACA,2BACA,4BACA,sBAEA,kDACE,aACA,sBACA,mBACA,2BACA,uCACA,mBACA,gBACA,YACA,4BACA,4BFpBJ,0BACA,+BACA,kCEoBE,gDACE,aACA,uBACA,uBACF,+CACE,aACA,sBACA,mBACA,2BACA,cACA,0CANF,+CAOI,eACF,mDACE,cACA,WACA,YACA,mBACA,uBACF,iDACE,MHtCI,QGuCJ,eACA,iBACA,kBACA,gBACA,gBACA,0CAPF,iDAQI,gBACN,gDFxDF,YACA,YACA,gBACA,yBACA,eEsDI,aACA,mBACA,uBACA,YACA,eACA,mBACA,iBHxDM,QGyDN,MHvDM,QGwDN,eACA,iBACA,yBACA,wBCjEF,0CACE,WACA,YACA,kBACA,OACA,MACA,UACA,kDACE,WACA,YACA,gBACA,2BACF,mDACE,kBACA,SACA,YACA,aACA,mBACA,uBACA,YACA,mBACA,gCACA,2BHnBN,0BACA,+BACA,kCGmBM,0CAZF,mDAaI,WACA,WACA,eACA,cACF,0CAjBF,mDAkBI,WACA,cACF,0DHpCN,YACA,YACA,gBACA,yBACA,eGkCQ,WACA,YACA,kBACA,iBJrCF,KIsCE,aACA,mBACA,uBACA,kBACA,0CAVF,0DAWI,WACA,aACF,8DACE,cACA,0CAFF,8DAGI,sBACJ,4EACE,eACN,8CACE,kBACA,UACA,YACA,UACA,mBACA,UACA,uBACA,gBACA,0CATF,8CAUI,UACA,aACF,sDACE,UACA,oBACF,kDACE,YACA,sBACA,cJ5DR,iBACA,yBACA,eACA,uBI2DQ,0CALF,kDAMI,aACF,wDACE,wCACJ,kDACE,kBACA,OACA,MACA,YACA,YACA,UACA,cACA,sBACA,0CATF,kDAUI,aACF,0DACE,UACA,KJpFA,QIqFA,eACA,gEACE,WACN,mDACE,kBACA,OACA,MACA,UACA,WACA,kBACA,gCACA,0CACA,6CACA,yBACA,UACA,oBACF,mDACE,kBACA,OACA,MACA,gCACA,UACA,WACA,iBJ5GE,QI6GF,kBACA,UACA,kBACA,oBACA,wDACE,yBACA,gCACA,WACA,YACF,2DAGE,mBChIZ,eACE,cACA,kBACA,WACA,YACA,yBACE,kBACA,SACA,QACA,gCACF,mBACE,4CACF,mBACE,kBACA,SACA,WACA,YACA,kBACA,WLXQ,QKYR,mDACA,gCACE,SACA,uCACF,gCACE,SACA,uCACF,gCACE,UACA,uCACF,gCACE,UACA,uCAEN,2BACE,GACE,mBACF,KACE,oBAEJ,2BACE,GACE,mBACF,KACE,oBAEJ,2BACE,GACE,0BAEF,KACE,8BChDA,uCACE,WACA,YACA,kBACA,OACA,MACA,UACA,6CACE,WACA,YACA,cACF,gDACE,kBACA,WACA,aACA,UACA,oBACA,0CANF,gDAOI,SACA,4BACF,wDACE,UACA","file":"app.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/assets/sass/index.sass","../../../src/assets/sass/vars.sass","../../../src/assets/sass/mixin.sass","../../../src/assets/sass/components/tabs.sass","../../../src/assets/sass/components/instructions.sass","../../../src/assets/sass/components/panorama.sass","../../../src/assets/sass/components/loader.sass","../../../src/assets/sass/components/model.sass"],"names":[],"mappings":"AAGA,mBACE,sBACA,8BACA,SACA,UAEF,UACE,eAEF,oBACE,YAEA,WACA,2BACA,gBACA,kBACA,UACA,iBCfM,KDiBN,+EACE,qCACA,mCACA,kCACA,aACA,gBACA,qBACA,MClBQ,QDoBV,iCACE,kBACA,UACA,SACA,UACA,0CALF,iCAMI,UACA,UACF,qCACE,cACA,WACA,YACA,mBACA,uBACA,0CANF,qCAOI,WACA,aAEN,yFAEE,kBACA,WACA,SACA,UErDF,YACA,YACA,gBACA,yBACA,eFmDE,aACA,0CARF,yFASI,WACA,UACF,iGACE,cACA,WACA,YACA,mBACA,uBACA,0CANF,iGAOI,WACA,aAEN,kCACE,kBACA,aACA,mBACA,uBACA,UACA,WACA,SACA,MCxEI,KDyEJ,iBCtEQ,QDuER,iBACA,mBACA,gBACA,YACA,eACA,wCACE,wCGlFJ,wCACE,kBACA,UACA,WACA,YACA,aACA,mBACA,yBACA,0CARF,wCASI,sBACA,WACA,aACJ,uCDfA,YACA,YACA,gBACA,yBACA,eCaE,WACA,YACA,kBACA,aACA,mBACA,uBACA,iBFjBG,QEkBH,MFdQ,QEeR,eACA,iBACA,iBACA,iBACA,0CAdF,uCAeI,WACA,YACA,eACA,gBACA,iBACF,0CApBF,uCAqBI,iBACF,+CACE,iBF9BM,QEgCV,gCACE,WACA,YACA,aACA,mBACA,uBACA,kBACA,yBAPF,gCAQI,mBACF,uCACE,eACA,gBACA,mBACA,cACF,4CACE,WACA,YACA,kBACA,0BACA,kDD3DJ,YACA,YACA,gBACA,yBACA,eCyDM,kBACA,SACA,YACA,2BACA,aACA,mBACA,uBACA,sBACA,iBF/DD,QEgEC,mBACA,YACA,0CAbF,kDAcI,YACA,WACA,UACA,UACA,YACA,gBACF,sDACE,cACA,kBACA,kBACA,QACA,0CALF,sDAMI,WACA,gBACJ,uDACE,eACA,iBACA,MFhFE,QEiFF,yBACA,0CALF,uDAMI,cACN,sDACE,sBACA,uBACA,kBACA,iCACA,0DACE,kBACA,SACA,QACA,gCACA,eACA,gBACA,YACA,aACA,mBACA,UACA,oBFjGR,iBACA,yBACA,eACA,uBEgGQ,iEACE,UAEJ,sFACE,YAEN,qCACE,kBACA,UACA,UACA,SACA,gBACA,gBACA,oBACA,iDACE,aACA,eACA,uBACA,gBACA,WACA,qDACE,WACA,YACA,cACA,iBACA,eACA,kBACA,sBACJ,wCACE,qBACA,2CACE,MF1IF,KE2IE,iBFxIE,QEyIF,iBACA,mBACA,gBACA,YACA,eACA,mBACA,YF1IR,iBACA,yBACA,eACA,uBEyIQ,iDACE,aACA,eACA,WAEA,6DACE,eACA,iBACA,WACA,YACA,SACA,kBACA,2FACE,wBACJ,4DACE,aACJ,wDACE,kBACA,+DACE,iBACA,WACA,WACA,YACA,cACA,gKACA,kBACA,WACA,QACA,2BClLZ,yCACE,kBACA,UACA,OACA,MACA,WACA,YACA,aACA,mBACA,uBACA,2BACA,4BACA,sBAEA,kDACE,aACA,sBACA,mBACA,2BACA,uCACA,mBACA,gBACA,YACA,4BACA,4BFpBJ,0BACA,+BACA,kCEoBE,gDACE,aACA,uBACA,uBACF,+CACE,aACA,sBACA,mBACA,2BACA,cACA,0CANF,+CAOI,eACF,mDACE,cACA,WACA,YACA,mBACA,uBACF,iDACE,MHtCI,QGuCJ,eACA,iBACA,kBACA,gBACA,gBACA,0CAPF,iDAQI,gBACN,gDFxDF,YACA,YACA,gBACA,yBACA,eEsDI,aACA,mBACA,uBACA,YACA,eACA,mBACA,iBHxDM,QGyDN,MHvDM,QGwDN,eACA,iBACA,yBACA,wBCjEF,0CACE,WACA,YACA,kBACA,OACA,MACA,UACA,kDACE,WACA,YACA,gBACA,2BACA,oDACE,wBACF,yDACE,yBACJ,mDACE,kBACA,UACA,SACA,YACA,aACA,mBACA,uBACA,YACA,mBACA,gCACA,2BHxBN,0BACA,+BACA,kCGwBM,0CAbF,mDAcI,aACF,0DHnCN,YACA,YACA,gBACA,yBACA,eGiCQ,WACA,YACA,kBACA,iBJpCF,KIqCE,aACA,mBACA,uBACA,kBACA,0CAVF,0DAWI,WACA,aACF,0CAbF,0DAcI,mBACF,8DACE,cACA,0CAFF,8DAGI,sBACJ,4EACE,eACN,8CACE,kBACA,UACA,YACA,UACA,mBACA,sBACA,iBJ3DA,KI4DA,UACA,uBACA,0CAVF,8CAWI,UACA,YACA,qBACA,yBAEE,0DACE,UACJ,sDACE,8BAGI,yEACE,uBACV,0CAxBF,8CAyBI,sBACF,sDACE,UACA,oBACF,kDACE,YACA,mBACA,cJ3ER,iBACA,yBACA,eACA,uBI0EQ,wDACE,wCACJ,kDACE,kBACA,OACA,MACA,YACA,YACA,UACA,cACA,sBACA,0DACE,UACA,KJ/FA,QIgGA,eACA,gEACE,WACA,0CAFF,gEAGI,WACR,mDACE,kBACA,OACA,MACA,UACA,WACA,kBACA,gCACA,0CACA,6CACA,yBACA,UACA,oBACA,2DACE,WACA,kBACA,UACA,SACA,QACA,iDACA,WACA,YACA,iBJ3HA,QI4HA,kBACA,yBACA,gCCrIZ,eACE,cACA,kBACA,WACA,YACA,yBACE,kBACA,SACA,QACA,gCACF,mBACE,4CACF,mBACE,kBACA,SACA,WACA,YACA,kBACA,WLXQ,QKYR,mDACA,gCACE,SACA,uCACF,gCACE,SACA,uCACF,gCACE,UACA,uCACF,gCACE,UACA,uCAEN,2BACE,GACE,mBACF,KACE,oBAEJ,2BACE,GACE,mBACF,KACE,oBAEJ,2BACE,GACE,0BAEF,KACE,8BChDA,uCACE,WACA,YACA,kBACA,OACA,MACA,UACA,6CACE,WACA,YACA,cACF,gDACE,kBACA,WACA,aACA,UACA,oBACA,0CANF,gDAOI,SACA,4BACF,wDACE,UACA","file":"app.css"}

package/build/assets/sass/components/panorama.sass

@@ -15,8 +15,13 @@
         height: 100%
         overflow: hidden
         background: $white !important
+        *
+          display: none !important
+        canvas
+          display: block !important
       &-controls
         position: absolute
+        z-index: 2
         left: 50%
         bottom: 35px
         display: flex
@@ -28,13 +33,7 @@
         transform: translateX(-50%)
         @include blurBackground(5px)
         @media #{$tablet}
-          right: 45px
-          left: unset
-          transform: none
-          bottom: 120px
-        @media #{$mobile}
-          right: 20px
-          bottom: 100px
+          bottom: 20px
         &-button
           @include customButton
           width: 55px
@@ -48,6 +47,8 @@
           @media #{$tablet}
             width: 40px
             height: 40px
+          @media #{$mobile}
+            margin-right: 13px
           img
             display: block
             @media #{$tablet}
@@ -60,22 +61,34 @@
         bottom: 35px
         z-index: 3
         border-radius: 10px
+        border: 8px solid $white
+        background-color: $white
         opacity: 1
         transition: opacity .5s
-        overflow: hidden
-        @media #{$mobile}
+        @media #{$tablet}
           left: 20px
           bottom: 20px
+          transform: scale(.6)
+          transform-origin: 0% 100%
+          svg
+            polygon
+              opacity: 0
+          &--scaled
+            transform: scale(1) !important
+            svg
+              polygon
+                &:active
+                  opacity: .3 !important
+        @media #{$mobile}
+          transform: scale(.4)
         &--hidden
           opacity: 0
           pointer-events: none
         img
           width: 195px
-          border-radius: inherit
+          border-radius: none
           display: block
           @include noSelect
-          @media #{$tablet}
-            width: 150px
           &:hover
             box-shadow: 1px 1px 10px rgba(0,0,0,0.15)
         svg
@@ -87,14 +100,14 @@
           z-index: 3
           display: block
           border-radius: inherit
-          @media #{$tablet}
-            width: 150px
           polygon
             opacity: 0
             fill: $mainColor
             cursor: pointer
             &:hover
               opacity: .3
+              @media #{$tablet}
+                opacity: 0
         &__fov
           position: absolute
           left: 0
@@ -108,24 +121,16 @@
           transform-origin: 50% 50%
           z-index: 4
           pointer-events: none
-        &__dot
-          position: absolute
-          left: 0
-          top: 0
-          transform: translate(-50%, -50%)
-          width: 5px
-          height: 5px
-          background-color: $mainColor
-          border-radius: 50%
-          z-index: 5
-          visibility: hidden
-          pointer-events: none
-          &--big
-            border: 2px solid $mainColor
-            box-shadow: inset 0 0 0 2px #ffffff
+          &::before
+            content: ''
+            position: absolute
+            z-index: 5
+            left: 50%
+            top: 50%
+            transform: translate(-50%, -50%) translateY(-5px)
             width: 15px
             height: 15px
-          &--active
-            // background-color: red
-            // border: 2px solid red
-            visibility: visible
+            background-color: $mainColor
+            border-radius: 50%
+            border: 2px solid $mainColor
+            box-shadow: inset 0 0 0 2px #ffffff

package/build/assets/sass/components/tabs.sass

@@ -10,7 +10,8 @@
     display: flex
     align-items: center
     justify-content: flex-end
-    @media #{$mobile}
+    @media #{$tablet}
+      flex-direction: column
       right: 20px
       bottom: 20px
   .widget-tab-button
@@ -31,9 +32,10 @@
       width: 60px
       height: 60px
       font-size: 24px
-      margin-left: 20px
+      margin-left: 0px
+      margin-top: 20px
     @media #{$mobile}
-      margin-left: 10px
+      margin-top: 10px
     &--active
       background-color: $mainColor
 
@@ -73,11 +75,9 @@
           height: 60px
           width: 60px
           padding: 0
-          left: 45px
-          transform: none
-        @media #{$mobile}
           left: 20px
           bottom: 20px
+          transform: none
         img
           display: block
           margin-right: 20px
@@ -109,6 +109,7 @@
           height: 600px
           object-fit: contain
           opacity: 0
+          pointer-events: none
           @include noSelect
           &.active
             opacity: 1

package/build/assets/sass/index.sass

@@ -34,7 +34,7 @@ html, body
     left: 45px
     top: 30px
     z-index: 3
-    @media #{$mobile}
+    @media #{$tablet}
       left: 20px
       top: 20px
     img
@@ -55,7 +55,7 @@ html, body
     z-index: 3
     @include customButton
     padding: 10px
-    @media #{$mobile}
+    @media #{$tablet}
       right: 20px
       top: 20px
     img

package/build/components/PanoramaTab.js

@@ -19,10 +19,14 @@ var _threeDeviceOrientation = _interopRequireDefault(require("three-device-orien
 
 var _geometric = require("geometric");
 
-var _deviceOrientationStatus = require("../enums/deviceOrientationStatus");
+var _deviceOrientationStatuses = require("../enums/deviceOrientationStatuses");
+
+var _deviceWidth = require("../enums/deviceWidth");
 
 var _imageExtentions = require("../enums/imageExtentions");
 
+var _helpers = require("../utils/helpers");
+
 var _panoramaHelpers = require("../utils/panoramaHelpers");
 
 var _Loader = _interopRequireDefault(require("./Loader"));
@@ -242,58 +246,74 @@ var PanoramaTab = function PanoramaTab(_ref4) {
       images = _ref4.images,
       disabled = _ref4.disabled;
 
-  var _useState = (0, _react.useState)(true),
+  var _useState = (0, _react.useState)(_deviceOrientationStatuses.deviceOrientationStatuses.DENIED),
       _useState2 = _slicedToArray(_useState, 2),
-      showInstructions = _useState2[0],
-      setInstructionsState = _useState2[1];
+      deviceOrientationStatus = _useState2[0],
+      setDeviceOrientationStatus = _useState2[1];
 
   var _useState3 = (0, _react.useState)(true),
       _useState4 = _slicedToArray(_useState3, 2),
-      loadingState = _useState4[0],
-      setLoadingState = _useState4[1];
+      showInstructions = _useState4[0],
+      setInstructionsState = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(0),
+  var _useState5 = (0, _react.useState)(true),
       _useState6 = _slicedToArray(_useState5, 2),
-      windowWidth = _useState6[0],
-      setWindowWidth = _useState6[1];
+      loadingState = _useState6[0],
+      setLoadingState = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(true),
+  var _useState7 = (0, _react.useState)({
+    width: 0,
+    height: 0
+  }),
       _useState8 = _slicedToArray(_useState7, 2),
-      isMapDisabled = _useState8[0],
-      setMapDisabledState = _useState8[1];
+      windowSize = _useState8[0],
+      setWindowSize = _useState8[1];
 
   var _useState9 = (0, _react.useState)({
-    X: 1,
-    Y: 1
+    width: '195px',
+    height: 'auto'
   }),
       _useState10 = _slicedToArray(_useState9, 2),
-      planScale = _useState10[0],
-      setPlanScale = _useState10[1];
+      mapSize = _useState10[0],
+      setMapSize = _useState10[1];
 
-  var _useState11 = (0, _react.useState)(false),
+  var _useState11 = (0, _react.useState)({
+    X: 1,
+    Y: 1
+  }),
       _useState12 = _slicedToArray(_useState11, 2),
-      autoplayEnabled = _useState12[0],
-      setAutoplayState = _useState12[1];
+      planScale = _useState12[0],
+      setPlanScale = _useState12[1];
 
-  var _useState13 = (0, _react.useState)(cameraFovValues.x1),
+  var _useState13 = (0, _react.useState)(true),
       _useState14 = _slicedToArray(_useState13, 2),
-      cameraFov = _useState14[0],
-      setCameraFov = _useState14[1];
+      isMapDisabled = _useState14[0],
+      setMapDisabledState = _useState14[1];
 
-  var _useState15 = (0, _react.useState)(0),
+  var _useState15 = (0, _react.useState)(false),
       _useState16 = _slicedToArray(_useState15, 2),
-      currentRoomIndex = _useState16[0],
-      setCurrentRoomIndex = _useState16[1];
+      autoplayEnabled = _useState16[0],
+      setAutoplayState = _useState16[1];
 
-  var _useState17 = (0, _react.useState)([]),
+  var _useState17 = (0, _react.useState)(cameraFovValues.x1),
       _useState18 = _slicedToArray(_useState17, 2),
-      panoramas = _useState18[0],
-      setPanoramas = _useState18[1];
+      cameraFov = _useState18[0],
+      setCameraFov = _useState18[1];
 
-  var _useState19 = (0, _react.useState)(null),
+  var _useState19 = (0, _react.useState)(0),
       _useState20 = _slicedToArray(_useState19, 2),
-      viewer = _useState20[0],
-      setViewer = _useState20[1];
+      currentRoomIndex = _useState20[0],
+      setCurrentRoomIndex = _useState20[1];
+
+  var _useState21 = (0, _react.useState)([]),
+      _useState22 = _slicedToArray(_useState21, 2),
+      panoramas = _useState22[0],
+      setPanoramas = _useState22[1];
+
+  var _useState23 = (0, _react.useState)(null),
+      _useState24 = _slicedToArray(_useState23, 2),
+      viewer = _useState24[0],
+      setViewer = _useState24[1];
 
   var changePanorama = function changePanorama(panorama) {
     setCurrentRoomIndex(panorama['panorama_index']);
@@ -301,8 +321,33 @@ var PanoramaTab = function PanoramaTab(_ref4) {
   };
 
   var setScale = function setScale() {
+    if (!viewer) return;
     var image = document.querySelector('.widget-tab__panorama-map img');
-    setPlanScale((0, _panoramaHelpers.getScale)(image, json));
+    var _viewer$container = viewer.container,
+        clientWidth = _viewer$container.clientWidth,
+        clientHeight = _viewer$container.clientHeight;
+    var imageWidth = image.naturalWidth;
+    var imageHeight = image.naturalHeight;
+    var imageDelta = imageWidth / imageHeight;
+    var maxWidth = 195;
+    var maxHeight = clientHeight - 200;
+    var width = maxWidth;
+    var height = width / imageDelta;
+
+    if (height >= maxHeight) {
+      height = maxHeight;
+      width = height * imageDelta;
+    }
+
+    setMapSize({
+      width: "".concat(width, "px"),
+      height: "".concat(height, "px")
+    });
+    setPlanScale((0, _panoramaHelpers.getScale)({
+      width: width,
+      height: height
+    }, json));
+    viewer.onWindowResize(clientWidth, clientHeight);
   };
 
   var onImageLoaded = function onImageLoaded() {
@@ -310,12 +355,6 @@ var PanoramaTab = function PanoramaTab(_ref4) {
     setMapDisabledState(!json);
   };
 
-  var getDotClassName = function getDotClassName(index) {
-    var className = 'widget-tab__panorama-map__dot widget-tab__panorama-map__dot--big';
-    if (currentRoomIndex === index) className += ' widget-tab__panorama-map__dot--active';
-    return className;
-  };
-
   var getDotPosition = function getDotPosition(_ref5) {
     var left = _ref5.left,
         top = _ref5.top;
@@ -346,18 +385,37 @@ var PanoramaTab = function PanoramaTab(_ref4) {
 
     if (autoplayEnabled) {
       viewer.disableAutoRate();
+
+      if (deviceOrientationStatus === _deviceOrientationStatuses.deviceOrientationStatuses.GRANTED) {
+        viewer.enableControl(DEVICEORIENTATION);
+      }
+
       return;
     }
 
+    if (viewer.getControlId() !== 'orbit') {
+      viewer.enableControl(ORBIT);
+    }
+
     viewer.enableAutoRate();
   };
 
   var updateWindowWidth = function updateWindowWidth() {
-    return setWindowWidth(window.innerWidth);
+    return setWindowSize({
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+  };
+
+  var rescaleMap = function rescaleMap() {
+    var map = document.querySelector('.widget-tab__panorama-map');
+    if (!map) return;
+    map.classList.remove('widget-tab__panorama-map--scaled');
   };
 
   (0, _react.useEffect)(function () {
     window.addEventListener('resize', updateWindowWidth);
+    updateWindowWidth();
     return function cleanup() {
       window.removeEventListener('resize', updateWindowWidth);
     };
@@ -366,11 +424,10 @@ var PanoramaTab = function PanoramaTab(_ref4) {
     if (!panoramas.length) return;
     var container = document.querySelector('.widget-tab__panorama-overlay');
     var newViewer = new PANOLENS.Viewer({
-      autoRotateActivationDuration: 1,
+      autoRotateActivationDuration: 1000,
+      cameraFov: cameraFovValues.x1,
       autoHideInfospot: false,
       controlButtons: [],
-      controlBar: false,
-      cameraFov: cameraFovValues.x1,
       container: container
     });
 
@@ -394,45 +451,52 @@ var PanoramaTab = function PanoramaTab(_ref4) {
     newViewer.scene.rotation.y = Math.PI / 2;
     newViewer.camera.currentFov = cameraFovValues.x1;
     setViewer(newViewer);
-    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
+    var camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 1, 1000);
     var orientationControls = new _threeDeviceOrientation.default(camera);
 
+    var getAngle = function getAngle(control) {
+      if (control.alpha) {
+        return control.alpha - THREE.MathUtils.degToRad(control.screenOrientation);
+      }
+
+      return control.getAzimuthalAngle();
+    };
+
     var animate = function animate() {
       window.requestAnimationFrame(animate);
-      camera.aspect = window.innerWidth / window.innerHeight;
-      camera.updateProjectionMatrix();
       orientationControls.update();
       var fovElement = document.querySelector('.widget-tab__panorama-map__fov');
       if (!fovElement) return;
-      var control = newViewer.getControl();
-      var angle = -(control.alpha || control.getAzimuthalAngle());
+      var angle = -getAngle(newViewer.getControl());
       fovElement.style.transform = "translate(-50%, -50%) rotate(".concat(angle, "rad)");
     };
 
     animate();
   }, [panoramas]);
-  (0, _react.useEffect)(setScale, [json, windowWidth]);
+  (0, _react.useEffect)(setScale, [json, windowSize, viewer]);
   (0, _react.useEffect)(function () {
     return setPanoramas(getPanoramas(json, images, setLoadingState));
   }, [json, images]);
 
+  var requestDeviceOrientation = function requestDeviceOrientation() {
+    return DeviceOrientationEvent.requestPermission().then(function (status) {
+      setDeviceOrientationStatus(status);
+
+      if (status !== _deviceOrientationStatuses.deviceOrientationStatuses.GRANTED) {
+        viewer.enableControl(ORBIT);
+        return;
+      }
+
+      viewer.enableControl(DEVICEORIENTATION);
+    });
+  };
+
   var onStart = function onStart() {
     setInstructionsState(false);
 
     try {
       if (!DeviceOrientationEvent.requestPermission) return;
-      return DeviceOrientationEvent.requestPermission().then(function (status) {
-        if (status !== _deviceOrientationStatus.deviceOrientationStatus.GRANTED) {
-          setTimeout(function () {
-            return viewer.enableControl(ORBIT);
-          }, 100);
-          return;
-        }
-
-        setTimeout(function () {
-          return viewer.enableControl(DEVICEORIENTATION);
-        }, 100);
-      });
+      return requestDeviceOrientation();
     } catch (error) {
       console.error(error.message);
     }
@@ -451,6 +515,17 @@ var PanoramaTab = function PanoramaTab(_ref4) {
   };
 
   var onMapClick = function onMapClick(event) {
+    if (loadingState) return;
+    var map = document.querySelector('.widget-tab__panorama-map');
+
+    if (windowSize.width <= _deviceWidth.deviceWidth.tablet) {
+      if (!map.classList.contains('widget-tab__panorama-map--scaled')) {
+        map.classList.add('widget-tab__panorama-map--scaled');
+        return;
+      }
+    }
+
+    rescaleMap();
     var image = document.querySelector('.widget-tab__panorama-map img');
     var clientX = event.clientX,
         clientY = event.clientY;
@@ -471,28 +546,22 @@ var PanoramaTab = function PanoramaTab(_ref4) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "widget-tab__panorama"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "widget-tab__panorama-overlay"
+    className: "widget-tab__panorama-overlay",
+    onContextMenu: _helpers.preventRightClick
   }), loadingState && /*#__PURE__*/_react.default.createElement(_Loader.default, {
     absolute: true
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "widget-tab__panorama-map ".concat(isMapDisabled ? 'widget-tab__panorama-map--hidden' : '')
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: planImage,
-    onLoad: onImageLoaded,
-    alt: "plan"
-  }), !isMapDisabled && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, panoramas.map(function (panorama, index) {
-    return /*#__PURE__*/_react.default.createElement("button", {
-      key: index,
-      className: getDotClassName(index),
-      style: getDotPosition(panorama.userData),
-      onClick: function onClick() {
-        return changePanorama(panorama);
-      }
-    });
-  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: mapSize,
+    alt: "plan",
+    onLoad: onImageLoaded
+  }), !isMapDisabled && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "widget-tab__panorama-map__fov",
     style: getDotPosition(((_panoramas$currentRoo = panoramas[currentRoomIndex]) === null || _panoramas$currentRoo === void 0 ? void 0 : _panoramas$currentRoo.userData) || getDefaultUserData())
   }), /*#__PURE__*/_react.default.createElement("svg", {
+    width: mapSize.width,
     key: "X-".concat(planScale.X, "-Y-").concat(planScale.Y),
     onClick: onMapClick
   }, panoramas.map(function (_ref10, index) {

package/build/components/RotationTab.js

@@ -13,6 +13,8 @@ var _panzoom = _interopRequireDefault(require("panzoom"));
 
 var _threesixty = _interopRequireDefault(require("../threesixty"));
 
+var _helpers = require("../utils/helpers");
+
 var _Instructions = _interopRequireDefault(require("./Instructions"));
 
 var _handMove = _interopRequireDefault(require("../assets/icons/hand-move.svg"));
@@ -88,8 +90,8 @@ var RotationTab = function RotationTab(_ref) {
     var controller = (0, _panzoom.default)(container, {
       maxZoom: 3,
       minZoom: 0.5,
-      beforeMouseDown: function beforeMouseDown(e) {
-        return !e.shiftKey;
+      beforeMouseDown: function beforeMouseDown(event) {
+        return !event.shiftKey;
       }
     });
     controller.on('panstart', function () {
@@ -114,7 +116,8 @@ var RotationTab = function RotationTab(_ref) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "widget-tab__threesixty ".concat(active ? 'widget-tab__threesixty--active' : '')
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "widget-tab__threesixty-container"
+    className: "widget-tab__threesixty-container",
+    onContextMenu: _helpers.preventRightClick
   }, images.map(function (img, index) {
     return /*#__PURE__*/_react.default.createElement("img", {
       src: img,

package/build/enums/deviceOrientationStatuses.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.deviceOrientationStatuses = void 0;
+var deviceOrientationStatuses = {
+  GRANTED: 'granted',
+  DENIED: 'denied'
+};
+exports.deviceOrientationStatuses = deviceOrientationStatuses;

package/build/enums/deviceWidth.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.deviceWidth = void 0;
+var deviceWidth = {
+  mobile: 545,
+  tablet: 900
+};
+exports.deviceWidth = deviceWidth;

package/build/index.js

@@ -54,8 +54,6 @@ Object.defineProperty(exports, "Widget", {
 
 var _react = _interopRequireDefault(require("react"));
 
-require("./index.css");
-
 var _apiStore = _interopRequireDefault(require("./store/apiStore"));
 
 var _ImageTab = _interopRequireDefault(require("./components/ImageTab"));

package/build/threesixty/events.js

@@ -61,7 +61,9 @@ var Events = /*#__PURE__*/function () {
     _classPrivateFieldSet(this, _eventHandlers, {
       container: {
         mousedown: function mousedown(e) {
-          return _classPrivateFieldSet(_this, _dragOrigin, e.pageX);
+          if (e.button !== 0) return;
+
+          _classPrivateFieldSet(_this, _dragOrigin, e.pageX);
         },
         touchstart: function touchstart(e) {
           return _classPrivateFieldSet(_this, _dragOrigin, e.touches[0].clientX);

package/build/utils/helpers.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.preventRightClick = void 0;
+
+var preventRightClick = function preventRightClick(event) {
+  event.preventDefault();
+};
+
+exports.preventRightClick = preventRightClick;

package/build/utils/panoramaHelpers.js

@@ -63,17 +63,17 @@ var getRoomCoordinates = function getRoomCoordinates(room, walls, vertices) {
 
 exports.getRoomCoordinates = getRoomCoordinates;
 
-var getScale = function getScale(image, json) {
+var getScale = function getScale(_ref, json) {
+  var width = _ref.width,
+      height = _ref.height;
   if (!json) return {
     X: 1,
     Y: 1
   };
-  var imageWidth = image.width;
-  var imageHeight = image.height;
   var baseImageWidth = 1024;
-  var baseImageHeight = imageHeight * (baseImageWidth / imageWidth);
-  var deltaX = imageWidth / baseImageWidth / json.Scale.X;
-  var deltaY = imageHeight / baseImageHeight / json.Scale.X;
+  var baseImageHeight = height * (baseImageWidth / width);
+  var deltaX = width / baseImageWidth / json.Scale.X;
+  var deltaY = height / baseImageHeight / json.Scale.X;
   return {
     X: deltaX,
     Y: deltaY
@@ -88,8 +88,8 @@ var getCameraFromSrc = function getCameraFromSrc(json, src) {
   var cameraIdIndex = src.toLowerCase().indexOf(cameraIdBeginning);
   if (cameraIdIndex === -1) return null;
   var cameraId = (0, _imageExtentions.removeExtention)(src.substring(cameraIdIndex));
-  return ((_json$Floors$0$Camera = json.Floors[0].CameraPoints) === null || _json$Floors$0$Camera === void 0 ? void 0 : _json$Floors$0$Camera.find(function (_ref) {
-    var ID = _ref.ID;
+  return ((_json$Floors$0$Camera = json.Floors[0].CameraPoints) === null || _json$Floors$0$Camera === void 0 ? void 0 : _json$Floors$0$Camera.find(function (_ref2) {
+    var ID = _ref2.ID;
     return ID === cameraId;
   })) || null;
 };

package/package.json

@@ -3,7 +3,7 @@
   "description": "HART Estate widget",
   "author": "HART",
   "keywords": [],
-  "version": "0.0.51",
+  "version": "0.0.52",
   "private": false,
   "main": "build/index.js",
   "module": "build/index.js",
@@ -11,6 +11,9 @@
     "build",
     "README.md"
   ],
+	"engines": {
+		"node": "^16.0.0"
+	},
   "scripts": {
     "start": "npm run build:sass && babel src --watch -d build --copy-files",
     "start-example": "cd ./example && npm run start",

package/build/enums/deviceOrientationStatus.js

@@ -1,11 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.deviceOrientationStatus = void 0;
-var deviceOrientationStatus = {
-  GRANTED: 'granted',
-  DENIED: 'denied'
-};
-exports.deviceOrientationStatus = deviceOrientationStatus;