Updated hidden property

Author: djthorpe

src/app/CanvasElement.js

@@ -87,7 +87,12 @@ export class CanvasElement extends LitElement {
       /* Flex containers stretch */
       ::slotted(wc-canvas-section[flex]) {
         flex: 999 0;
-        overflow: auto;
+        overflow: auto;        
+      }
+
+      /* Hidden navbars are hidden */
+      ::slotted(wc-canvas-navbar[hidden]) {
+        display: none;
       }
 
       /* Light theme setting colours and border widths */

src/app/CanvasNavbarElement.js

@@ -33,11 +33,7 @@ export class CanvasNavbarElement extends CanvasSectionElement {
   }
 
   static get styles() {
-    return css`
-    .hidden {
-      display: none;        
-    }
-    `;
+    return css``;
   }
 
   render() {

src/form/FormControlElement.js

@@ -58,31 +58,36 @@ export class FormControlElement extends LitElement {
       :host {
         display: inline-block;
         flex-shrink: 0;
-        padding-left: var(--form-switch-padding-x);
-        padding-right: var(--form-switch-padding-x);
+        padding: var(--form-control-padding-y) var(--form-control-padding-x);
       }
-      input {
-        width: var(--form-switch-width);
-        height: var(--form-switch-height);
-        border-radius: var(--form-switch-border-radius);
-        vertical-align: middle;
-        appearance: none;
-        transition: background-position .15s ease-in-out;
-        background-image: var(--form-switch-background-image);
-        background-color: var(--form-switch-background-color);
-        background-repeat: no-repeat;
-        background-position: left center;
-        background-size: contain;
+      label {
+        cursor: pointer;
+        user-select: none;
       }
-      input:checked {
-        background-position: right center;
+      label.switch {        
+        & input {
+          width: var(--form-switch-width);
+          height: var(--form-switch-height);
+          border-radius: var(--form-switch-border-radius);
+          vertical-align: middle;
+          appearance: none;
+          transition: background-position var(--form-switch-transition) ease-in-out;
+          background-image: var(--form-switch-background-image);
+          background-color: var(--form-switch-background-color);
+          background-repeat: no-repeat;
+          background-position: left center;
+          background-size: contain;          
+        }
+        & input:checked {
+          background-position: right center;
+        }
       }
     `;
   }
 
   render() {
     return html`
-      <label class=${this.className || nothing}>
+      <label class=${this.classes.join(' ') || nothing}>
         <input 
           name=${this.name || nothing} 
           value=${this.value || nothing} 
@@ -106,11 +111,6 @@ export class FormControlElement extends LitElement {
     return classes;
   }
 
-  // Return class name for the classes
-  get className() {
-    return this.classes.join(' ');
-  }
-
   // Form control properties
   get form() { return this.internals ? this.internals.form : null; }
 

src/form/FormSwitchElement.js

@@ -14,7 +14,6 @@ export class FormSwitchElement extends FormControlElement {
     return 'wc-form-switch';
   }
 
-
   constructor() {
     super();
 
@@ -46,6 +45,14 @@ export class FormSwitchElement extends FormControlElement {
     `;
   }
 
+  // Return classes for the switch control
+  get classes() {
+    const classes = super.classes;
+    classes.push('switch');
+    return classes;
+  }
+
+  // Change the selected state when the input is changed
   onInput(event) {
     if (!this.disabled) {
       this.selected = event.target.checked;

src/form/form.css

@@ -1,10 +1,15 @@
 /* Theme variables go here */
 :root {
-    --form-switch-padding-x: 0.5em;
+    /* General controls */
+    --form-control-padding-x: 0.5em;
+    --form-control-padding-y: 0.1em;
+
+    /* Switches */
     --form-switch-width: 2.5em;
     --form-switch-height: 1.5em;
-    --form-switch-color: var(--primary-color);
+    --form-switch-color: var(--primary-color); /* TODO: Does not work with the SVG yet */
     --form-switch-background-color: var(--control-color);
     --form-switch-border-radius: var(--form-switch-width);
-    --form-switch-background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8' fill='currentColor'><circle r='3'/></svg>")
+    --form-switch-background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8' fill='currentColor'><circle r='3'/></svg>");
+    --form-switch-transition: 300ms;
 }

src/index.html

@@ -37,6 +37,13 @@
                         document.querySelector('wc-nav-group').removeAttribute('vertical');
                     }
                 });
+                document.querySelector('wc-form-switch#end').addEventListener('change', (e) => {
+                    if (e.target.selected) {
+                        document.querySelector('wc-canvas-navbar#end').setAttribute('hidden',true);
+                    } else {
+                        document.querySelector('wc-canvas-navbar#end').removeAttribute('hidden');
+                    }
+                });
             </script>
         </wc-canvas-navbar>
         <wc-canvas-section flex>
@@ -110,7 +117,7 @@ <h1>Code</h1>
                 console.log('hello');
             </wc-code>
         </wc-canvas-section>
-        <wc-canvas-navbar>END</wc-canvas-navbar>
+        <wc-canvas-navbar id="end">END</wc-canvas-navbar>
     </wc-canvas>
 </body>