fix: toggle-switch layout and text #170

playground/toggle-switch/index.html

@@ -10,8 +10,8 @@
 
     <script id="translations" type="application/json" data-monster-role="translations">
         {
-            "toggle-switch-on": "an",
-            "toggle-switch-off": "aus"
+            "toggle-switch-on": "das ist ein wert für an",
+            "toggle-switch-off": "und für aus baumhaus"
         }
     </script>
 
@@ -28,7 +28,10 @@
         <div class="container">
             <form class="monster-form">
                 <label>monster-switch
-                    <monster-toggle-switch id="monsterToggleSwitch" name="agb" ></monster-toggle-switch>
+                    <div style="display: inline-block;width: 200px"><monster-toggle-switch id="monsterToggleSwitch" name="agb" ></monster-toggle-switch></div>
+                </label>
+                <label>monster-switch
+                    <input type="text" id="monsterToggleSwitch2" name="agb" />
                 </label>
                 <button>Submit</button>
             </form>

playground/toggle-switch/main.pcss

 @import"../../source/components/style/mixin/form.pcss";
 
 
-.container{
-    font-size: 12px;
-    display: flex;
-    flex-direction: column;
-}
-

source/components/form/style/toggle-switch.pcss

@@ -5,70 +5,79 @@
 [data-monster-role=control] {
 
     font-family: inherit;
-  font-size: 100%;
-  padding: 0.4rem 0.6rem;
+    font-size: inherit;
+    
     margin: 0;
     outline: none;
     box-sizing: border-box;
-}
 
-[data-monster-role=control]:focus {
+    &:focus {
         outline: 1px dashed var(--monster-color-selection-3);
         outline-offset: 2px;
     }
 
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 60px;
-  height: 34px;
 
+    & .switch {
+        position: relative;
+        height: 2.5em;
         border-color: var(--monster-bg-color-primary-3);
         border-width: thin;
         border-style: var(--monster-border-style);
         transition: background-color 0.2s;
-  display: grid;
+        display: inline-grid;
         grid-template-columns: 1fr 1fr;
+        box-sizing: border-box;
+        width: 100%;
+        
     }
 
-.switch-radio input[type="radio"] {
+    & .switch-radio input[type="radio"] {
         display: none;
     }
 
-.label{
-    height: 34px;
+    & .label {
+        max-width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        height: 2.5em;
         display: block;
         text-align: center;
-    line-height: 34px;
+        line-height: 2.5em;
         user-select: none;
+        padding: 0 0.2em;
     }
 
-.switch-slider {
+    & .switch-slider {
         position: absolute;
         top: 4px;
         bottom: 4px;
         left: 4px;
-  right: 28px;
+        right: 4px;
+        width: calc(50% - 4px);
         background-color: var(--monster-bg-color-primary-4);
         transition: 0.2s;
     }
 
-.switch[data-monster-state="on"] .label.off  {
+    & .switch[data-monster-state="on"] .label.off {
         visibility: hidden;
     }
-.switch[data-monster-state="on"] .label.on  {
+
+    & .switch[data-monster-state="on"] .label.on {
         visibility: visible;
     }
-.switch[data-monster-state="off"] .label.off  {
+
+    & .switch[data-monster-state="off"] .label.off {
         visibility: visible;
     }
-.switch[data-monster-state="off"] .label.on  {
+
+    & .switch[data-monster-state="off"] .label.on {
         visibility: hidden;
     }
 
 
-.switch[data-monster-state="on"] .switch-slider  {
-  transform: translateX(24px);
+    & .switch[data-monster-state="on"] .switch-slider {
+        transform: translateX(100%);
 
     }
-
+}

source/components/form/toggle-switch.mjs

@@ -186,7 +186,7 @@ class ToggleSwitch extends CustomControl {
 	 *
 	 * @return {function}
 	 */
-	[updaterTransformerMethodsSymbol]() {;
+	[updaterTransformerMethodsSymbol]() {
 		return {
 			"state-callback": (Wert) => {
 				return this.state;
@@ -195,7 +195,7 @@ class ToggleSwitch extends CustomControl {
 	}
 
 	/**
-	 * @return [ToggleSwitchStyleSheet]
+	 * @return [CSSStyleSheet]
 	 */
 	static getCSSStyleSheet() {
 		return [ToggleSwitchStyleSheet];
@@ -417,13 +417,12 @@ function getTemplate() {
 	// language=HTML
 	return `
         <div data-monster-role="control" part="control" tabindex="0">
-     
-            <div class="switch" data-monster-role="switch" data-monster-attributes="data-monster-state path:value | call:state-callback " >
+            <div class="switch" data-monster-role="switch"
+                 data-monster-attributes="data-monster-state path:value | call:state-callback">
                 <div class="label on" data-monster-replace="path:labels.toggle-switch-on"></div>
                 <div class="label off" data-monster-replace="path:labels.toggle-switch-off"></div>
                 <div class="switch-slider"></div>
             </div>
-
         </div>`;
 }