@aquera/nile-elements 0.0.36 → 0.0.37

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

@@ -12,21 +12,20 @@ import NileElement from '../internal/nile-element';
 import { CSSResultGroup } from 'lit';
 import { choose } from 'lit/directives/choose.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { repeat } from 'lit/directives/repeat.js';
-import { watch } from '../internal/watch';
-import { HasSlotController } from '../internal/slot';
 
 /**
  * @summary Allows you to switch between nile elements
- *
+
  * @dependency nile-icon
  * @dependency nile-input
  * @dependency nile-checkbox
  * @dependency nile-dropdown
  * @dependency nile-textarea
  *
+ 
  * @event nile-change - Emitted when the control's value changes.
  * @event nile-switch - Emitted when the nile component is being switched.
+  
  */
 
 export interface switchconfig {
@@ -34,8 +33,8 @@ export interface switchconfig {
   toggleSwitch: boolean;
   disable?: boolean;
   confirmation?: boolean;
-  align: 'block' | 'inline';
-  inputs: switchInputType[];
+  defaultInput: switchInputType;
+  switchInput: switchInputType;
 }
 
 export interface switchInputType {
@@ -45,32 +44,20 @@ export interface switchInputType {
     | INPUT_TYPE_NAMES.CHECKBOX
     | INPUT_TYPE_NAMES.TEXTAREA
     | INPUT_TYPE_NAMES.RADIO
-    | INPUT_TYPE_NAMES.CONTENTEDITOR
-    | INPUT_TYPE_NAMES.OBJECT_MAPPER
-    | INPUT_TYPE_NAMES.CODE_EDITOR;
+    | INPUT_TYPE_NAMES.CONTENTEDITOR;
   value?: String | boolean;
   label?: String;
   readonly?: boolean;
   type?: string;
-  icon: string;
-  mode?: string;
   placeholder?: string;
   disabled?: boolean;
   required?: boolean;
   error?: boolean;
   errorMessage?: string;
   options?: Array<any>;
-  customAutoCompletions?: any;
   helperText?: string;
   multiple?: boolean;
   noborder?: boolean;
-  multiLine?: boolean;
-  expand?: boolean;
-}
-
-export enum POSITIONS {
-  INLINE = 'inline',
-  BLOCK = 'block',
 }
 
 export enum INPUT_TYPE {
@@ -85,13 +72,6 @@ export enum INPUT_TYPE_NAMES {
   TEXTAREA = 'text-area',
   RADIO = 'radio',
   CONTENTEDITOR = 'content-editor',
-  OBJECT_MAPPER = 'object-mapper',
-  CODE_EDITOR = 'code-editor',
-}
-
-export enum MODE {
-  CREATE = 'create',
-  EDIT = 'edit',
 }
 
 @customElement('nile-switcher')
@@ -101,40 +81,19 @@ 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;
-
-  private readonly hasSlotController = new HasSlotController(this, 'label');
-
   @property({ type: Object }) nileSwitchConfig: switchconfig;
 
-  @property({ type: Number }) current: Number = 0;
-
-  @property({ type: Object }) currentInput: switchInputType;
-
   connectedCallback() {
     super.connectedCallback();
     this.emit('nile-init');
   }
 
-  @watch(['current'], { waitUntilFirstUpdate: true })
-  handleSwitcherChange() {
-    this.setCurrentInput();
-  }
-
-  setCurrentInput() {
-    if (this.nileSwitchConfig?.inputs) {
-      this.currentInput = this.nileSwitchConfig.inputs.filter(
-        (input: switchInputType, index: Number) => {
-          return index === this.current;
-        }
-      )[0];
-    }
-  }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.emit('nile-destroy');
   }
 
-  renderNileText(Input: switchInputType) {
+  renderNileText(Input: switchInputType, inputType: string) {
     const {
       value,
       label,
@@ -143,14 +102,9 @@ export class NileSwitcher extends NileElement {
       required,
       error,
       errorMessage,
-      inputType,
-      noborder,
+      inputType: inputTypeName,
     } = Input;
     return html`<nile-input
-      class=${classMap({
-        'switcher-input': true,
-        'switcher-input--noborder': !!noborder,
-      })}
       .value=${value}
       .label=${label}
       .disabled=${disabled}
@@ -159,12 +113,12 @@ export class NileSwitcher extends NileElement {
       .placeholder=${placeholder}
       .error=${error}
       @nile-input=${(e: CustomEvent) => {
-        this.handleChange(e, inputType);
+        this.handleChange(e, inputType, inputTypeName);
       }}
     ></nile-input>`;
   }
 
-  renderDropdown(Input: switchInputType) {
+  renderDropdown(Input: switchInputType, inputType: string) {
     const {
       options,
       multiple,
@@ -173,12 +127,10 @@ export class NileSwitcher extends NileElement {
       value,
       error,
       errorMessage,
-      inputType,
+      inputType: inputTypeName,
     } = Input;
 
     return html`<nile-select
-      part="dropdown"
-      class="switcher-dropdown"
       .placeholder=${placeholder}
       .disabled="${disabled}"
       .multiple="${multiple}"
@@ -186,7 +138,7 @@ export class NileSwitcher extends NileElement {
       .error="${error}"
       .errorMessage="${errorMessage}"
       @nile-change=${(e: CustomEvent) => {
-        this.handleChange(e, inputType);
+        this.handleChange(e, inputType, inputTypeName);
       }}
     >
       ${options?.map((option: any) => {
@@ -195,48 +147,58 @@ export class NileSwitcher extends NileElement {
     </nile-select>`;
   }
 
-  renderNileTextArea(Input: switchInputType) {
-    const { value, disabled, readonly, errorMessage, error, inputType } = Input;
+  renderNileTextArea(Input: switchInputType, inputType: string) {
+    const {
+      value,
+      disabled,
+      readonly,
+      errorMessage,
+      error,
+      inputType: inputTypeName,
+    } = Input;
 
     return html`<nile-textarea
-      class="switcher-textarea"
       .value=${value}
       .disabled=${disabled}
       ?readonly=${readonly}
       .error=${error}
       .errorMessage=${errorMessage}
       @nile-input=${(e: CustomEvent) => {
-        this.handleChange(e, inputType);
+        this.handleChange(e, inputType, inputTypeName);
       }}
     ></nile-textarea>`;
   }
 
-  renderNileCheckBox(Input: switchInputType) {
-    const { value, label, disabled, inputType } = Input;
+  renderNileCheckBox(Input: switchInputType, inputType: string) {
+    const { value, label, disabled, inputType: inputTypeName } = Input;
 
     return html`<nile-checkbox
-        class="switcher-checkbox"
         .checked=${value}
         .label=${label}
         .disabled=${disabled}
         @valueChange=${(e: CustomEvent) => {
-          this.handleChange(e, inputType);
+          this.handleChange(e, inputType, inputTypeName);
         }}
       ></nile-checkbox
       >; `;
   }
 
-  renderNileRadio(Input: switchInputType) {
-    const { options, value, disabled, errorMessage, inputType } = Input;
+  renderNileRadio(Input: switchInputType, inputType: string) {
+    const {
+      options,
+      value,
+      disabled,
+      inputType: inputTypeName,
+      errorMessage,
+    } = Input;
 
     const haserrorMessage = !!errorMessage;
 
     return html`<nile-radio-group
-      class="switcher-radio-group"
       .value=${value}
       .disabled=${disabled}
       @change=${(e: CustomEvent) => {
-        this.handleChange(e, inputType);
+        this.handleChange(e, inputType, inputTypeName);
       }}
     >
       ${options &&
@@ -253,11 +215,17 @@ export class NileSwitcher extends NileElement {
     `;
   }
 
-  renderContentEditor(Input: switchInputType) {
-    let { options, inputType, errorMessage, type, readonly, noborder, value } =
-      Input;
+  renderContentEditor(Input: switchInputType, inputType: string) {
+    let {
+      options,
+      inputType: inputTypeName,
+      errorMessage,
+      type,
+      readonly,
+      noborder,
+      value,
+    } = Input;
     return html`<nile-content-editor
-      class="switcher-content-editor"
       .value=${value}
       .options=${options}
       .type=${type}
@@ -265,202 +233,154 @@ export class NileSwitcher extends NileElement {
       .noborder=${noborder}
       .errorMessage=${errorMessage}
       @nile-change=${(e: CustomEvent) => {
-        this.handleChange(e, inputType);
+        this.handleChange(e, inputType, inputTypeName);
       }}
     >
     </nile-content-editor>`;
   }
 
-  renderObjectMapper() {
-    const noborder = this.currentInput.noborder;
-    const mode = this.currentInput.mode;
-    const value =
-      this.currentInput.mode === MODE.CREATE
-        ? 'Click to Create - Not Mapped'
-        : 'Click to Edit';
+  handleChange(event: CustomEvent, inputType: string, inputTypeName: string) {
+    if (inputTypeName === INPUT_TYPE_NAMES.CHECKBOX) {
+      this.nileSwitchConfig[inputType as keyof switchconfig].value =
+        event.detail.checked;
+    } else {
+      this.nileSwitchConfig[inputType as keyof switchconfig].value =
+        event.detail.value;
+    }
+    event.stopPropagation();
+    this.emit('nile-change', { config: this.nileSwitchConfig });
+  }
+
+  renderIcon(defaultInput: switchInputType, switchInput: switchInputType) {
+    const defaultHelperText = defaultInput.helperText;
+    const switchHelperText = switchInput.helperText;
 
-    return html`<nile-input
+    const icon = !this.nileSwitchConfig.toggleSwitch
+      ? 'header-functions'
+      : 'stringinput';
+
+    const helperText = !this.nileSwitchConfig.toggleSwitch
+      ? !!switchHelperText
+        ? switchHelperText
+        : `switch to ${switchInput.inputType}`
+      : !!defaultHelperText
+      ? defaultHelperText
+      : `switch to ${defaultInput.inputType}`;
+
+    return html` <nile-tooltip
       class=${classMap({
-        'switcher-object-mapper': true,
-        'switcher-object-mapper--noborder': !!noborder,
+        'tooltip-container': true,
       })}
-      .value=${value}
-      readonly="true"
-      @click="${(e: CustomEvent) =>
-        this.handleChange(e, INPUT_TYPE_NAMES.OBJECT_MAPPER)}"
+      content=${helperText}
+      placement="bottom"
     >
       <nile-icon
-        class="pointer-cursor switcher-object-mapper-icon"
-        slot="suffix"
-        name="collapse"
+        size="14"
+        class=${classMap({
+          'pointer-cursor': true,
+        })}
+        .name=${icon}
         color="#005EA6"
-        size="16"
-      >
-      </nile-icon>
-    </nile-input>`;
-  }
-
-  renderCodeEditor(Input: switchInputType) {
-    const {
-      value,
-      multiLine,
-      customAutoCompletions,
-      disabled,
-      readonly,
-      errorMessage,
-      error,
-      inputType,
-      noborder,
-    } = Input;
-    return html`<nile-code-editor
-      part="code-editor"
-      class=${classMap({
-        'code-editor': true,
-        'code-editor__no-border': !!noborder,
-      })}
-      @nile-expand="${(e: CustomEvent) =>
-        this.handleExpand(e, INPUT_TYPE_NAMES.CODE_EDITOR)}"
-      @nile-change="${(e: CustomEvent) =>
-        this.handleChange(e, INPUT_TYPE_NAMES.CODE_EDITOR)}"
-      .multiline="${multiLine}"
-      .value="${value}"
-      .customOptions="${customAutoCompletions}"
-    ></nile-code-editor> `;
+        @click=${this.toggleField}
+      ></nile-icon>
+    </nile-tooltip>`;
   }
 
-  handleExpand(event: CustomEvent, inputType: string) {
-    this.currentInput.expand = event.detail.expand;
-    this.emit('nile-change', { input: this.currentInput });
-  }
-
-  handleChange(event: CustomEvent, inputType: string) {
-    switch (inputType) {
-      case INPUT_TYPE_NAMES.OBJECT_MAPPER:
-        this.currentInput.value = 'clicked';
-        break;
-      case INPUT_TYPE_NAMES.CHECKBOX:
-        this.currentInput.value = event.detail.checked;
-        break;
-      case INPUT_TYPE_NAMES.CODE_EDITOR:
-        this.currentInput.value = event.detail.value;
-        break;
-      default:
-        this.currentInput.value = event.detail.value;
+  toggleField() {
+    if (!this.nileSwitchConfig.confirmation) {
+      this.nileSwitchConfig = {
+        ...this.nileSwitchConfig,
+        toggleSwitch: !this.nileSwitchConfig.toggleSwitch,
+      };
     }
-    event.stopPropagation();
-    this.emit('nile-change', { input: this.currentInput });
+    this.emit('nile-switch', { config: this.nileSwitchConfig });
   }
 
-  renderIcon() {
-    const inputs = this.nileSwitchConfig.inputs;
-    const toolTipPosition =
-      this.nileSwitchConfig.align === POSITIONS.BLOCK ? 'top' : 'bottom';
-
+  singleFieldSwitcher(
+    defaultInput: switchInputType,
+    switchInput: switchInputType,
+    toggleField: boolean,
+    disable: boolean
+  ) {
+    const defaultInputType = defaultInput.inputType;
+    const switchInputType = switchInput.inputType;
     return html`
-      <div part="icons-container" class="switcher-icons-container">
-        ${repeat(
-          inputs,
-          (input: any, index: number) => html` <nile-tooltip
-            class=${classMap({
-              'switcher-tooltip-container': true,
-            })}
-            content=${input.helperText}
-            placement=${toolTipPosition}
-          >
-            <div  class=${classMap({
-              'switcher-icon-container': true,
-              current: index === this.current,
-            })}>
-               <nile-icon
-              size="16"
-              class=${classMap({
-                'pointer-cursor': true,
-              })}
-              .name=${input.icon}
-              color="#000000"
-              @click=${() => this.toggleField(input, index)}
-            ></nile-icon>
-            <div>
-           
-          </nile-tooltip>`
-        )}
-      </div>
+      ${!toggleField
+        ? choose(
+            defaultInputType,
+            [
+              [
+                INPUT_TYPE_NAMES.TEXT,
+                () => this.renderNileText(defaultInput, INPUT_TYPE.DEFAULT),
+              ],
+              [
+                INPUT_TYPE_NAMES.CHECKBOX,
+                () => this.renderNileCheckBox(defaultInput, INPUT_TYPE.DEFAULT),
+              ],
+              [
+                INPUT_TYPE_NAMES.TEXTAREA,
+                () => this.renderNileTextArea(defaultInput, INPUT_TYPE.DEFAULT),
+              ],
+              [
+                INPUT_TYPE_NAMES.RADIO,
+                () => this.renderNileRadio(defaultInput, INPUT_TYPE.DEFAULT),
+              ],
+              [
+                INPUT_TYPE_NAMES.DROPDOWN,
+                () =>
+                  this.renderDropdown(
+                    this.nileSwitchConfig.defaultInput,
+                    INPUT_TYPE.DEFAULT
+                  ),
+              ],
+              [
+                INPUT_TYPE_NAMES.CONTENTEDITOR,
+                () =>
+                  this.renderContentEditor(
+                    this.nileSwitchConfig.defaultInput,
+                    INPUT_TYPE.DEFAULT
+                  ),
+              ],
+            ],
+            () => this.renderNileText(defaultInput, INPUT_TYPE.DEFAULT)
+          )
+        : choose(
+            switchInputType,
+            [
+              [
+                INPUT_TYPE_NAMES.TEXTAREA,
+                () => this.renderNileTextArea(switchInput, INPUT_TYPE.SWITCH),
+              ],
+              [
+                INPUT_TYPE_NAMES.TEXT,
+                () => this.renderNileText(switchInput, INPUT_TYPE.SWITCH),
+              ],
+              [
+                INPUT_TYPE_NAMES.CONTENTEDITOR,
+                () => this.renderContentEditor(switchInput, INPUT_TYPE.SWITCH),
+              ],
+            ],
+
+            () => this.renderNileTextArea(switchInput, INPUT_TYPE.SWITCH)
+          )}
+      ${!disable ? this.renderIcon(defaultInput, switchInput) : ''}
     `;
   }
-
-  toggleField(currentInput: switchInputType, index: Number) {
-    if (this.nileSwitchConfig.confirmation) {
-      this.current = index;
-    }
-    this.emit('nile-switch', { input: this.currentInput });
-  }
-
-  singleFieldSwitcher() {
-    if (!this.currentInput) {
-      this.setCurrentInput();
-    }
-    return html`
-      ${choose(
-        this.currentInput.inputType,
-        [
-          [INPUT_TYPE_NAMES.TEXT, () => this.renderNileText(this.currentInput)],
-          [
-            INPUT_TYPE_NAMES.CHECKBOX,
-            () => this.renderNileCheckBox(this.currentInput),
-          ],
-          [
-            INPUT_TYPE_NAMES.TEXTAREA,
-            () => this.renderNileTextArea(this.currentInput),
-          ],
-          [
-            INPUT_TYPE_NAMES.RADIO,
-            () => this.renderNileRadio(this.currentInput),
-          ],
-          [
-            INPUT_TYPE_NAMES.DROPDOWN,
-            () => this.renderDropdown(this.currentInput),
-          ],
-          [
-            INPUT_TYPE_NAMES.CONTENTEDITOR,
-            () => this.renderContentEditor(this.currentInput),
-          ],
-          [INPUT_TYPE_NAMES.OBJECT_MAPPER, () => this.renderObjectMapper()],
-          [
-            INPUT_TYPE_NAMES.CODE_EDITOR,
-            () => this.renderCodeEditor(this.currentInput),
-          ],
-        ],
-        () => this.renderNileText(this.currentInput)
-      )}
-    `;
-  }
-
   public render(): TemplateResult {
-    const hasLabelSlot = this.hasSlotController.test('label');
-    const align = this.nileSwitchConfig.align;
-    return html`<div
-      part="base"
-      class=${classMap({
-        'switcher-block': align === POSITIONS.BLOCK,
-        'switcher-inline': align === POSITIONS.INLINE,
-        'switcher-container': true,
-      })}
-    >
-      <div class="label-container">
-        ${hasLabelSlot
-          ? html`
-           <label
-          part="switcher-label"
-          class="switcher__label"
-          for="input"
-        >
-          <slot name="label"></slot>
-        </label>
-          </div> `
-          : ''}
-        ${this.renderIcon()}
-      </div>
-      ${this.singleFieldSwitcher()}
+    const {
+      toggleSwitch: toggleField,
+      defaultInput,
+      switchInput,
+      disable,
+    } = this.nileSwitchConfig;
+
+    return html`<div class="input-container">
+      ${this.singleFieldSwitcher(
+        defaultInput,
+        switchInput,
+        toggleField,
+        !!disable
+      )}
     </div>`;
   }
 }