@aquera/nile-elements 0.0.37 → 0.0.38-1

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

@@ -12,20 +12,21 @@ 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 {
@@ -33,8 +34,8 @@ export interface switchconfig {
   toggleSwitch: boolean;
   disable?: boolean;
   confirmation?: boolean;
-  defaultInput: switchInputType;
-  switchInput: switchInputType;
+  align: 'block' | 'inline';
+  inputs: switchInputType[];
 }
 
 export interface switchInputType {
@@ -44,20 +45,32 @@ export interface switchInputType {
     | INPUT_TYPE_NAMES.CHECKBOX
     | INPUT_TYPE_NAMES.TEXTAREA
     | INPUT_TYPE_NAMES.RADIO
-    | INPUT_TYPE_NAMES.CONTENTEDITOR;
+    | INPUT_TYPE_NAMES.CONTENTEDITOR
+    | INPUT_TYPE_NAMES.OBJECT_MAPPER
+    | INPUT_TYPE_NAMES.CODE_EDITOR;
   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 {
@@ -72,6 +85,13 @@ 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')
@@ -81,19 +101,40 @@ 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, inputType: string) {
+  renderNileText(Input: switchInputType) {
     const {
       value,
       label,
@@ -102,9 +143,14 @@ export class NileSwitcher extends NileElement {
       required,
       error,
       errorMessage,
-      inputType: inputTypeName,
+      inputType,
+      noborder,
     } = Input;
     return html`<nile-input
+      class=${classMap({
+        'switcher-input': true,
+        'switcher-input--noborder': !!noborder,
+      })}
       .value=${value}
       .label=${label}
       .disabled=${disabled}
@@ -113,12 +159,12 @@ export class NileSwitcher extends NileElement {
       .placeholder=${placeholder}
       .error=${error}
       @nile-input=${(e: CustomEvent) => {
-        this.handleChange(e, inputType, inputTypeName);
+        this.handleChange(e, inputType);
       }}
     ></nile-input>`;
   }
 
-  renderDropdown(Input: switchInputType, inputType: string) {
+  renderDropdown(Input: switchInputType) {
     const {
       options,
       multiple,
@@ -127,10 +173,12 @@ export class NileSwitcher extends NileElement {
       value,
       error,
       errorMessage,
-      inputType: inputTypeName,
+      inputType,
     } = Input;
 
     return html`<nile-select
+      part="dropdown"
+      class="switcher-dropdown"
       .placeholder=${placeholder}
       .disabled="${disabled}"
       .multiple="${multiple}"
@@ -138,7 +186,7 @@ export class NileSwitcher extends NileElement {
       .error="${error}"
       .errorMessage="${errorMessage}"
       @nile-change=${(e: CustomEvent) => {
-        this.handleChange(e, inputType, inputTypeName);
+        this.handleChange(e, inputType);
       }}
     >
       ${options?.map((option: any) => {
@@ -147,58 +195,48 @@ export class NileSwitcher extends NileElement {
     </nile-select>`;
   }
 
-  renderNileTextArea(Input: switchInputType, inputType: string) {
-    const {
-      value,
-      disabled,
-      readonly,
-      errorMessage,
-      error,
-      inputType: inputTypeName,
-    } = Input;
+  renderNileTextArea(Input: switchInputType) {
+    const { value, disabled, readonly, errorMessage, error, inputType } = 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, inputTypeName);
+        this.handleChange(e, inputType);
       }}
     ></nile-textarea>`;
   }
 
-  renderNileCheckBox(Input: switchInputType, inputType: string) {
-    const { value, label, disabled, inputType: inputTypeName } = Input;
+  renderNileCheckBox(Input: switchInputType) {
+    const { value, label, disabled, inputType } = Input;
 
     return html`<nile-checkbox
+        class="switcher-checkbox"
         .checked=${value}
         .label=${label}
         .disabled=${disabled}
         @valueChange=${(e: CustomEvent) => {
-          this.handleChange(e, inputType, inputTypeName);
+          this.handleChange(e, inputType);
         }}
       ></nile-checkbox
       >; `;
   }
 
-  renderNileRadio(Input: switchInputType, inputType: string) {
-    const {
-      options,
-      value,
-      disabled,
-      inputType: inputTypeName,
-      errorMessage,
-    } = Input;
+  renderNileRadio(Input: switchInputType) {
+    const { options, value, disabled, errorMessage, inputType } = Input;
 
     const haserrorMessage = !!errorMessage;
 
     return html`<nile-radio-group
+      class="switcher-radio-group"
       .value=${value}
       .disabled=${disabled}
       @change=${(e: CustomEvent) => {
-        this.handleChange(e, inputType, inputTypeName);
+        this.handleChange(e, inputType);
       }}
     >
       ${options &&
@@ -215,17 +253,11 @@ export class NileSwitcher extends NileElement {
     `;
   }
 
-  renderContentEditor(Input: switchInputType, inputType: string) {
-    let {
-      options,
-      inputType: inputTypeName,
-      errorMessage,
-      type,
-      readonly,
-      noborder,
-      value,
-    } = Input;
+  renderContentEditor(Input: switchInputType) {
+    let { options, inputType, errorMessage, type, readonly, noborder, value } =
+      Input;
     return html`<nile-content-editor
+      class="switcher-content-editor"
       .value=${value}
       .options=${options}
       .type=${type}
@@ -233,154 +265,218 @@ export class NileSwitcher extends NileElement {
       .noborder=${noborder}
       .errorMessage=${errorMessage}
       @nile-change=${(e: CustomEvent) => {
-        this.handleChange(e, inputType, inputTypeName);
+        this.handleChange(e, inputType);
       }}
     >
     </nile-content-editor>`;
   }
 
-  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;
+  renderObjectMapper(Input: switchInputType) {
+    let { options, inputType, error, errorMessage, type, readonly, noborder } =
+      Input;
 
-    const icon = !this.nileSwitchConfig.toggleSwitch
-      ? 'header-functions'
-      : 'stringinput';
+    const value =
+      this.currentInput.mode === MODE.CREATE
+        ? 'Click to Create - Not Mapped'
+        : 'Click to Edit';
 
-    const helperText = !this.nileSwitchConfig.toggleSwitch
-      ? !!switchHelperText
-        ? switchHelperText
-        : `switch to ${switchInput.inputType}`
-      : !!defaultHelperText
-      ? defaultHelperText
-      : `switch to ${defaultInput.inputType}`;
-
-    return html` <nile-tooltip
+    return html`<nile-input
       class=${classMap({
-        'tooltip-container': true,
+        'switcher-object-mapper': true,
+        'switcher-object-mapper--noborder': !!noborder,
       })}
-      content=${helperText}
-      placement="bottom"
+      .value=${value}
+      .errorMessage=${errorMessage}
+      .error=${error}
+      readonly="true"
+      @click="${(e: CustomEvent) =>
+        this.handleChange(e, INPUT_TYPE_NAMES.OBJECT_MAPPER)}"
     >
       <nile-icon
-        size="14"
-        class=${classMap({
-          'pointer-cursor': true,
-        })}
-        .name=${icon}
+        class="pointer-cursor switcher-object-mapper-icon"
+        slot="suffix"
+        name="expand-2"
         color="#005EA6"
-        @click=${this.toggleField}
-      ></nile-icon>
-    </nile-tooltip>`;
+        size="16"
+      >
+      </nile-icon>
+    </nile-input>`;
+  }
+
+  renderCodeEditor(Input: switchInputType) {
+    const {
+      value,
+      multiLine,
+      customAutoCompletions,
+      disabled,
+      readonly,
+      errorMessage,
+      error,
+      inputType,
+      noborder,
+      expand,
+    } = Input;
+    return html`<nile-code-editor
+      part="switcher-code-editor"
+      class=${classMap({
+        'code-editor': true,
+      })}
+      @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}"
+      .readonly=${readonly}
+      .expandable="${expand}"
+      .error=${error}
+      .errorMessage=${errorMessage}
+      .customAutoCompletions="${customAutoCompletions}"
+    ></nile-code-editor> `;
+  }
+
+  handleExpand(event: CustomEvent, inputType: string) {
+    this.currentInput.expand = event.detail.expand;
+    this.emit('nile-change', { input: this.currentInput });
   }
 
-  toggleField() {
-    if (!this.nileSwitchConfig.confirmation) {
-      this.nileSwitchConfig = {
-        ...this.nileSwitchConfig,
-        toggleSwitch: !this.nileSwitchConfig.toggleSwitch,
-      };
+  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;
     }
-    this.emit('nile-switch', { config: this.nileSwitchConfig });
+    event.stopPropagation();
+    this.emit('nile-change', { input: this.currentInput });
   }
 
-  singleFieldSwitcher(
-    defaultInput: switchInputType,
-    switchInput: switchInputType,
-    toggleField: boolean,
-    disable: boolean
-  ) {
-    const defaultInputType = defaultInput.inputType;
-    const switchInputType = switchInput.inputType;
+  renderIcon() {
+    const inputs = this.nileSwitchConfig.inputs;
+    const toolTipPosition =
+      this.nileSwitchConfig.align === POSITIONS.BLOCK ? 'top' : 'bottom';
+
     return html`
-      ${!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) : ''}
+      <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,
+                'pointer-cursor-not-allowed': index === this.current,
+              })}
+              .name=${input.icon}
+              color="#000000"
+              @click=${() => this.toggleField(input, index)}
+            ></nile-icon>
+            <div>
+           
+          </nile-tooltip>`
+        )}
+      </div>
     `;
   }
-  public render(): TemplateResult {
-    const {
-      toggleSwitch: toggleField,
-      defaultInput,
-      switchInput,
-      disable,
-    } = this.nileSwitchConfig;
-
-    return html`<div class="input-container">
-      ${this.singleFieldSwitcher(
-        defaultInput,
-        switchInput,
-        toggleField,
-        !!disable
+
+  isToggleSwitch = (item: any) => {
+    return typeof item === 'undefined' || item;
+  };
+
+  toggleField(currentInput: switchInputType, index: Number) {
+    this.emit('nile-switch', {
+      inputClicked: index,
+      currentInput: 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(this.currentInput),
+          ],
+          [
+            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;
+    const disable = this.nileSwitchConfig.disable;
+    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> `
+          : ''}
+        ${!disable ? html`${this.renderIcon()}` : ''}
+      </div>
+      ${this.singleFieldSwitcher()}
     </div>`;
   }
 }