From 1350c55bf951daa4e912861e9f3b477ea8f1f593 Mon Sep 17 00:00:00 2001
From: dunks184 <13901837+undefined@users.noreply.github.com>
Date: Tue, 26 Apr 2022 00:56:43 +0000
Subject: [PATCH] Push from patch/encapsulate

---
 src/{app.css => animatedHideableDiv.css} |  0
 src/animatedHideableDiv.html             | 11 ++++++++
 src/animatedHideableDiv.js               | 35 ++++++++++++++++++++++++
 src/app.html                             | 10 +------
 4 files changed, 47 insertions(+), 9 deletions(-)
 rename src/{app.css => animatedHideableDiv.css} (100%)
 create mode 100644 src/animatedHideableDiv.html
 create mode 100644 src/animatedHideableDiv.js

diff --git a/src/app.css b/src/animatedHideableDiv.css
similarity index 100%
rename from src/app.css
rename to src/animatedHideableDiv.css
diff --git a/src/animatedHideableDiv.html b/src/animatedHideableDiv.html
new file mode 100644
index 0000000..025d21c
--- /dev/null
+++ b/src/animatedHideableDiv.html
@@ -0,0 +1,11 @@
+<template>
+  <lightning-input type="toggle" label="Same address as above?" onchange={handleToggle}
+      message-toggle-active="Address values will be obtained from Office fields on submit"
+      message-toggle-inactive="Fill out this section with new information">
+    </lightning-input>
+    <div class="box open" ontransitionstart={handleTransitionStart} ontransitionend={handleTransitionEnd}>
+      <template if:true={areFieldsVisible}>
+        <c-address-fields></c-address-fields>
+      </template>
+    </div>
+  </template>
\ No newline at end of file
diff --git a/src/animatedHideableDiv.js b/src/animatedHideableDiv.js
new file mode 100644
index 0000000..200641a
--- /dev/null
+++ b/src/animatedHideableDiv.js
@@ -0,0 +1,35 @@
+import { LightningElement } from "lwc";
+
+export default class AnimatedHideableDiv extends LightningElement {
+
+  isSameAsAbove = false;
+  areFieldsVisible = true;
+
+  handleToggle(event) {
+    this.isSameAsAbove = event.target.checked;
+    let box = this.template.querySelector('.box');
+    box.className = this.isSameAsAbove ? "box closed" : "box open";
+  }
+
+  handleClick() {
+    this.template.querySelectorAll('lightning-input').forEach(field => {
+      console.log(field.label);
+    });
+  }
+
+  
+
+  handleTransitionStart(event) {
+    const state = event.target.className;
+    if (state === 'box open') {
+      this.areFieldsVisible = true;
+    }
+  }
+  handleTransitionEnd(event) {
+    const state = event.target.className;
+    if (state === 'box closed') {
+      this.areFieldsVisible = false;
+    }
+  }
+
+}
\ No newline at end of file
diff --git a/src/app.html b/src/app.html
index 4d5e52e..0204a9a 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,13 +1,5 @@
 <template>
-	<lightning-input type="toggle" label="Same address as above?" onchange={handleToggle}
-		message-toggle-active="Address values will be obtained from Office fields on submit"
-		message-toggle-inactive="Fill out this section with new information">
-	</lightning-input>
-	<div class="box open" ontransitionstart={handleTransitionStart} ontransitionend={handleTransitionEnd}>
-		<template if:true={areFieldsVisible}>
-			<c-address-fields></c-address-fields>
-		</template>
-	</div>
+	<c-animated-hideable-div></c-animated-hideable-div>
 	<div>
 		<lightning-layout multiple-rows>
 			<lightning-layout-item padding="horizontal-small" size="6">