From 698b9906367b58c315fb7649bf9ab140aa39918b Mon Sep 17 00:00:00 2001
From: Bazukevich Aliaksandr <abazukevich@exadel.net>
Date: Thu, 13 May 2021 09:55:19 +0300
Subject: [PATCH] refactor: patched preview plugin, minor fixes

---
 src/core/root.ts                                 |  2 ++
 src/preview/preview.less                         |  1 +
 src/preview/preview.ts                           | 16 +++++++++++-----
 .../setting/bool-setting/bool-setting.less       |  1 +
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/core/root.ts b/src/core/root.ts
index bb4898b5..b9c1da06 100644
--- a/src/core/root.ts
+++ b/src/core/root.ts
@@ -1,3 +1,4 @@
+import {bind} from '@exadel/esl';
 import {ESLBaseElement} from '@exadel/esl/modules/esl-base-element/core';
 import {EventUtils} from '@exadel/esl/modules/esl-utils/dom/events';
 
@@ -27,6 +28,7 @@ export class UIPRoot extends ESLBaseElement {
     this.removeEventListener('request:change', this._onStateChange);
   }
 
+  @bind
   protected _onStateChange(e: CustomEvent) {
     this._state = e.detail.markup;
     const detail = Object.assign({
diff --git a/src/preview/preview.less b/src/preview/preview.less
index 7f6e0571..5eabb2e1 100644
--- a/src/preview/preview.less
+++ b/src/preview/preview.less
@@ -3,6 +3,7 @@ uip-preview {
   height: max-content;
   width: max-content;
   max-width: 100%;
+
   .uip-preview-inner {
     display: block;
     height: 100vh;
diff --git a/src/preview/preview.ts b/src/preview/preview.ts
index 891ce8bb..759d4016 100644
--- a/src/preview/preview.ts
+++ b/src/preview/preview.ts
@@ -1,16 +1,22 @@
+import {memoize} from '@exadel/esl';
 import {bind} from '@exadel/esl/modules/esl-utils/decorators/bind';
 import {UIPPlugin} from '../core/plugin';
 
 export class UIPPreview extends UIPPlugin {
   static is = 'uip-preview';
 
+  @memoize()
+  get $inner() {
+    const $inner = document.createElement('div');
+    $inner.classList.add('uip-preview-inner');
+    return $inner;
+  }
+
   @bind
   protected handleChange(e: CustomEvent): void {
     const {markup} = e.detail;
-    const $inner = document.createElement('div');
-    $inner.classList.add('uip-preview-inner');
-    $inner.innerHTML = markup;
-    this.innerHTML = $inner.outerHTML;
+    this.$inner.innerHTML = markup;
+    this.innerHTML = '';
+    this.appendChild(this.$inner);
   }
 }
-
diff --git a/src/settings/setting/bool-setting/bool-setting.less b/src/settings/setting/bool-setting/bool-setting.less
index 42081d2f..3adfedf3 100644
--- a/src/settings/setting/bool-setting/bool-setting.less
+++ b/src/settings/setting/bool-setting/bool-setting.less
@@ -5,6 +5,7 @@ uip-bool-setting {
 
     input {
       margin-left: 3px;
+      width: 100%;
     }
   }