From 0d4f9b9fc590e5b048c9b5fee8a61a64d2d65b75 Mon Sep 17 00:00:00 2001
From: Goldman Kim <bbalganjjm@gmail.com>
Date: Thu, 27 Jun 2024 17:20:51 +0900
Subject: [PATCH] Bug fixes.

---
 .../static/html/com/app/sample/type0201.html  |  4 +-
 .../static/html/com/app/sample/type0401.html  |  4 +-
 .../static/html/com/app/sample/type0402.html  |  4 +-
 .../static/html/com/app/sample/type0501.html  |  4 +-
 .../static/html/com/app/sample/type0601.html  |  4 +-
 .../static/js/natural_js/css/natural.ui.css   | 75 ++++++++-----------
 6 files changed, 40 insertions(+), 55 deletions(-)

diff --git a/src/main/resources/static/html/com/app/sample/type0201.html b/src/main/resources/static/html/com/app/sample/type0201.html
index 0320213..d05f901 100644
--- a/src/main/resources/static/html/com/app/sample/type0201.html
+++ b/src/main/resources/static/html/com/app/sample/type0201.html
@@ -65,9 +65,9 @@
                 </select></td>
                 <td rowspan="2" style="text-align: center;"><input id="age" type="text" data-validate='[["required"], ["integer"]]'></td>
                 <td><input id="registered" type="text" data-format='[["date", 8, "date"]]' data-validate='[["required"]]'></td>
-                <td style="text-align: center; line-height: 0;"><label class="toggle-switch">
+                <td style="text-align: center; line-height: 0;"><label class="switch__">
                     <input id="isActive" type="checkbox">
-                    <span class="slider"></span>
+                    <span class="switch_slider__"></span>
                 </label></td>
             </tr>
             <tr>
diff --git a/src/main/resources/static/html/com/app/sample/type0401.html b/src/main/resources/static/html/com/app/sample/type0401.html
index d4e7e69..0930678 100644
--- a/src/main/resources/static/html/com/app/sample/type0401.html
+++ b/src/main/resources/static/html/com/app/sample/type0401.html
@@ -134,9 +134,9 @@
                 </li>
                 <li>
                     <label for="isActive"><span>Active</span></label>
-                    <label class="toggle-switch">
+                    <label class="switch__">
                         <input id="isActive" type="checkbox">
-                        <span class="slider"></span>
+                        <span class="switch_slider__"></span>
                     </label>
                 </li>
                 <li>
diff --git a/src/main/resources/static/html/com/app/sample/type0402.html b/src/main/resources/static/html/com/app/sample/type0402.html
index 090749b..bf07144 100644
--- a/src/main/resources/static/html/com/app/sample/type0402.html
+++ b/src/main/resources/static/html/com/app/sample/type0402.html
@@ -141,9 +141,9 @@
             </li>
             <li>
                 <label for="isActive"><span>Active</span></label>
-                <label class="toggle-switch">
+                <label class="switch__">
                     <input id="isActive" type="checkbox">
-                    <span class="slider"></span>
+                    <span class="switch_slider__"></span>
                 </label>
             </li>
             <li>
diff --git a/src/main/resources/static/html/com/app/sample/type0501.html b/src/main/resources/static/html/com/app/sample/type0501.html
index c5c4890..da64642 100644
--- a/src/main/resources/static/html/com/app/sample/type0501.html
+++ b/src/main/resources/static/html/com/app/sample/type0501.html
@@ -140,9 +140,9 @@
                 </li>
                 <li>
                     <label for="isActive"><span>Active</span></label>
-                    <label class="toggle-switch">
+                    <label class="switch__">
                         <input id="isActive" type="checkbox">
-                        <span class="slider"></span>
+                        <span class="switch_slider__"></span>
                     </label>
                 </li>
                 <li>
diff --git a/src/main/resources/static/html/com/app/sample/type0601.html b/src/main/resources/static/html/com/app/sample/type0601.html
index cc18687..d51a0ce 100644
--- a/src/main/resources/static/html/com/app/sample/type0601.html
+++ b/src/main/resources/static/html/com/app/sample/type0601.html
@@ -87,9 +87,9 @@
                         </select></td>
                         <td style="text-align: center;"><input id="age" type="text" data-validate='[["required"],["integer"]]'></td>
                         <td><input id="registered" type="text" data-format='[["date",8,"date"]]' data-validate='[["required"]]'></td>
-                        <td style="text-align: center; line-height: 0;"><label class="toggle-switch">
+                        <td style="text-align: center; line-height: 0;"><label class="switch__">
                             <input id="isActive" type="checkbox">
-                            <span class="slider"></span>
+                            <span class="switch_slider__"></span>
                         </label></td>
                         <td><textarea id="about" style="min-width: 500px; min-height: 100px;"></textarea></td>
                         <td><textarea id="greeting"></textarea></td>
diff --git a/src/main/resources/static/js/natural_js/css/natural.ui.css b/src/main/resources/static/js/natural_js/css/natural.ui.css
index a14f667..8289da0 100644
--- a/src/main/resources/static/js/natural_js/css/natural.ui.css
+++ b/src/main/resources/static/js/natural_js/css/natural.ui.css
@@ -1815,77 +1815,62 @@ a.btn_elevated__, input[type='button'].btn_elevated__, button.btn_elevated__ {
     background-color: var(--md-sys-color-surface-container-highest);
 }
 
-/* Checkbox toggle switch */
-/**
-HTML Template & variables
-<label class="toggle-switch" style="
-    --njs-toggle-switch-height: ${height};
-    --njs-toggle-switch-width: ${width};
-    --njs-toggle-switch-padding: ${padding};
-    --njs-toggle-switch-height: ${height};
-    --njs-toggle-switch-on-content: ${on-content};
-    --njs-toggle-switch-off-content: ${off-content};
-    --njs-toggle-switch-font-size: ${font-size};
-    ">
-    <input id="${id}" type="checkbox">
-    <span class="slider"></span>
-</label>
- */
-.toggle-switch {
-    --njs-toggle-switch-height: 27px;
-    --njs-toggle-switch-width: calc(var(--njs-toggle-switch-height) * 2);
-    --njs-toggle-switch-padding: calc(var(--njs-toggle-switch-height) / 7);
-    --njs-toggle-switch-on-content: "ON";
-    --njs-toggle-switch-off-content: "OFF";
+/* Switch */
+.switch__ {
+    --njs-switch-height: 27px;
+    --njs-switch-width: calc(var(--njs-switch-height) * 2);
+    --njs-switch-padding: calc(var(--njs-switch-height) / 7);
+    --njs-switch-on-content: "ON";
+    --njs-switch-off-content: "OFF";
     display: inline-block;
     position: relative;
-    height: var(--njs-toggle-switch-height);
-    width: var(--njs-toggle-switch-width);
+    height: var(--njs-switch-height);
+    width: var(--njs-switch-width);
 }
-.toggle-switch input {
+.switch__ input {
     display: none;
 }
-.toggle-switch .slider {
+.switch__ .switch_slider__ {
     display: flex;
-    height: var(--njs-toggle-switch-height);
-    padding: var(--njs-toggle-switch-padding);
+    height: var(--njs-switch-height);
+    padding: var(--njs-switch-padding);
     cursor: pointer;
     background-color: var(--md-sys-color-primary-container);
     transition: left var(--njs-motion-duration-fast) ease, background-color var(--njs-motion-duration-fast) ease;
     border-radius: 999999px;
 }
-.toggle-switch .slider:before {
+.switch__ .switch_slider__:before {
     content: "";
     position: absolute;
     display: inline-block;
-    height: calc(var(--njs-toggle-switch-height) - (var(--njs-toggle-switch-padding) * 2));
-    width: calc(var(--njs-toggle-switch-height) - (var(--njs-toggle-switch-padding) * 2));
+    height: calc(var(--njs-switch-height) - (var(--njs-switch-padding) * 2));
+    width: calc(var(--njs-switch-height) - (var(--njs-switch-padding) * 2));
     background-color: var(--md-sys-color-inverse-on-surface);
     transition: var(--njs-motion-duration-normal);
-    left: var(--njs-toggle-switch-padding);
+    left: var(--njs-switch-padding);
     border-radius: 999999px;
 }
-.toggle-switch input:checked+.slider {
+.switch__ input:checked+.switch_slider__ {
     background-color: var(--md-sys-color-primary);
 }
-.toggle-switch input:checked+.slider:before {
-    left: calc(var(--njs-toggle-switch-width) - (var(--njs-toggle-switch-height) - var(--njs-toggle-switch-padding)));
+.switch__ input:checked+.switch_slider__:before {
+    left: calc(var(--njs-switch-width) - (var(--njs-switch-height) - var(--njs-switch-padding)));
 }
-.toggle-switch .slider::after {
-    content: var(--njs-toggle-switch-off-content);
+.switch__ .switch_slider__::after {
+    content: var(--njs-switch-off-content);
     display: inline-block;
     position: absolute;
     text-align: center;
-    line-height: calc(var(--njs-toggle-switch-height) - (var(--njs-toggle-switch-padding) * 2));
-    height: calc(var(--njs-toggle-switch-height) - (var(--njs-toggle-switch-padding) * 2));
-    width: calc(var(--njs-toggle-switch-width) - (var(--njs-toggle-switch-height) + (var(--njs-toggle-switch-padding) * 2)));
-    right: calc(var(--njs-toggle-switch-padding) * 2);
+    line-height: calc(var(--njs-switch-height) - (var(--njs-switch-padding) * 2));
+    height: calc(var(--njs-switch-height) - (var(--njs-switch-padding) * 2));
+    width: calc(var(--njs-switch-width) - (var(--njs-switch-height) + (var(--njs-switch-padding) * 2)));
+    right: calc(var(--njs-switch-padding) * 2);
     color: var(--md-sys-color-on-primary-container);
     white-space: nowrap;
-    font-size: var(--njs-toggle-switch-font-size, calc((var(--njs-toggle-switch-height) / 2) - (var(--njs-toggle-switch-padding) / 1.3)));
+    font-size: var(--njs-switch-font-size, calc((var(--njs-switch-height) / 2) - (var(--njs-switch-padding) / 1.3)));
 }
-.toggle-switch input:checked+.slider::after {
-    content: var(--njs-toggle-switch-on-content);
-    left: calc(var(--njs-toggle-switch-padding) * 2);
+.switch__ input:checked+.switch_slider__::after {
+    content: var(--njs-switch-on-content);
+    left: calc(var(--njs-switch-padding) * 2);
     color: var(--md-sys-color-on-primary);
 }
\ No newline at end of file