@retailcrm/embed-ui-v1-components 0.4.1-beta.1 → 0.4.1-beta.3

package/dist/host.cjs

@@ -60,7 +60,7 @@ var VARIANT = /* @__PURE__ */ ((VARIANT2) => {
   VARIANT2["DANGER"] = "danger";
   return VARIANT2;
 })(VARIANT || {});
-const _sfc_main$c = vue.defineComponent({
+const _sfc_main$d = vue.defineComponent({
   props: {
     /** Устанавливает тип кнопки */
     type: {
@@ -161,7 +161,7 @@ var ALIGN = /* @__PURE__ */ ((ALIGN2) => {
   ALIGN2["RIGHT"] = "right";
   return ALIGN2;
 })(ALIGN || {});
-const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
   __name: "UiError",
   props: {
     /** Тест, разметка ошибки */
@@ -200,12 +200,12 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$6 = {
+const _hoisted_1$7 = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24"
 };
 function render$3(_ctx, _cache) {
-  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$6, _cache[0] || (_cache[0] = [
+  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$7, _cache[0] || (_cache[0] = [
     vue.createElementVNode("path", {
       fill: "currentColor",
       d: "m6.844 17.854-.7-.703a.5.5 0 0 1 0-.704l8.48-8.456-6.212.007a.49.49 0 0 1-.496-.5l.007-.991a.5.5 0 0 1 .496-.5L16.994 6c.196 0 .385.078.524.218l.265.267c.137.142.215.33.217.528l-.007 8.633a.5.5 0 0 1-.496.5h-.992a.48.48 0 0 1-.49-.493l.007-6.255-8.48 8.456a.49.49 0 0 1-.698 0"
@@ -231,7 +231,7 @@ var SIZE$3 = /* @__PURE__ */ ((SIZE2) => {
   SIZE2["TITLE02"] = "title-02";
   return SIZE2;
 })(SIZE$3 || {});
-const _hoisted_1$5 = ["href", "target"];
+const _hoisted_1$6 = ["href", "target"];
 const _hoisted_2$2 = {
   key: 0,
   class: "ui-v1-link__inner"
@@ -240,7 +240,7 @@ const _hoisted_3$2 = {
   key: 2,
   class: "ui-v1-link__icon"
 };
-const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   __name: "UiLink",
   props: {
     /** Атрибут ссылки */
@@ -314,11 +314,11 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
             vue.createVNode(vue.unref(IconOpenInNew), { class: "ui-v1-link__icon-sprite" })
           ])
         ])) : vue.createCommentVNode("", true)
-      ], 16, _hoisted_1$5);
+      ], 16, _hoisted_1$6);
     };
   }
 });
-const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   __name: "UiTransition",
   props: {
     /** Наименование анимации перехода */
@@ -346,7 +346,7 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
   __name: "UiLoader",
   props: {
     /** Диаметр (размер) окружности индикатора */
@@ -378,7 +378,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.transition ? _sfc_main$9 : "div"), vue.normalizeProps(vue.guardReactiveProps(__props.transition ? {
+      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.transition ? _sfc_main$a : "div"), vue.normalizeProps(vue.guardReactiveProps(__props.transition ? {
         appear: true,
         class: "ui-v1-loader-wrapper",
         name: __props.transition
@@ -1530,7 +1530,7 @@ var PerfectScrollbar$1 = {
     );
   }
 };
-const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
   __name: "UiScrollBox",
   props: {
     /** Наименование тэга-обёртки для нативного скролла */
@@ -1634,12 +1634,12 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$4 = {
+const _hoisted_1$5 = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24"
 };
 function render$2(_ctx, _cache) {
-  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$4, _cache[0] || (_cache[0] = [
+  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$5, _cache[0] || (_cache[0] = [
     vue.createElementVNode("path", {
       fill: "currentColor",
       d: "M7.113 6.176a.6.6 0 0 1 .848 0L12 10.214l4.038-4.038a.6.6 0 0 1 .849 0l.937.937a.6.6 0 0 1 0 .848L13.785 12l4.04 4.04a.6.6 0 0 1 0 .848l-.937.937a.6.6 0 0 1-.849 0L12 13.784l-4.038 4.04a.6.6 0 0 1-.849 0l-.937-.937a.6.6 0 0 1 0-.848l4.04-4.04-4.039-4.038a.6.6 0 0 1 0-.849z"
@@ -1742,7 +1742,7 @@ var SIZE$2 = /* @__PURE__ */ ((SIZE2) => {
   SIZE2["SM"] = "sm";
   return SIZE2;
 })(SIZE$2 || {});
-const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
   __name: "UiModalSidebar",
   props: {
     /** Атрибут id корневого элемента. Должен быть уникальным на странице */
@@ -1972,7 +1972,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
         }))
       ]);
     };
-    const renderBody = () => props.scrolling === SCROLLING$1.NONE ? vue.h("div", { class: "ui-v1-modal-sidebar__body-fixed" }, renderSlot("default")) : vue.h(_sfc_main$7, {
+    const renderBody = () => props.scrolling === SCROLLING$1.NONE ? vue.h("div", { class: "ui-v1-modal-sidebar__body-fixed" }, renderSlot("default")) : vue.h(_sfc_main$8, {
       class: "ui-v1-modal-sidebar__body",
       native: props.scrolling === SCROLLING$1.NATIVE,
       showOnMac: true,
@@ -1985,7 +1985,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
       const direction = props.direction;
       const size = props.size;
       const setVisibility = (visibility2) => () => visibilityOfSidebar.value = visibility2;
-      return vue.h(_sfc_main$9, {
+      return vue.h(_sfc_main$a, {
         name: `slide-${direction}`,
         onBeforeEnter: setVisibility("showing"),
         onAfterEnter: setVisibility("shown"),
@@ -2013,7 +2013,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
       const setVisibility = (visibility2) => () => visibilityOfOverlay.value = visibility2;
       return !state.attached ? void 0 : vue.h(vue.Teleport, {
         to: (globals == null ? void 0 : globals.container) ?? document.body
-      }, vue.h(_sfc_main$9, {
+      }, vue.h(_sfc_main$a, {
         name: "fade-2",
         onBeforeEnter: setVisibility("showing"),
         onAfterEnter: setVisibility("shown"),
@@ -2071,7 +2071,7 @@ var SCROLLING = /* @__PURE__ */ ((SCROLLING2) => {
   SCROLLING2["NATIVE"] = "native";
   return SCROLLING2;
 })(SCROLLING || {});
-const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
   __name: "UiModalWindowSurface",
   props: {
     /** Атрибут id корневого элемента модального окна. Должен быть уникальным на странице */
@@ -2285,7 +2285,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     const slots = vue.useSlots();
     const renderBody = () => {
       const appearance = props.appearance;
-      return vue.h(_sfc_main$9, {
+      return vue.h(_sfc_main$a, {
         name: "zoom",
         onBeforeEnter: () => visibilityOfBody.value = "showing",
         onAfterEnter: () => visibilityOfBody.value = "shown",
@@ -2310,7 +2310,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     };
     const EmbedModalWindowSurface = () => !state.attached ? void 0 : vue.h(vue.Teleport, {
       to: (globals == null ? void 0 : globals.container) ?? document.body
-    }, vue.h(_sfc_main$9, {
+    }, vue.h(_sfc_main$a, {
       name: "fade-2",
       onBeforeEnter: () => visibilityOfOverlay.value = "showing",
       onAfterEnter: () => visibilityOfOverlay.value = "shown",
@@ -2327,7 +2327,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
           "ui-v1-modal_overlapped": state.overlapped
         }],
         onClick: onOverlayClick
-      }, vue.h(_sfc_main$7, {
+      }, vue.h(_sfc_main$8, {
         class: {
           "ui-v1-modal-window-container": true,
           "ui-v1-modal-window-container_fullscreen": props.fullscreen,
@@ -2352,12 +2352,12 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$3 = {
+const _hoisted_1$4 = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24"
 };
 function render$1(_ctx, _cache) {
-  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$3, _cache[0] || (_cache[0] = [
+  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$4, _cache[0] || (_cache[0] = [
     vue.createElementVNode("path", {
       fill: "currentColor",
       "fill-rule": "evenodd",
@@ -2367,7 +2367,7 @@ function render$1(_ctx, _cache) {
   ]));
 }
 const IconWarning = { render: render$1 };
-const _hoisted_1$2 = {
+const _hoisted_1$3 = {
   key: 0,
   class: "ui-v1-modal-window__icon"
 };
@@ -2384,7 +2384,7 @@ const _hoisted_5 = {
   key: 0,
   class: "ui-v1-modal-window__footer-text"
 };
-const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   __name: "UiModalWindow",
   props: {
     /** Атрибут id корневого элемента модального окна. Должен быть уникальным на странице */
@@ -2498,7 +2498,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     });
     vue.watch(() => props.opened, toggle);
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(_sfc_main$5, vue.mergeProps({
+      return vue.openBlock(), vue.createBlock(_sfc_main$6, vue.mergeProps({
         id: __props.id,
         opened: state.opened,
         closable: __props.closable,
@@ -2526,7 +2526,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
               "ui-v1-modal-window__header_pinned": _ctx.$slots.title && state.scrolled && __props.appearance === vue.unref(APPEARANCE).POPUP && !__props.responsive
             })
           }, [
-            __props.appearance === vue.unref(APPEARANCE).ALERT ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+            __props.appearance === vue.unref(APPEARANCE).ALERT ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
               vue.renderSlot(_ctx.$slots, "icon", {
                 overlapped: state.overlapped
               }, () => [
@@ -2555,7 +2555,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
               })
             ])) : vue.createCommentVNode("", true)
           ], 2),
-          __props.responsive ? (vue.openBlock(), vue.createBlock(_sfc_main$7, {
+          __props.responsive ? (vue.openBlock(), vue.createBlock(_sfc_main$8, {
             key: 0,
             class: "ui-v1-modal-window__content",
             "show-on-mac": "",
@@ -2588,12 +2588,12 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$1 = {
+const _hoisted_1$2 = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24"
 };
 function render(_ctx, _cache) {
-  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1, _cache[0] || (_cache[0] = [
+  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$2, _cache[0] || (_cache[0] = [
     vue.createElementVNode("path", {
       fill: "currentColor",
       d: "m14.675 4.6.544-1.257a.99.99 0 0 0-.04-.911.82.82 0 0 0-.739-.421L9.5 2a.81.81 0 0 0-.704.423.99.99 0 0 0-.047.88l.55 1.26c.155.358.201.762.13 1.15l-.623 3.441a2.8 2.8 0 0 1-.685 1.426l-.875.96a.96.96 0 0 0-.246.646l.025.555c.002.502.373.91.83.912l8.312.025c.458 0 .828-.407.828-.909l.005-.536a.96.96 0 0 0-.248-.646l-.878-.964a2.85 2.85 0 0 1-.691-1.43l-.636-3.443a2 2 0 0 1 .128-1.15M10.967 20.047a3 3 0 0 1-.196-1.079l-.007-3.771 2.424.057.007 3.758a3 3 0 0 1-.193 1.079l-.638 1.632a.415.415 0 0 1-.382.277.42.42 0 0 1-.383-.279z"
@@ -2776,16 +2776,16 @@ const init = (locale, options = null) => localize(
   locale
 );
 const _i18n = {
-  fallback: "en-GB",
+  fallback,
   init
 };
-const _hoisted_1 = {
+const _hoisted_1$1 = {
   key: 0,
   class: "ui-v1-tag__icon"
 };
 const _hoisted_2 = { class: "ui-v1-tag__content-inner" };
 const _hoisted_3 = ["aria-label"];
-const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   __name: "UiTag",
   props: {
     /** Рамер */
@@ -2848,7 +2848,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
           style: vue.normalizeStyle(__props.background ? { background: __props.background } : {}),
           onMouseoverOnce: onHover
         }, [
-          _ctx.$slots["icon"] || __props.pinned ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+          _ctx.$slots["icon"] || __props.pinned ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
             vue.renderSlot(_ctx.$slots, "icon", {}, () => [
               vue.createVNode(vue.unref(IconPinned))
             ])
@@ -2890,7 +2890,7 @@ const useToolbarSize = () => vue.inject(ToolbarInjectKeys.size, vue.computed(
   () => "sm"
   /* SM */
 ));
-const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -2909,7 +2909,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -2966,7 +2966,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
       return SIZE$4.SM;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(_sfc_main$c, vue.mergeProps({
+      return vue.openBlock(), vue.createBlock(_sfc_main$d, vue.mergeProps({
         ref_key: "root",
         ref: root,
         href: __props.href,
@@ -2990,7 +2990,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -3039,7 +3039,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(_sfc_main$a, vue.mergeProps({
+      return vue.openBlock(), vue.createBlock(_sfc_main$b, vue.mergeProps({
         href: __props.href,
         external: __props.external,
         appearance: __props.appearance,
@@ -3065,19 +3065,190 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
+const load = (document2, src) => new Promise((resolve, reject) => {
+  const script = document2.createElement("script");
+  script.async = true;
+  script.src = src;
+  script.onload = (event) => resolve(event);
+  script.onerror = (event, source, lineno, colno, error) => {
+    console.error(`Failed to load script from ${src}`, {
+      event,
+      source,
+      lineno,
+      colno,
+      error
+    });
+    reject(error);
+  };
+  const head = document2.head || document2.getElementsByTagName("head")[0];
+  head.appendChild(script);
+});
+const _hoisted_1 = { class: "ui-v1-yandex-map" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "UiYandexMap",
+  props: {
+    apiKey: {
+      type: String,
+      required: true
+    },
+    address: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: [
+    "change",
+    "update:address"
+  ],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const vueI18n = vue.inject(I18nInjectKey);
+    const iframe = vue.ref(null);
+    const getIFrameDocument = () => {
+      var _a;
+      return ((_a = iframe.value) == null ? void 0 : _a.contentDocument) ?? null;
+    };
+    const getIFrameWindow = () => {
+      var _a;
+      return ((_a = iframe.value) == null ? void 0 : _a.contentWindow) ?? null;
+    };
+    const getIFrameYMaps = () => {
+      const iframeWindow = getIFrameWindow();
+      if (iframeWindow && "ymaps3" in iframeWindow) {
+        return iframeWindow["ymaps3"];
+      }
+      return null;
+    };
+    const LOCATION = {
+      center: [37.64, 55.76],
+      zoom: 10
+    };
+    const waitIFrameContentLoaded = (retry = 5) => {
+      var _a;
+      if ((_a = iframe.value) == null ? void 0 : _a.contentDocument) {
+        return Promise.resolve();
+      }
+      if (retry <= 1) {
+        throw new Error("iframe contentDocument wasn't loaded");
+      }
+      return new Promise((resolve) => setTimeout(async () => {
+        await waitIFrameContentLoaded(retry--);
+        resolve(0);
+      }, 100));
+    };
+    const ready = vue.ref(false);
+    const apiLocale = vue.computed(() => ({
+      "en-GB": "en_US",
+      "es-ES": "en_US",
+      "ru-RU": "ru_RU"
+    })[(vueI18n == null ? void 0 : vueI18n.locale) ?? "en-GB"]);
+    const apiUrl = vue.computed(() => `https://api-maps.yandex.ru/v3/?apikey=${props.apiKey}&lang=${apiLocale.value}`);
+    const apiUrlVersion = vue.ref(0);
+    const getGeocodeApiUrl = (geocode) => `https://geocode-maps.yandex.ru/1.x/?apikey=${props.apiKey}&geocode=${geocode}&lang=${apiLocale.value}&format=json`;
+    function onDragEndHandler(coordinates) {
+      fetchAddressFromCoordinates(coordinates).then((address) => {
+        emit("change", address);
+        emit("update:address", address);
+      });
+    }
+    const fetchAddressFromCoordinates = async (coordinates) => {
+      var _a, _b, _c, _d, _e;
+      const response = await fetch(getGeocodeApiUrl(coordinates.toString()));
+      const result = await response.json();
+      return ((_e = (_d = (_c = (_b = (_a = result.response.GeoObjectCollection.featureMember[0]) == null ? void 0 : _a.GeoObject) == null ? void 0 : _b.metaDataProperty) == null ? void 0 : _c.GeocoderMetaData) == null ? void 0 : _d.Address) == null ? void 0 : _e.formatted) ?? "";
+    };
+    const fetchCoordinatesFromAddress = async (address) => {
+      var _a, _b;
+      const response = await fetch(getGeocodeApiUrl(address));
+      const result = await response.json();
+      return ((_b = (_a = result.response.GeoObjectCollection.featureMember[0]) == null ? void 0 : _a.GeoObject) == null ? void 0 : _b.Point.pos) ?? "";
+    };
+    const loadApi = async () => {
+      var _a;
+      await waitIFrameContentLoaded();
+      const iframeDocument = getIFrameDocument();
+      if (iframeDocument) {
+        const style = iframeDocument.createElement("style");
+        style.innerHTML = "body { margin: 0; }";
+        iframeDocument.head.appendChild(style);
+        await load(iframeDocument, apiUrl.value);
+        await ((_a = getIFrameYMaps()) == null ? void 0 : _a.ready);
+        const el = iframeDocument.createElement("div");
+        el.setAttribute("id", "map");
+        iframeDocument.body.appendChild(el);
+        ready.value = true;
+        const _ymaps3 = getIFrameYMaps();
+        const {
+          YMap,
+          YMapControls,
+          YMapDefaultFeaturesLayer,
+          YMapDefaultSchemeLayer
+        } = _ymaps3;
+        const { YMapZoomControl, YMapGeolocationControl } = await _ymaps3.import("@yandex/ymaps3-controls@0.0.1");
+        const { YMapDefaultMarker } = await _ymaps3.import("@yandex/ymaps3-markers@0.0.1");
+        if (props.address) {
+          const pos = await fetchCoordinatesFromAddress(props.address);
+          if (pos) {
+            LOCATION.center = pos.split(" ").map((c) => Number(c));
+          }
+        }
+        const map = new YMap(el, { location: LOCATION });
+        map.addChild(new YMapDefaultSchemeLayer({}));
+        map.addChild(new YMapControls({ position: "right" }).addChild(new YMapZoomControl({})));
+        map.addChild(new YMapDefaultFeaturesLayer({ id: "features" }));
+        map.addChild(new YMapControls({ position: "left" }).addChild(new YMapGeolocationControl({})));
+        const onDragMoveHandler = (coordinates) => {
+          const longitude = `Longitude: ${coordinates[0].toFixed(2)}`;
+          const latitude = `Latitude: ${coordinates[1].toFixed(2)}`;
+          draggableMarker.update({ coordinates, title: `${longitude} <br> ${latitude}` });
+        };
+        const draggableMarker = new YMapDefaultMarker({
+          coordinates: LOCATION.center,
+          draggable: true,
+          title: `Longitude: ${LOCATION.center[0].toFixed(2)} <br>
+              Latitude ${LOCATION.center[1].toFixed(2)}`,
+          onDragMove: onDragMoveHandler,
+          onDragEnd: onDragEndHandler
+        });
+        map.addChild(draggableMarker);
+      }
+    };
+    vue.watch(apiUrl, async (newUrl, oldUrl) => {
+      if (iframe.value && newUrl !== oldUrl) {
+        ready.value = false;
+        apiUrlVersion.value++;
+      }
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        !ready.value ? (vue.openBlock(), vue.createBlock(_sfc_main$9, { key: 0 })) : vue.createCommentVNode("", true),
+        vue.withDirectives((vue.openBlock(), vue.createElementBlock("iframe", {
+          ref_key: "iframe",
+          ref: iframe,
+          key: apiUrlVersion.value,
+          onLoad: loadApi
+        }, null, 32)), [
+          [vue.vShow, ready.value]
+        ])
+      ]);
+    };
+  }
+});
 exports.I18nPlugin = plugin;
 exports.ModalPlugin = plugin$1;
-exports.UiButton = _sfc_main$c;
-exports.UiError = _sfc_main$b;
-exports.UiLink = _sfc_main$a;
-exports.UiLoader = _sfc_main$8;
-exports.UiModalSidebar = _sfc_main$6;
-exports.UiModalWindow = _sfc_main$4;
-exports.UiModalWindowSurface = _sfc_main$5;
-exports.UiScrollBox = _sfc_main$7;
-exports.UiTag = _sfc_main$3;
-exports.UiToolbar = _sfc_main$2;
-exports.UiToolbarButton = _sfc_main$1;
-exports.UiToolbarLink = _sfc_main;
-exports.UiTransition = _sfc_main$9;
+exports.UiButton = _sfc_main$d;
+exports.UiError = _sfc_main$c;
+exports.UiLink = _sfc_main$b;
+exports.UiLoader = _sfc_main$9;
+exports.UiModalSidebar = _sfc_main$7;
+exports.UiModalWindow = _sfc_main$5;
+exports.UiModalWindowSurface = _sfc_main$6;
+exports.UiScrollBox = _sfc_main$8;
+exports.UiTag = _sfc_main$4;
+exports.UiToolbar = _sfc_main$3;
+exports.UiToolbarButton = _sfc_main$2;
+exports.UiToolbarLink = _sfc_main$1;
+exports.UiTransition = _sfc_main$a;
+exports.UiYandexMap = _sfc_main;
 exports.VueI18n = VueI18n;

package/dist/host.css

@@ -1403,3 +1403,15 @@
     transform: translateX(var(--delta-width));
 }
 }
+.ui-v1-yandex-map {
+  display: flex;
+  width: 100%;
+  min-height: 360px;
+  position: relative;
+}
+.ui-v1-yandex-map iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  position: absolute;
+}

package/dist/host.d.ts

@@ -434,6 +434,13 @@ declare type UiTransitionProps = {
     appear?: boolean;
 };
 
+export declare const UiYandexMap: DefineComponent<UiYandexMapProperties>;
+
+declare type UiYandexMapProperties = {
+    apiKey: string;
+    address?: string;
+};
+
 declare enum VARIANT {
     DEFAULT = "default",
     SUCCESS = "success",

package/dist/host.js

@@ -58,7 +58,7 @@ var VARIANT = /* @__PURE__ */ ((VARIANT2) => {
   VARIANT2["DANGER"] = "danger";
   return VARIANT2;
 })(VARIANT || {});
-const _sfc_main$c = defineComponent({
+const _sfc_main$d = defineComponent({
   props: {
     /** Устанавливает тип кнопки */
     type: {
@@ -159,7 +159,7 @@ var ALIGN = /* @__PURE__ */ ((ALIGN2) => {
   ALIGN2["RIGHT"] = "right";
   return ALIGN2;
 })(ALIGN || {});
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "UiError",
   props: {
     /** Тест, разметка ошибки */
@@ -198,12 +198,12 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$6 = {
+const _hoisted_1$7 = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24"
 };
 function render$3(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$6, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1$7, _cache[0] || (_cache[0] = [
     createElementVNode("path", {
       fill: "currentColor",
       d: "m6.844 17.854-.7-.703a.5.5 0 0 1 0-.704l8.48-8.456-6.212.007a.49.49 0 0 1-.496-.5l.007-.991a.5.5 0 0 1 .496-.5L16.994 6c.196 0 .385.078.524.218l.265.267c.137.142.215.33.217.528l-.007 8.633a.5.5 0 0 1-.496.5h-.992a.48.48 0 0 1-.49-.493l.007-6.255-8.48 8.456a.49.49 0 0 1-.698 0"
@@ -229,7 +229,7 @@ var SIZE$3 = /* @__PURE__ */ ((SIZE2) => {
   SIZE2["TITLE02"] = "title-02";
   return SIZE2;
 })(SIZE$3 || {});
-const _hoisted_1$5 = ["href", "target"];
+const _hoisted_1$6 = ["href", "target"];
 const _hoisted_2$2 = {
   key: 0,
   class: "ui-v1-link__inner"
@@ -238,7 +238,7 @@ const _hoisted_3$2 = {
   key: 2,
   class: "ui-v1-link__icon"
 };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "UiLink",
   props: {
     /** Атрибут ссылки */
@@ -312,11 +312,11 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             createVNode(unref(IconOpenInNew), { class: "ui-v1-link__icon-sprite" })
           ])
         ])) : createCommentVNode("", true)
-      ], 16, _hoisted_1$5);
+      ], 16, _hoisted_1$6);
     };
   }
 });
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "UiTransition",
   props: {
     /** Наименование анимации перехода */
@@ -344,7 +344,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "UiLoader",
   props: {
     /** Диаметр (размер) окружности индикатора */
@@ -376,7 +376,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(__props.transition ? _sfc_main$9 : "div"), normalizeProps(guardReactiveProps(__props.transition ? {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.transition ? _sfc_main$a : "div"), normalizeProps(guardReactiveProps(__props.transition ? {
         appear: true,
         class: "ui-v1-loader-wrapper",
         name: __props.transition
@@ -1528,7 +1528,7 @@ var PerfectScrollbar$1 = {
     );
   }
 };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "UiScrollBox",
   props: {
     /** Наименование тэга-обёртки для нативного скролла */
@@ -1632,12 +1632,12 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$4 = {
+const _hoisted_1$5 = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24"
 };
 function render$2(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$4, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1$5, _cache[0] || (_cache[0] = [
     createElementVNode("path", {
       fill: "currentColor",
       d: "M7.113 6.176a.6.6 0 0 1 .848 0L12 10.214l4.038-4.038a.6.6 0 0 1 .849 0l.937.937a.6.6 0 0 1 0 .848L13.785 12l4.04 4.04a.6.6 0 0 1 0 .848l-.937.937a.6.6 0 0 1-.849 0L12 13.784l-4.038 4.04a.6.6 0 0 1-.849 0l-.937-.937a.6.6 0 0 1 0-.848l4.04-4.04-4.039-4.038a.6.6 0 0 1 0-.849z"
@@ -1740,7 +1740,7 @@ var SIZE$2 = /* @__PURE__ */ ((SIZE2) => {
   SIZE2["SM"] = "sm";
   return SIZE2;
 })(SIZE$2 || {});
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "UiModalSidebar",
   props: {
     /** Атрибут id корневого элемента. Должен быть уникальным на странице */
@@ -1970,7 +1970,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         }))
       ]);
     };
-    const renderBody = () => props.scrolling === SCROLLING$1.NONE ? h("div", { class: "ui-v1-modal-sidebar__body-fixed" }, renderSlot2("default")) : h(_sfc_main$7, {
+    const renderBody = () => props.scrolling === SCROLLING$1.NONE ? h("div", { class: "ui-v1-modal-sidebar__body-fixed" }, renderSlot2("default")) : h(_sfc_main$8, {
       class: "ui-v1-modal-sidebar__body",
       native: props.scrolling === SCROLLING$1.NATIVE,
       showOnMac: true,
@@ -1983,7 +1983,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       const direction = props.direction;
       const size = props.size;
       const setVisibility = (visibility2) => () => visibilityOfSidebar.value = visibility2;
-      return h(_sfc_main$9, {
+      return h(_sfc_main$a, {
         name: `slide-${direction}`,
         onBeforeEnter: setVisibility("showing"),
         onAfterEnter: setVisibility("shown"),
@@ -2011,7 +2011,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       const setVisibility = (visibility2) => () => visibilityOfOverlay.value = visibility2;
       return !state.attached ? void 0 : h(Teleport, {
         to: (globals == null ? void 0 : globals.container) ?? document.body
-      }, h(_sfc_main$9, {
+      }, h(_sfc_main$a, {
         name: "fade-2",
         onBeforeEnter: setVisibility("showing"),
         onAfterEnter: setVisibility("shown"),
@@ -2069,7 +2069,7 @@ var SCROLLING = /* @__PURE__ */ ((SCROLLING2) => {
   SCROLLING2["NATIVE"] = "native";
   return SCROLLING2;
 })(SCROLLING || {});
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "UiModalWindowSurface",
   props: {
     /** Атрибут id корневого элемента модального окна. Должен быть уникальным на странице */
@@ -2283,7 +2283,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     const slots = useSlots();
     const renderBody = () => {
       const appearance = props.appearance;
-      return h(_sfc_main$9, {
+      return h(_sfc_main$a, {
         name: "zoom",
         onBeforeEnter: () => visibilityOfBody.value = "showing",
         onAfterEnter: () => visibilityOfBody.value = "shown",
@@ -2308,7 +2308,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
     const EmbedModalWindowSurface = () => !state.attached ? void 0 : h(Teleport, {
       to: (globals == null ? void 0 : globals.container) ?? document.body
-    }, h(_sfc_main$9, {
+    }, h(_sfc_main$a, {
       name: "fade-2",
       onBeforeEnter: () => visibilityOfOverlay.value = "showing",
       onAfterEnter: () => visibilityOfOverlay.value = "shown",
@@ -2325,7 +2325,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           "ui-v1-modal_overlapped": state.overlapped
         }],
         onClick: onOverlayClick
-      }, h(_sfc_main$7, {
+      }, h(_sfc_main$8, {
         class: {
           "ui-v1-modal-window-container": true,
           "ui-v1-modal-window-container_fullscreen": props.fullscreen,
@@ -2350,12 +2350,12 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$3 = {
+const _hoisted_1$4 = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24"
 };
 function render$1(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$3, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1$4, _cache[0] || (_cache[0] = [
     createElementVNode("path", {
       fill: "currentColor",
       "fill-rule": "evenodd",
@@ -2365,7 +2365,7 @@ function render$1(_ctx, _cache) {
   ]));
 }
 const IconWarning = { render: render$1 };
-const _hoisted_1$2 = {
+const _hoisted_1$3 = {
   key: 0,
   class: "ui-v1-modal-window__icon"
 };
@@ -2382,7 +2382,7 @@ const _hoisted_5 = {
   key: 0,
   class: "ui-v1-modal-window__footer-text"
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "UiModalWindow",
   props: {
     /** Атрибут id корневого элемента модального окна. Должен быть уникальным на странице */
@@ -2496,7 +2496,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     });
     watch(() => props.opened, toggle);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$5, mergeProps({
+      return openBlock(), createBlock(_sfc_main$6, mergeProps({
         id: __props.id,
         opened: state.opened,
         closable: __props.closable,
@@ -2524,7 +2524,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               "ui-v1-modal-window__header_pinned": _ctx.$slots.title && state.scrolled && __props.appearance === unref(APPEARANCE).POPUP && !__props.responsive
             })
           }, [
-            __props.appearance === unref(APPEARANCE).ALERT ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
+            __props.appearance === unref(APPEARANCE).ALERT ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
               renderSlot(_ctx.$slots, "icon", {
                 overlapped: state.overlapped
               }, () => [
@@ -2553,7 +2553,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               })
             ])) : createCommentVNode("", true)
           ], 2),
-          __props.responsive ? (openBlock(), createBlock(_sfc_main$7, {
+          __props.responsive ? (openBlock(), createBlock(_sfc_main$8, {
             key: 0,
             class: "ui-v1-modal-window__content",
             "show-on-mac": "",
@@ -2586,12 +2586,12 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$1 = {
+const _hoisted_1$2 = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24"
 };
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$1, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1$2, _cache[0] || (_cache[0] = [
     createElementVNode("path", {
       fill: "currentColor",
       d: "m14.675 4.6.544-1.257a.99.99 0 0 0-.04-.911.82.82 0 0 0-.739-.421L9.5 2a.81.81 0 0 0-.704.423.99.99 0 0 0-.047.88l.55 1.26c.155.358.201.762.13 1.15l-.623 3.441a2.8 2.8 0 0 1-.685 1.426l-.875.96a.96.96 0 0 0-.246.646l.025.555c.002.502.373.91.83.912l8.312.025c.458 0 .828-.407.828-.909l.005-.536a.96.96 0 0 0-.248-.646l-.878-.964a2.85 2.85 0 0 1-.691-1.43l-.636-3.443a2 2 0 0 1 .128-1.15M10.967 20.047a3 3 0 0 1-.196-1.079l-.007-3.771 2.424.057.007 3.758a3 3 0 0 1-.193 1.079l-.638 1.632a.415.415 0 0 1-.382.277.42.42 0 0 1-.383-.279z"
@@ -2774,16 +2774,16 @@ const init = (locale, options = null) => localize(
   locale
 );
 const _i18n = {
-  fallback: "en-GB",
+  fallback,
   init
 };
-const _hoisted_1 = {
+const _hoisted_1$1 = {
   key: 0,
   class: "ui-v1-tag__icon"
 };
 const _hoisted_2 = { class: "ui-v1-tag__content-inner" };
 const _hoisted_3 = ["aria-label"];
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "UiTag",
   props: {
     /** Рамер */
@@ -2846,7 +2846,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           style: normalizeStyle(__props.background ? { background: __props.background } : {}),
           onMouseoverOnce: onHover
         }, [
-          _ctx.$slots["icon"] || __props.pinned ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          _ctx.$slots["icon"] || __props.pinned ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
             renderSlot(_ctx.$slots, "icon", {}, () => [
               createVNode(unref(IconPinned))
             ])
@@ -2888,7 +2888,7 @@ const useToolbarSize = () => inject(ToolbarInjectKeys.size, computed(
   () => "sm"
   /* SM */
 ));
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -2907,7 +2907,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -2964,7 +2964,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       return SIZE$4.SM;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$c, mergeProps({
+      return openBlock(), createBlock(_sfc_main$d, mergeProps({
         ref_key: "root",
         ref: root,
         href: __props.href,
@@ -2988,7 +2988,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -3037,7 +3037,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$a, mergeProps({
+      return openBlock(), createBlock(_sfc_main$b, mergeProps({
         href: __props.href,
         external: __props.external,
         appearance: __props.appearance,
@@ -3063,21 +3063,192 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const load = (document2, src) => new Promise((resolve, reject) => {
+  const script = document2.createElement("script");
+  script.async = true;
+  script.src = src;
+  script.onload = (event) => resolve(event);
+  script.onerror = (event, source, lineno, colno, error) => {
+    console.error(`Failed to load script from ${src}`, {
+      event,
+      source,
+      lineno,
+      colno,
+      error
+    });
+    reject(error);
+  };
+  const head = document2.head || document2.getElementsByTagName("head")[0];
+  head.appendChild(script);
+});
+const _hoisted_1 = { class: "ui-v1-yandex-map" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "UiYandexMap",
+  props: {
+    apiKey: {
+      type: String,
+      required: true
+    },
+    address: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: [
+    "change",
+    "update:address"
+  ],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const vueI18n = inject(I18nInjectKey);
+    const iframe = ref(null);
+    const getIFrameDocument = () => {
+      var _a;
+      return ((_a = iframe.value) == null ? void 0 : _a.contentDocument) ?? null;
+    };
+    const getIFrameWindow = () => {
+      var _a;
+      return ((_a = iframe.value) == null ? void 0 : _a.contentWindow) ?? null;
+    };
+    const getIFrameYMaps = () => {
+      const iframeWindow = getIFrameWindow();
+      if (iframeWindow && "ymaps3" in iframeWindow) {
+        return iframeWindow["ymaps3"];
+      }
+      return null;
+    };
+    const LOCATION = {
+      center: [37.64, 55.76],
+      zoom: 10
+    };
+    const waitIFrameContentLoaded = (retry = 5) => {
+      var _a;
+      if ((_a = iframe.value) == null ? void 0 : _a.contentDocument) {
+        return Promise.resolve();
+      }
+      if (retry <= 1) {
+        throw new Error("iframe contentDocument wasn't loaded");
+      }
+      return new Promise((resolve) => setTimeout(async () => {
+        await waitIFrameContentLoaded(retry--);
+        resolve(0);
+      }, 100));
+    };
+    const ready = ref(false);
+    const apiLocale = computed(() => ({
+      "en-GB": "en_US",
+      "es-ES": "en_US",
+      "ru-RU": "ru_RU"
+    })[(vueI18n == null ? void 0 : vueI18n.locale) ?? "en-GB"]);
+    const apiUrl = computed(() => `https://api-maps.yandex.ru/v3/?apikey=${props.apiKey}&lang=${apiLocale.value}`);
+    const apiUrlVersion = ref(0);
+    const getGeocodeApiUrl = (geocode) => `https://geocode-maps.yandex.ru/1.x/?apikey=${props.apiKey}&geocode=${geocode}&lang=${apiLocale.value}&format=json`;
+    function onDragEndHandler(coordinates) {
+      fetchAddressFromCoordinates(coordinates).then((address) => {
+        emit("change", address);
+        emit("update:address", address);
+      });
+    }
+    const fetchAddressFromCoordinates = async (coordinates) => {
+      var _a, _b, _c, _d, _e;
+      const response = await fetch(getGeocodeApiUrl(coordinates.toString()));
+      const result = await response.json();
+      return ((_e = (_d = (_c = (_b = (_a = result.response.GeoObjectCollection.featureMember[0]) == null ? void 0 : _a.GeoObject) == null ? void 0 : _b.metaDataProperty) == null ? void 0 : _c.GeocoderMetaData) == null ? void 0 : _d.Address) == null ? void 0 : _e.formatted) ?? "";
+    };
+    const fetchCoordinatesFromAddress = async (address) => {
+      var _a, _b;
+      const response = await fetch(getGeocodeApiUrl(address));
+      const result = await response.json();
+      return ((_b = (_a = result.response.GeoObjectCollection.featureMember[0]) == null ? void 0 : _a.GeoObject) == null ? void 0 : _b.Point.pos) ?? "";
+    };
+    const loadApi = async () => {
+      var _a;
+      await waitIFrameContentLoaded();
+      const iframeDocument = getIFrameDocument();
+      if (iframeDocument) {
+        const style = iframeDocument.createElement("style");
+        style.innerHTML = "body { margin: 0; }";
+        iframeDocument.head.appendChild(style);
+        await load(iframeDocument, apiUrl.value);
+        await ((_a = getIFrameYMaps()) == null ? void 0 : _a.ready);
+        const el = iframeDocument.createElement("div");
+        el.setAttribute("id", "map");
+        iframeDocument.body.appendChild(el);
+        ready.value = true;
+        const _ymaps3 = getIFrameYMaps();
+        const {
+          YMap,
+          YMapControls,
+          YMapDefaultFeaturesLayer,
+          YMapDefaultSchemeLayer
+        } = _ymaps3;
+        const { YMapZoomControl, YMapGeolocationControl } = await _ymaps3.import("@yandex/ymaps3-controls@0.0.1");
+        const { YMapDefaultMarker } = await _ymaps3.import("@yandex/ymaps3-markers@0.0.1");
+        if (props.address) {
+          const pos = await fetchCoordinatesFromAddress(props.address);
+          if (pos) {
+            LOCATION.center = pos.split(" ").map((c) => Number(c));
+          }
+        }
+        const map = new YMap(el, { location: LOCATION });
+        map.addChild(new YMapDefaultSchemeLayer({}));
+        map.addChild(new YMapControls({ position: "right" }).addChild(new YMapZoomControl({})));
+        map.addChild(new YMapDefaultFeaturesLayer({ id: "features" }));
+        map.addChild(new YMapControls({ position: "left" }).addChild(new YMapGeolocationControl({})));
+        const onDragMoveHandler = (coordinates) => {
+          const longitude = `Longitude: ${coordinates[0].toFixed(2)}`;
+          const latitude = `Latitude: ${coordinates[1].toFixed(2)}`;
+          draggableMarker.update({ coordinates, title: `${longitude} <br> ${latitude}` });
+        };
+        const draggableMarker = new YMapDefaultMarker({
+          coordinates: LOCATION.center,
+          draggable: true,
+          title: `Longitude: ${LOCATION.center[0].toFixed(2)} <br>
+              Latitude ${LOCATION.center[1].toFixed(2)}`,
+          onDragMove: onDragMoveHandler,
+          onDragEnd: onDragEndHandler
+        });
+        map.addChild(draggableMarker);
+      }
+    };
+    watch(apiUrl, async (newUrl, oldUrl) => {
+      if (iframe.value && newUrl !== oldUrl) {
+        ready.value = false;
+        apiUrlVersion.value++;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        !ready.value ? (openBlock(), createBlock(_sfc_main$9, { key: 0 })) : createCommentVNode("", true),
+        withDirectives((openBlock(), createElementBlock("iframe", {
+          ref_key: "iframe",
+          ref: iframe,
+          key: apiUrlVersion.value,
+          onLoad: loadApi
+        }, null, 32)), [
+          [vShow, ready.value]
+        ])
+      ]);
+    };
+  }
+});
 export {
   plugin as I18nPlugin,
   plugin$1 as ModalPlugin,
-  _sfc_main$c as UiButton,
-  _sfc_main$b as UiError,
-  _sfc_main$a as UiLink,
-  _sfc_main$8 as UiLoader,
-  _sfc_main$6 as UiModalSidebar,
-  _sfc_main$4 as UiModalWindow,
-  _sfc_main$5 as UiModalWindowSurface,
-  _sfc_main$7 as UiScrollBox,
-  _sfc_main$3 as UiTag,
-  _sfc_main$2 as UiToolbar,
-  _sfc_main$1 as UiToolbarButton,
-  _sfc_main as UiToolbarLink,
-  _sfc_main$9 as UiTransition,
+  _sfc_main$d as UiButton,
+  _sfc_main$c as UiError,
+  _sfc_main$b as UiLink,
+  _sfc_main$9 as UiLoader,
+  _sfc_main$7 as UiModalSidebar,
+  _sfc_main$5 as UiModalWindow,
+  _sfc_main$6 as UiModalWindowSurface,
+  _sfc_main$8 as UiScrollBox,
+  _sfc_main$4 as UiTag,
+  _sfc_main$3 as UiToolbar,
+  _sfc_main$2 as UiToolbarButton,
+  _sfc_main$1 as UiToolbarLink,
+  _sfc_main$a as UiTransition,
+  _sfc_main as UiYandexMap,
   VueI18n
 };

package/dist/remote.cjs

@@ -150,6 +150,11 @@ const UiToolbarLink = defineRemoteComponent(
 );
 const UiTransitionType = "UiTransition";
 const UiTransition = defineRemoteComponent(UiTransitionType);
+const UiYandexMapType = "UiYandexMap";
+const UiYandexMap = defineRemoteComponent(
+  UiYandexMapType,
+  ["change"]
+);
 exports.UiButton = UiButton;
 exports.UiButtonType = UiButtonType;
 exports.UiError = UiError;
@@ -174,3 +179,5 @@ exports.UiToolbarLink = UiToolbarLink;
 exports.UiToolbarLinkType = UiToolbarLinkType;
 exports.UiTransition = UiTransition;
 exports.UiTransitionType = UiTransitionType;
+exports.UiYandexMap = UiYandexMap;
+exports.UiYandexMapType = UiYandexMapType;

package/dist/remote.d.ts

@@ -389,6 +389,23 @@ declare type UiTransitionProps = {
 
 export declare const UiTransitionType: SchemaType_2<"UiTransition", RemoteProperties<UiTransitionProps>, Record<string, never>>;
 
+export declare const UiYandexMap: Component<    {
+[x: string]: unknown;
+}, RemoteProperties<UiYandexMapProperties>, {
+[x: string]: never;
+}, {
+[x: string]: never;
+}, MethodOptions, {
+change: (address: string) => boolean;
+}>;
+
+declare type UiYandexMapProperties = {
+    apiKey: string;
+    address?: string;
+};
+
+export declare const UiYandexMapType: SchemaType<"UiYandexMap", RemoteProperties<UiYandexMapProperties>, Record<string, never>>;
+
 declare enum VARIANT {
     DEFAULT = "default",
     SUCCESS = "success",

package/dist/remote.js

@@ -148,6 +148,11 @@ const UiToolbarLink = defineRemoteComponent(
 );
 const UiTransitionType = "UiTransition";
 const UiTransition = defineRemoteComponent(UiTransitionType);
+const UiYandexMapType = "UiYandexMap";
+const UiYandexMap = defineRemoteComponent(
+  UiYandexMapType,
+  ["change"]
+);
 export {
   UiButton,
   UiButtonType,
@@ -172,5 +177,7 @@ export {
   UiToolbarLink,
   UiToolbarLinkType,
   UiTransition,
-  UiTransitionType
+  UiTransitionType,
+  UiYandexMap,
+  UiYandexMapType
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@retailcrm/embed-ui-v1-components",
   "type": "module",
-  "version": "0.4.1-beta.1",
+  "version": "0.4.1-beta.3",
   "license": "MIT",
   "author": "RetailDriverLLC <integration@retailcrm.ru>",
   "repository": "git@github.com:retailcrm/embed-ui.git",
@@ -73,6 +73,7 @@
     "@storybook/vue3-vite": "^8.4.5",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vue/compiler-sfc": "^3.5.12",
+    "@yandex/ymaps3-types": "^0.0.21",
     "less": "^4.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",