@aquera/nile-elements 0.0.6-11 → 0.0.6-12

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.6-11",
+  "version": "0.0.6-12",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-button-toggle/nile-button-toggle.css.ts

@@ -49,6 +49,10 @@ export const styles = css`
   .nile-button-toggle__active {
     background-color: #c7ced4;
   }
+
+  .nile-button-toggle__disabled {
+    cursor: not-allowed;
+  }
 `;
 
 export default [styles];

package/src/nile-button-toggle/nile-button-toggle.ts

@@ -8,6 +8,7 @@
 import {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
 import { customElement } from 'lit/decorators.js';
 import {styles} from './nile-button-toggle.css';
+import NileElement from '../internal/nile-element';
 
 /**
  * Nile icon component.
@@ -16,7 +17,7 @@ import {styles} from './nile-button-toggle.css';
  *
  */
 @customElement('nile-button-toggle')
-export class NileButtonToggle extends LitElement {
+export class NileButtonToggle extends NileElement {
 
 	/**
 	 * The styles for ButtonToggle
@@ -38,6 +39,9 @@ export class NileButtonToggle extends LitElement {
   @property({ type: Boolean, reflect: true })
   end = false;
 
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
   @property({ type: String })
   value = '';
 
@@ -52,10 +56,10 @@ export class NileButtonToggle extends LitElement {
   }
 
   toggle() {
+    if (this.disabled) return;
     this.active = true;
     const eventData = { active: this.active, value: this.value };
     this.dispatchEvent(new CustomEvent('nile-toggle-changed', { detail: eventData, bubbles: true }));
-
   }
 
 	/**
@@ -76,6 +80,9 @@ export class NileButtonToggle extends LitElement {
     if (this.end) {
       classes.push('nile-button-toggle__end');
     }
+    if (this.disabled) {
+      classes.push('nile-button-toggle__disabled');
+    }
 
     const classString = classes.join(' ');
 

package/src/nile-button-toggle-group/nile-button-toggle-group.ts

@@ -9,6 +9,7 @@ import {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-el
 import { customElement, query, queryAll } from 'lit/decorators.js';
 import {styles} from './nile-button-toggle-group.css';
 import NileButtonToggle from '../nile-button-toggle/nile-button-toggle';
+import NileElement from '../internal/nile-element';
 /**
  * Nile icon component.
  *
@@ -16,15 +17,14 @@ import NileButtonToggle from '../nile-button-toggle/nile-button-toggle';
  *
  */
 @customElement('nile-button-toggle-group')
-export class NileButtonToggleGroup extends LitElement {
-
-	/**
-	 * The styles for ButtonToggleGroup
-	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
-	 */
-	public static get styles(): CSSResultArray {
-		return [styles];
-	}
+export class NileButtonToggleGroup extends NileElement {
+  /**
+   * The styles for ButtonToggleGroup
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
 
   @queryAll('nile-button-toggle')
   private toggles!: NodeListOf<NileButtonToggle>;
@@ -32,20 +32,46 @@ export class NileButtonToggleGroup extends LitElement {
   @query('slot:not([name])')
   private defaultSlot!: HTMLSlotElement;
 
+  @property({ type: Boolean, reflect: true })
+  public disabled: boolean = false;
 
   connectedCallback() {
     super.connectedCallback();
   }
 
   firstUpdated() {
-    this.defaultSlot.addEventListener('slotchange', () => this.updateTogglePositions());
+    this.defaultSlot.addEventListener('slotchange', () =>
+      this.updateTogglePositions()
+    );
     this.addEventListener('nile-toggle-changed', this.handleToggle);
     this.updateTogglePositions();
   }
 
+  updated(changedProperties: Map<string | number | symbol, unknown>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('disabled')) {
+      this.updateDisabledState();
+    }
+  }
+
+  private updateDisabledState() {
+    const assignedNodes = this.defaultSlot.assignedNodes({ flatten: true });
+    const toggles = assignedNodes.filter(
+      node => node instanceof NileButtonToggle
+    ) as NileButtonToggle[];
+
+    toggles.forEach(toggle => {
+      if (!toggle.disabled) {
+        toggle.disabled = this.disabled;
+      }
+    });
+  }
+
   updateTogglePositions() {
-    const assignedNodes = this.defaultSlot.assignedNodes({flatten: true});
-    const toggles = assignedNodes.filter(node => node instanceof NileButtonToggle) as NileButtonToggle[];
+    const assignedNodes = this.defaultSlot.assignedNodes({ flatten: true });
+    const toggles = assignedNodes.filter(
+      node => node instanceof NileButtonToggle
+    ) as NileButtonToggle[];
 
     toggles.forEach((toggle, index) => {
       toggle.initial = index === 0;
@@ -55,6 +81,7 @@ export class NileButtonToggleGroup extends LitElement {
   }
 
   handleToggle(event: CustomEvent) {
+    if (this.disabled) return;
     const toggles = this.querySelectorAll('nile-button-toggle');
 
     if (toggles && event.detail.active) {
@@ -64,21 +91,19 @@ export class NileButtonToggleGroup extends LitElement {
         }
       });
 
-      this.dispatchEvent(new CustomEvent('nile-changed', { detail: { value: event.detail.value } }));
+      this.emit('nile-change', { value: event.detail.value });
     }
-  };
-
-	/**
-	 * Render method
-	 * @slot This is a slot test
-	 */
-	public render(): TemplateResult {
-		return html`
-			<slot> </slot>
-			`;
-	}
-
-	/* #endregion */
+  }
+
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+  public render(): TemplateResult {
+    return html` <slot> </slot> `;
+  }
+
+  /* #endregion */
 }
 
 export default NileButtonToggleGroup;