From c714aade4a89a697a8bf587415bae8a52fbcbafd Mon Sep 17 00:00:00 2001
From: Aliaksandr Bazukevich <aliaksandr.bazukevich@hp.com>
Date: Tue, 15 Nov 2022 09:51:26 +0100
Subject: [PATCH] feat: added optional resizable attribute for preview

---
 pages/views/examples/example/form.njk       |  2 +-
 pages/views/examples/example/playground.njk |  2 +-
 src/core/preview/preview.less               |  5 ++++-
 src/core/preview/preview.ts                 | 15 +++++++++++++++
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/pages/views/examples/example/form.njk b/pages/views/examples/example/form.njk
index 7385694b..a32f7bbe 100644
--- a/pages/views/examples/example/form.njk
+++ b/pages/views/examples/example/form.njk
@@ -21,7 +21,7 @@ title: Example with form
       <input type="submit" value="Send">
     </form>
   </script>
-  <uip-preview class="centered-content"></uip-preview>
+  <uip-preview class="centered-content" resizable></uip-preview>
   <uip-settings target=".demo-form">
     <uip-bool-setting label="Email validation" target="#email" mode="append" attribute="class" value="validation-input"></uip-bool-setting>
   </uip-settings>
diff --git a/pages/views/examples/example/playground.njk b/pages/views/examples/example/playground.njk
index 0b3f5f6a..a3b6353e 100644
--- a/pages/views/examples/example/playground.njk
+++ b/pages/views/examples/example/playground.njk
@@ -44,7 +44,7 @@ title: Example with playground
       <div class="user-card aqua-user">Marina</div>
     </div>
   </script>
-  <uip-preview></uip-preview>
+  <uip-preview resizable></uip-preview>
   <uip-settings target=".user-list">
   </uip-settings>
   <uip-editor></uip-editor>
diff --git a/src/core/preview/preview.less b/src/core/preview/preview.less
index 3e5fb8a3..fb790df9 100644
--- a/src/core/preview/preview.less
+++ b/src/core/preview/preview.less
@@ -7,7 +7,10 @@
     max-width: 100%;
     max-height: 100%;
     overflow: auto;
-    resize: both;
+
+    &.resizable {
+      resize: both;
+    }
   }
 
   &.centered-content {
diff --git a/src/core/preview/preview.ts b/src/core/preview/preview.ts
index f054c772..b84b31ba 100644
--- a/src/core/preview/preview.ts
+++ b/src/core/preview/preview.ts
@@ -7,6 +7,7 @@ import {UIPPlugin} from '../base/plugin';
  */
 export class UIPPreview extends UIPPlugin {
   static is = 'uip-preview';
+  static observedAttributes: string[] = ['resizable'];
 
   @bind
   protected _onRootStateChange(): void {
@@ -19,4 +20,18 @@ export class UIPPreview extends UIPPlugin {
     if (this.$inner.parentElement === this) this.removeChild(this.$inner);
     super.disconnectedCallback();
   }
+
+  protected attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
+    if (attrName === 'resizable' && newVal === null) {
+      this.clearInlineSize();
+      this.$inner.classList.remove('resizable');
+    } else {
+      this.$inner.classList.add('resizable');
+    }
+  }
+
+  protected clearInlineSize() {
+    this.$inner.style.removeProperty('height');
+    this.$inner.style.removeProperty('width');
+  }
 }