@aquera/nile-elements 0.0.6-5 → 0.0.6-7

package/src/nile-switcher/nile-switcher.ts

@@ -24,6 +24,8 @@ import { classMap } from 'lit/directives/class-map.js';
  *
  
  * @event nile-change - Emitted when the control's value changes.
+ * @event nile-switch - Emitted when the nile component is being switched.
+  
  */
 
 export interface switchconfig {
@@ -33,14 +35,20 @@ export interface switchconfig {
 }
 
 export interface switchInputType {
-  inputType: 'dropdown' | 'text' | 'checkbox' | 'text-area';
+  inputType: 'dropdown' | 'text' | 'checkbox' | 'text-area' | 'radio';
   value?: String | boolean;
   label?: String;
   placeholder?: string;
+  disabled?: boolean;
   options?: Array<any>;
   multiple?: boolean;
 }
 
+export enum INPUT_TYPE {
+  DEFAULT = 'defaultInput',
+  SWITCH = 'switchInput',
+}
+
 @customElement('nile-switcher')
 export class NileSwitcher extends NileElement {
   /**
@@ -48,7 +56,18 @@ export class NileSwitcher extends NileElement {
    * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
    */
   static styles: CSSResultGroup = styles;
-  @property() nileSwitchConfig: switchconfig;
+  @property({ type: Object }) nileSwitchConfig: switchconfig = {
+    toggleSwitch: false,
+    defaultInput: {
+      inputType: 'radio',
+      value: 'True',
+      options: ['True', 'False'],
+    },
+    switchInput: {
+      inputType: 'text-area',
+      value: 'test',
+    },
+  };
 
   connectedCallback() {
     super.connectedCallback();
@@ -60,54 +79,93 @@ export class NileSwitcher extends NileElement {
     this.emit('nile-destroy');
   }
 
-  renderNileText(defaultInput: switchInputType) {
-    const { value, label, placeholder } = defaultInput;
+  renderNileText(Input: switchInputType, inputType: string) {
+    const { value, label, placeholder, disabled } = Input;
     return html`<nile-input
       .value=${value}
       .label=${label}
+      .disabled=${disabled}
       .placeholder=${placeholder}
-      @nile-input=${this.handleChange}
+      @nile-input=${(e: CustomEvent) => {
+        this.handleChange(e, inputType);
+      }}
     ></nile-input>`;
   }
 
-  renderNileTextArea(switchInput: switchInputType) {
-    const { value } = switchInput;
+  renderDropdown(Input: switchInputType, inputType: string) {
+    const { options, multiple, placeholder } = Input;
+    return html`<nile-select
+      .placeholder=${placeholder}
+      .multiple="${multiple}"
+      @nile-change=${(e: CustomEvent) => {
+        this.handleChange(e, inputType);
+      }}
+      ${
+        options &&
+        options.map((option: any) => {
+          return html`<nile-option .value="${option}">${option} </nile-option>`;
+        })
+      }
+    </nile-select>`;
+  }
+
+  renderNileTextArea(Input: switchInputType, inputType: string) {
+    const { value, disabled } = Input;
     return html`<nile-textarea
       .value=${value}
-      @nile-input=${this.handleChange}
+      .disabled=${disabled}
+      @nile-input=${(e: CustomEvent) => {
+        this.handleChange(e, inputType);
+      }}
     ></nile-textarea>`;
   }
 
-  renderNileCheckBox(defaultInput: switchInputType) {
-    const { value, label } = defaultInput;
+  renderNileCheckBox(Input: switchInputType, inputType: string) {
+    const { value, label, disabled } = Input;
 
     return html`<nile-checkbox
       .checked=${value}
       .label=${label}
-      @valueChange="${this.handleChangeCheckbox}"
+      .disabled=${disabled}
+      @valueChange=${(e: CustomEvent) => {
+        this.handleChangeCheckbox(e, inputType);
+      }}
     ></nile-checkbox>`;
   }
 
-  handleChange(event: CustomEvent) {
-    this.emit('nile-change', { value: event.detail.value });
-  }
+  renderNileRadio(Input: switchInputType, inputType: string) {
+    const { options, value } = Input;
 
-  handleChangeCheckbox(event: CustomEvent) {
-    this.emit('nile-change', { value: event.detail.checked });
-  }
-
-  renderDropdown(defaultInput: switchInputType) {
-    const { options, multiple, placeholder } = defaultInput;
-    return html`<nile-select
-      .placeholder=${placeholder}
-      .multiple="${multiple}"
-      @nile-change="${this.handleChange}"
+    return html`<nile-radio-group
+      .value=${value}
+      @change=${(e: CustomEvent) => {
+        this.handleChange(e, inputType);
+      }}
     >
       ${options &&
       options.map((option: any) => {
-        return html`<nile-option .value="${option}">${option} </nile-option>`;
+        return html`<nile-radio .value="${option}">${option} </nile-radio>`;
       })}
-    </nile-select>`;
+    </nile-radio-group>`;
+  }
+
+  handleChange(event: CustomEvent, inputType: string) {
+    if (inputType === INPUT_TYPE.DEFAULT) {
+      this.nileSwitchConfig.defaultInput.value = event.detail.value;
+    } else {
+      this.nileSwitchConfig.switchInput.value = event.detail.value;
+    }
+    console.log(this.nileSwitchConfig);
+    this.emit('nile-change', { config: this.nileSwitchConfig });
+  }
+
+  handleChangeCheckbox(event: CustomEvent, inputType: string) {
+    if (inputType === INPUT_TYPE.DEFAULT) {
+      this.nileSwitchConfig.defaultInput.value = event.detail.checked;
+    } else {
+      this.nileSwitchConfig.switchInput.value = event.detail.checked;
+    }
+    this.emit('nile-change', { config: this.nileSwitchConfig });
   }
 
   renderIcon() {
@@ -131,6 +189,7 @@ export class NileSwitcher extends NileElement {
       ...this.nileSwitchConfig,
       toggleSwitch: !this.nileSwitchConfig.toggleSwitch,
     };
+    this.emit('nile-switch', { config: this.nileSwitchConfig });
   }
 
   singleFieldSwitcher(
@@ -145,20 +204,47 @@ export class NileSwitcher extends NileElement {
         ? choose(
             defaultInputType,
             [
-              ['text', () => this.renderNileText(defaultInput)],
-              ['checkbox', () => this.renderNileCheckBox(defaultInput)],
+              [
+                'text',
+                () => this.renderNileText(defaultInput, INPUT_TYPE.DEFAULT),
+              ],
+              [
+                'checkbox',
+                () => this.renderNileCheckBox(defaultInput, INPUT_TYPE.DEFAULT),
+              ],
+              [
+                'text-area',
+                () => this.renderNileTextArea(defaultInput, INPUT_TYPE.DEFAULT),
+              ],
+              [
+                'radio',
+                () => this.renderNileRadio(defaultInput, INPUT_TYPE.DEFAULT),
+              ],
               [
                 'dropdown',
-                () => this.renderDropdown(this.nileSwitchConfig.defaultInput),
+                () =>
+                  this.renderDropdown(
+                    this.nileSwitchConfig.defaultInput,
+                    INPUT_TYPE.DEFAULT
+                  ),
               ],
             ],
-            () => this.renderNileText(defaultInput)
+            () => this.renderNileText(defaultInput, INPUT_TYPE.DEFAULT)
           )
         : choose(
             switchInputType,
-            [['text-area', () => this.renderNileTextArea(switchInput)]],
+            [
+              [
+                'text-area',
+                () => this.renderNileTextArea(switchInput, INPUT_TYPE.SWITCH),
+              ],
+              [
+                'text',
+                () => this.renderNileText(switchInput, INPUT_TYPE.SWITCH),
+              ],
+            ],
 
-            () => this.renderNileTextArea(switchInput)
+            () => this.renderNileTextArea(switchInput, INPUT_TYPE.SWITCH)
           )}
       ${this.renderIcon()}
     `;

package/src/nile-textarea/nile-textarea.ts

@@ -176,7 +176,9 @@ export class NileTextarea extends NileElement  {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.resizeObserver.unobserve(this.input);
+    if(this.input) {
+          this.resizeObserver.unobserve(this.input);
+    }
     this.emit('nile-destroy');
   }