Updated

Author: djthorpe

src/app/CardElement.js

@@ -7,6 +7,7 @@ import { LitElement, html, css, nothing } from 'lit';
  *
  * @property {String} backgroundColor - The color theme of the card, default light
  * @property {Number} width - The width of the card in 1/12th of the available space
+ * @property {Boolean} hidden - Whether the card is hidden, default false
  *
  * @example
  * <wc-card-group>
@@ -26,20 +27,17 @@ export class CardElement extends LitElement {
     // Default properties
     this.backgroundColor = 'light';
     this.width = 0;
+    this.hidden = false;
   }
 
   static get properties() {
     return {
       backgroundColor: { type: String, attribute: true },
       width: { type: Number, attribute: true },
+      hidden: { type: Boolean, attribute: true },
     };
   }
 
-  static get styles() {
-    return css`
-    `;
-  }
-
   render() {
     this.style.maxWidth = `${this.flexBasis}`;
     this.style.flexBasis = `${this.flexBasis}`;

src/app/CardGroupElement.js

@@ -27,6 +27,11 @@ export class CardGroupElement extends LitElement {
         flex-wrap: wrap;
       }
 
+      /* Hidden Cards */
+      ::slotted(wc-card[hidden]) {
+        display: none;
+      }
+
       /* Colours */
       ::slotted(wc-card) {
         position: relative;

src/app/NavGroupElement.js

@@ -1,5 +1,5 @@
 import { LitElement, html, css, nothing } from 'lit';
-import { Event } from '../core/Event';
+import { EventType } from '../core/Event';
 
 /**
  * @class NavGroupElement
@@ -119,7 +119,7 @@ export class NavGroupElement extends LitElement {
   onClick(event) {
     const target = event.target.closest('wc-nav-item');
     if (target && !target.disabled) {
-      this.dispatchEvent(new CustomEvent(Event.CLICK, {
+      this.dispatchEvent(new CustomEvent(EventType.CLICK, {
         bubbles: true,
         composed: true,
         detail: target.name || target.textContent.trim(),

src/app/app.css

@@ -24,4 +24,5 @@
     --card-padding-x: 0.4em;
     --card-padding-y: 0.4em;
     --card-border-radius: var(--border-radius);
+    --card-transition-delay: 300ms;
 }

src/button/ButtonElement.js

@@ -1,4 +1,5 @@
 import { LitElement, html, css, nothing } from 'lit';
+import { EventType } from '../core/Event';
 
 /**
  * @class ButtonElement
@@ -104,23 +105,23 @@ export class ButtonElement extends LitElement {
 
   renderButton() {
     return html`
-      <button class=${this.classes.join(' ') || nothing} ?disabled=${this.disabled} name=${this.name || nothing} value=${this.buttonTitle || nothing}>
+      <button class=${this.classes.join(' ') || nothing} ?disabled=${this.disabled} name=${this.name || nothing} value=${this.buttonTitle || nothing} @click=${this.onClick}>
         <slot></slot>
       </button>
     `;
   }
 
   renderSubmit() {
     return html`
-      <button class=${this.classes.join(' ') || nothing} type="submit" ?disabled=${this.disabled} name=${this.name || nothing} value=${this.buttonTitle || nothing}><slot></slot></button>
+      <button class=${this.classes.join(' ') || nothing} type="submit" ?disabled=${this.disabled} name=${this.name || nothing} value=${this.buttonTitle || nothing} @click=${this.onClick}><slot></slot></button>
     `;
   }
 
   renderControl() {
     const icon = this.controlButtonIcon;
     if (icon) {
       return html`
-        <button class=${this.classes.join(' ') || nothing} ?disabled=${this.disabled} name=${this.name || nothing} value=${this.buttonTitle || nothing}>
+        <button class=${this.classes.join(' ') || nothing} ?disabled=${this.disabled} name=${this.name || nothing} value=${this.buttonTitle || nothing} @click=${this.onClick}>
           <wc-icon name=${icon}></wc-icon>
         </button>
       `;
@@ -138,4 +139,15 @@ export class ButtonElement extends LitElement {
         return this.renderButton();
     }
   }
+
+  // Change the selected state when the input is changed
+  onClick() {
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent(EventType.CLICK, {
+        bubbles: true,
+        composed: true,
+        detail: this.name || this.buttonTitle,
+      }));
+    }
+  }
 }

src/button/button.css

@@ -34,6 +34,6 @@
     --button-control-color-disabled: var(--control-color-disabled);
 
     /* control button group */
-    --control-button-group-margin-y: 0.3em;
+    --control-button-group-margin-y: 0.45em;
     --control-button-group-margin-x: 0.3em;
 }

src/core/Event.js

@@ -3,7 +3,7 @@
  * @readonly
  * @enum {String}
  */
-export const Event = {
+export const EventType = {
   CHANGE: 'wc-change',
   CLICK: 'wc-click',
   EVENT_CLICK: 'ws-click',

src/form/FormSelectElement.js

@@ -1,6 +1,6 @@
 import { html, css, nothing } from 'lit';
 import { FormControlElement } from './FormControlElement';
-import { Event } from '../core/Event';
+import { EventType } from '../core/Event';
 /**
  * @class FormSelectElement
  *
@@ -60,7 +60,7 @@ export class FormSelectElement extends FormControlElement {
   // Change the selected state when the input is changed
   onInput(event) {
     if (super.onInput(event)) {
-      this.dispatchEvent(new CustomEvent(Event.CHANGE, {
+      this.dispatchEvent(new CustomEvent(EventType.CHANGE, {
         bubbles: true,
         composed: true,
         detail: this.value,

src/form/FormSwitchElement.js

@@ -1,6 +1,6 @@
 import { html, nothing } from 'lit';
 import { FormControlElement } from './FormControlElement';
-import { Event } from '../core/Event';
+import { EventType } from '../core/Event';
 
 /**
  * @class FormSwitchElement
@@ -56,7 +56,7 @@ export class FormSwitchElement extends FormControlElement {
   onInput(event) {
     if (super.onInput(event)) {
       this.selected = event.target.checked;
-      this.dispatchEvent(new CustomEvent(Event.CHANGE, {
+      this.dispatchEvent(new CustomEvent(EventType.CHANGE, {
         bubbles: true,
         composed: true,
         detail: this.name || this.textContent.trim(),

src/index.html

@@ -102,9 +102,9 @@ <h4>Card</h4>
                     </script>
                 </wc-card>
                 <wc-card>
-                    <wc-control-button-group name="controls">
-                        <wc-button type="control">Close</wc-button>
-                        <wc-button type="control" disabled>Help</wc-button>
+                    <wc-control-button-group id="controls" name="controls">
+                        <wc-button name="close" type="control">Close</wc-button>
+                        <wc-button name="help" type="control" disabled>Help</wc-button>
                     </wc-control-button-group>
                     <h1>Header</h1>
                     <h2>Subtitle</h2>
@@ -113,6 +113,14 @@ <h2>Subtitle</h2>
                         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                         voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
                         non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <script>
+                        document.querySelector('wc-control-button-group#controls').addEventListener('wc-click', (e) => {
+                            var card = e.target.closest('wc-card');
+                            if(card) {
+                                card.setAttribute('hidden', true);
+                            }
+                        });
+                    </script>
                 </wc-card>
                 <wc-card backgroundColor="success" width="12">
                     <wc-control-button-group name="controls">