@aquera/nile-elements 0.0.36-3 → 0.0.37

package/dist/src/nile-switcher/nile-switcher.css.js

@@ -17,92 +17,24 @@ export const styles = css `
   .pointer-cursor {
     cursor: pointer;
   }
-
-  .switcher__label {
-    display: flex;
-    align-items: center;
-    color: inherit;
-    color: var(--nile-colors-dark-900);
-    font-family: Colfax-regular;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 14px;
-    letter-spacing: 0.2px;
-  }
-
-  switcher-object-mapper:hover {
-    display: flex;
-  }
-  .switcher-icon-container.current {
-    background: var(--nile-colors-primary-100);
-  }
-
-  .switcher-container {
+  .input-container {
     display: flex;
-  }
-
-  .switcher-inline {
     gap: 0.5rem;
   }
 
-  .switcher-block {
-    flex-direction: column;
-  }
-
-  .switcher-inline > :nth-child(2) {
-    flex: 1;
-    overflow: hidden;
+  .input-container > :first-child {
+    max-width: 98%;
+    min-width: 98%;
   }
 
-  .switcher-icons-container {
-    display: flex;
-    margin-left: auto;
-    gap: 0.5rem;
+  nile-icon {
     max-height: 38px;
-    align-items: center;
-  }
-
-  .switcher-block > .switcher-icons-container {
-    margin-left: auto;
-  }
-
-  .label-container {
-    display: flex;
   }
 
-  .switcher-icon-container {
-    cursor: pointer;
-    justify-content: center;
-    display: flex;
-    align-items: center;
-    margin-bottom: 6px;
-    height: 28px;
-    width: 28px;
-    border-radius: 4px;
-  }
   nile-radio {
     display: inline-block;
     padding-right: 10px;
   }
-
-  .switcher-object-mapper-icon {
-    display: none;
-  }
-  .switcher-object-mapper:hover > .switcher-object-mapper-icon {
-    display: block;
-  }
-  .switcher-object-mapper::part(input) {
-    color: var(--nile-colors-primary-600);
-    cursor: pointer;
-  }
-
-  .switcher-input--noborder::part(base) {
-    border: none;
-  }
-  .switcher-object-mapper--noborder::part(base) {
-    border: none;
-  }
 `;
 export default [styles];
 //# sourceMappingURL=nile-switcher.css.js.map

package/dist/src/nile-switcher/nile-switcher.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-switcher.css.js","sourceRoot":"","sources":["../../../src/nile-switcher/nile-switcher.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+FxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * FieldGenerator CSS\n */\nexport const styles = css`\n  :host {\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  .pointer-cursor {\n    cursor: pointer;\n  }\n\n  .switcher__label {\n    display: flex;\n    align-items: center;\n    color: inherit;\n    color: var(--nile-colors-dark-900);\n    font-family: Colfax-regular;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  switcher-object-mapper:hover {\n    display: flex;\n  }\n  .switcher-icon-container.current {\n    background: var(--nile-colors-primary-100);\n  }\n\n  .switcher-container {\n    display: flex;\n  }\n\n  .switcher-inline {\n    gap: 0.5rem;\n  }\n\n  .switcher-block {\n    flex-direction: column;\n  }\n\n  .switcher-inline > :nth-child(2) {\n    flex: 1;\n    overflow: hidden;\n  }\n\n  .switcher-icons-container {\n    display: flex;\n    margin-left: auto;\n    gap: 0.5rem;\n    max-height: 38px;\n    align-items: center;\n  }\n\n  .switcher-block > .switcher-icons-container {\n    margin-left: auto;\n  }\n\n  .label-container {\n    display: flex;\n  }\n\n  .switcher-icon-container {\n    cursor: pointer;\n    justify-content: center;\n    display: flex;\n    align-items: center;\n    margin-bottom: 6px;\n    height: 28px;\n    width: 28px;\n    border-radius: 4px;\n  }\n  nile-radio {\n    display: inline-block;\n    padding-right: 10px;\n  }\n\n  .switcher-object-mapper-icon {\n    display: none;\n  }\n  .switcher-object-mapper:hover > .switcher-object-mapper-icon {\n    display: block;\n  }\n  .switcher-object-mapper::part(input) {\n    color: var(--nile-colors-primary-600);\n    cursor: pointer;\n  }\n\n  .switcher-input--noborder::part(base) {\n    border: none;\n  }\n  .switcher-object-mapper--noborder::part(base) {\n    border: none;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-switcher.css.js","sourceRoot":"","sources":["../../../src/nile-switcher/nile-switcher.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * FieldGenerator CSS\n */\nexport const styles = css`\n  :host {\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  .pointer-cursor {\n    cursor: pointer;\n  }\n  .input-container {\n    display: flex;\n    gap: 0.5rem;\n  }\n\n  .input-container > :first-child {\n    max-width: 98%;\n    min-width: 98%;\n  }\n\n  nile-icon {\n    max-height: 38px;\n  }\n\n  nile-radio {\n    display: inline-block;\n    padding-right: 10px;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -9,48 +9,41 @@ import NileElement from '../internal/nile-element';
 import { CSSResultGroup } from 'lit';
 /**
  * @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 {
     [key: string]: any;
     toggleSwitch: boolean;
     disable?: boolean;
     confirmation?: boolean;
-    align: 'block' | 'inline';
-    inputs: switchInputType[];
+    defaultInput: switchInputType;
+    switchInput: switchInputType;
 }
 export interface switchInputType {
-    inputType: INPUT_TYPE_NAMES.DROPDOWN | INPUT_TYPE_NAMES.TEXT | 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;
+    inputType: INPUT_TYPE_NAMES.DROPDOWN | INPUT_TYPE_NAMES.TEXT | INPUT_TYPE_NAMES.CHECKBOX | INPUT_TYPE_NAMES.TEXTAREA | INPUT_TYPE_NAMES.RADIO | 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 declare enum POSITIONS {
-    INLINE = "inline",
-    BLOCK = "block"
 }
 export declare enum INPUT_TYPE {
     DEFAULT = "defaultInput",
@@ -62,13 +55,7 @@ export declare enum INPUT_TYPE_NAMES {
     CHECKBOX = "checkbox",
     TEXTAREA = "text-area",
     RADIO = "radio",
-    CONTENTEDITOR = "content-editor",
-    OBJECT_MAPPER = "object-mapper",
-    CODE_EDITOR = "code-editor"
-}
-export declare enum MODE {
-    CREATE = "create",
-    EDIT = "edit"
+    CONTENTEDITOR = "content-editor"
 }
 export declare class NileSwitcher extends NileElement {
     /**
@@ -76,29 +63,20 @@ export declare 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;
-    private readonly hasSlotController;
     nileSwitchConfig: switchconfig;
-    current: Number;
-    currentInput: switchInputType;
     connectedCallback(): void;
-    handleSwitcherChange(): void;
-    setCurrentInput(): void;
     disconnectedCallback(): void;
-    renderNileText(Input: switchInputType): TemplateResult<1>;
-    renderDropdown(Input: switchInputType): TemplateResult<1>;
-    renderNileTextArea(Input: switchInputType): TemplateResult<1>;
-    renderNileCheckBox(Input: switchInputType): TemplateResult<1>;
-    renderNileRadio(Input: switchInputType): TemplateResult<1>;
+    renderNileText(Input: switchInputType, inputType: string): TemplateResult<1>;
+    renderDropdown(Input: switchInputType, inputType: string): TemplateResult<1>;
+    renderNileTextArea(Input: switchInputType, inputType: string): TemplateResult<1>;
+    renderNileCheckBox(Input: switchInputType, inputType: string): TemplateResult<1>;
+    renderNileRadio(Input: switchInputType, inputType: string): TemplateResult<1>;
     renderErrorMessage(errorMessage: string): TemplateResult<1>;
-    renderContentEditor(Input: switchInputType): TemplateResult<1>;
-    renderObjectMapper(): TemplateResult<1>;
-    renderCodeEditor(Input: switchInputType): TemplateResult<1>;
-    handleExpand(event: CustomEvent, inputType: string): void;
-    handleChange(event: CustomEvent, inputType: string): void;
-    renderIcon(): TemplateResult<1>;
-    isToggleSwitch: (item: any) => any;
-    toggleField(currentInput: switchInputType, index: Number): void;
-    singleFieldSwitcher(): TemplateResult<1>;
+    renderContentEditor(Input: switchInputType, inputType: string): TemplateResult<1>;
+    handleChange(event: CustomEvent, inputType: string, inputTypeName: string): void;
+    renderIcon(defaultInput: switchInputType, switchInput: switchInputType): TemplateResult<1>;
+    toggleField(): void;
+    singleFieldSwitcher(defaultInput: switchInputType, switchInput: switchInputType, toggleField: boolean, disable: boolean): TemplateResult<1>;
     render(): TemplateResult;
 }
 export default NileSwitcher;

package/dist/src/nile-switcher/nile-switcher.js

@@ -11,14 +11,6 @@ import { styles } from './nile-switcher.css';
 import NileElement from '../internal/nile-element';
 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';
-export var POSITIONS;
-(function (POSITIONS) {
-    POSITIONS["INLINE"] = "inline";
-    POSITIONS["BLOCK"] = "block";
-})(POSITIONS || (POSITIONS = {}));
 export var INPUT_TYPE;
 (function (INPUT_TYPE) {
     INPUT_TYPE["DEFAULT"] = "defaultInput";
@@ -32,48 +24,19 @@ export var INPUT_TYPE_NAMES;
     INPUT_TYPE_NAMES["TEXTAREA"] = "text-area";
     INPUT_TYPE_NAMES["RADIO"] = "radio";
     INPUT_TYPE_NAMES["CONTENTEDITOR"] = "content-editor";
-    INPUT_TYPE_NAMES["OBJECT_MAPPER"] = "object-mapper";
-    INPUT_TYPE_NAMES["CODE_EDITOR"] = "code-editor";
 })(INPUT_TYPE_NAMES || (INPUT_TYPE_NAMES = {}));
-export var MODE;
-(function (MODE) {
-    MODE["CREATE"] = "create";
-    MODE["EDIT"] = "edit";
-})(MODE || (MODE = {}));
 let NileSwitcher = class NileSwitcher extends NileElement {
-    constructor() {
-        super(...arguments);
-        this.hasSlotController = new HasSlotController(this, 'label');
-        this.current = 0;
-        this.isToggleSwitch = (item) => {
-            return typeof item === 'undefined' || item;
-        };
-    }
     connectedCallback() {
         super.connectedCallback();
         this.emit('nile-init');
     }
-    handleSwitcherChange() {
-        this.setCurrentInput();
-    }
-    setCurrentInput() {
-        if (this.nileSwitchConfig?.inputs) {
-            this.currentInput = this.nileSwitchConfig.inputs.filter((input, index) => {
-                return index === this.current;
-            })[0];
-        }
-    }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.emit('nile-destroy');
     }
-    renderNileText(Input) {
-        const { value, label, placeholder, disabled, required, error, errorMessage, inputType, noborder, } = Input;
+    renderNileText(Input, inputType) {
+        const { value, label, placeholder, disabled, required, error, errorMessage, inputType: inputTypeName, } = Input;
         return html `<nile-input
-      class=${classMap({
-            'switcher-input': true,
-            'switcher-input--noborder': !!noborder,
-        })}
       .value=${value}
       .label=${label}
       .disabled=${disabled}
@@ -82,15 +45,13 @@ let NileSwitcher = class NileSwitcher extends NileElement {
       .placeholder=${placeholder}
       .error=${error}
       @nile-input=${(e) => {
-            this.handleChange(e, inputType);
+            this.handleChange(e, inputType, inputTypeName);
         }}
     ></nile-input>`;
     }
-    renderDropdown(Input) {
-        const { options, multiple, placeholder, disabled, value, error, errorMessage, inputType, } = Input;
+    renderDropdown(Input, inputType) {
+        const { options, multiple, placeholder, disabled, value, error, errorMessage, inputType: inputTypeName, } = Input;
         return html `<nile-select
-      part="dropdown"
-      class="switcher-dropdown"
       .placeholder=${placeholder}
       .disabled="${disabled}"
       .multiple="${multiple}"
@@ -98,7 +59,7 @@ let NileSwitcher = class NileSwitcher extends NileElement {
       .error="${error}"
       .errorMessage="${errorMessage}"
       @nile-change=${(e) => {
-            this.handleChange(e, inputType);
+            this.handleChange(e, inputType, inputTypeName);
         }}
     >
       ${options?.map((option) => {
@@ -106,42 +67,39 @@ let NileSwitcher = class NileSwitcher extends NileElement {
         })}
     </nile-select>`;
     }
-    renderNileTextArea(Input) {
-        const { value, disabled, readonly, errorMessage, error, inputType } = Input;
+    renderNileTextArea(Input, inputType) {
+        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) => {
-            this.handleChange(e, inputType);
+            this.handleChange(e, inputType, inputTypeName);
         }}
     ></nile-textarea>`;
     }
-    renderNileCheckBox(Input) {
-        const { value, label, disabled, inputType } = Input;
+    renderNileCheckBox(Input, inputType) {
+        const { value, label, disabled, inputType: inputTypeName } = Input;
         return html `<nile-checkbox
-        class="switcher-checkbox"
         .checked=${value}
         .label=${label}
         .disabled=${disabled}
         @valueChange=${(e) => {
-            this.handleChange(e, inputType);
+            this.handleChange(e, inputType, inputTypeName);
         }}
       ></nile-checkbox
       >; `;
     }
-    renderNileRadio(Input) {
-        const { options, value, disabled, errorMessage, inputType } = Input;
+    renderNileRadio(Input, inputType) {
+        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) => {
-            this.handleChange(e, inputType);
+            this.handleChange(e, inputType, inputTypeName);
         }}
     >
       ${options &&
@@ -156,10 +114,9 @@ let NileSwitcher = class NileSwitcher extends NileElement {
       <nile-form-error-message>${errorMessage}</nile-form-error-message>
     `;
     }
-    renderContentEditor(Input) {
-        let { options, inputType, errorMessage, type, readonly, noborder, value } = Input;
+    renderContentEditor(Input, inputType) {
+        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}
@@ -167,169 +124,115 @@ let NileSwitcher = class NileSwitcher extends NileElement {
       .noborder=${noborder}
       .errorMessage=${errorMessage}
       @nile-change=${(e) => {
-            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';
-        return html `<nile-input
+    handleChange(event, inputType, inputTypeName) {
+        if (inputTypeName === INPUT_TYPE_NAMES.CHECKBOX) {
+            this.nileSwitchConfig[inputType].value =
+                event.detail.checked;
+        }
+        else {
+            this.nileSwitchConfig[inputType].value =
+                event.detail.value;
+        }
+        event.stopPropagation();
+        this.emit('nile-change', { config: this.nileSwitchConfig });
+    }
+    renderIcon(defaultInput, switchInput) {
+        const defaultHelperText = defaultInput.helperText;
+        const switchHelperText = switchInput.helperText;
+        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) => 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"
-        color="#005EA6"
-        size="16"
-      >
-      </nile-icon>
-    </nile-input>`;
-    }
-    renderCodeEditor(Input) {
-        const { value, multiLine, customAutoCompletions, disabled, readonly, errorMessage, error, inputType, noborder, } = Input;
-        return html `<nile-code-editor
-      part="switcher-code-editor"
-      class=${classMap({
-            'code-editor': true,
-        })}
-      @nile-expand="${(e) => this.handleExpand(e, INPUT_TYPE_NAMES.CODE_EDITOR)}"
-      @nile-change="${(e) => this.handleChange(e, INPUT_TYPE_NAMES.CODE_EDITOR)}"
-      .multiline="${multiLine}"
-      .value="${value}"
-      .customOptions="${customAutoCompletions}"
-    ></nile-code-editor> `;
-    }
-    handleExpand(event, inputType) {
-        this.currentInput.expand = event.detail.expand;
-        this.emit('nile-change', { input: this.currentInput });
-    }
-    handleChange(event, inputType) {
-        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;
-        }
-        event.stopPropagation();
-        this.emit('nile-change', { input: this.currentInput });
-    }
-    renderIcon() {
-        const inputs = this.nileSwitchConfig.inputs;
-        const toolTipPosition = this.nileSwitchConfig.align === POSITIONS.BLOCK ? 'top' : 'bottom';
-        return html `
-      <div part="icons-container" class="switcher-icons-container">
-        ${repeat(inputs, (input, index) => 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({
+        size="14"
+        class=${classMap({
             'pointer-cursor': true,
         })}
-              .name=${input.icon}
-              color="#000000"
-              @click=${() => this.toggleField(input, index)}
-            ></nile-icon>
-            <div>
-           
-          </nile-tooltip>`)}
-      </div>
-    `;
-    }
-    toggleField(currentInput, index) {
-        this.emit('nile-switch', {
-            inputClicked: index,
-            currentInput: currentInput,
-        });
-    }
-    singleFieldSwitcher() {
-        if (!this.currentInput) {
-            this.setCurrentInput();
+        .name=${icon}
+        color="#005EA6"
+        @click=${this.toggleField}
+      ></nile-icon>
+    </nile-tooltip>`;
+    }
+    toggleField() {
+        if (!this.nileSwitchConfig.confirmation) {
+            this.nileSwitchConfig = {
+                ...this.nileSwitchConfig,
+                toggleSwitch: !this.nileSwitchConfig.toggleSwitch,
+            };
         }
+        this.emit('nile-switch', { config: this.nileSwitchConfig });
+    }
+    singleFieldSwitcher(defaultInput, switchInput, toggleField, disable) {
+        const defaultInputType = defaultInput.inputType;
+        const switchInputType = switchInput.inputType;
         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))}
+      ${!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) : ''}
     `;
     }
     render() {
-        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>`;
     }
 };
@@ -341,15 +244,6 @@ NileSwitcher.styles = styles;
 __decorate([
     property({ type: Object })
 ], NileSwitcher.prototype, "nileSwitchConfig", void 0);
-__decorate([
-    property({ type: Number })
-], NileSwitcher.prototype, "current", void 0);
-__decorate([
-    property({ type: Object })
-], NileSwitcher.prototype, "currentInput", void 0);
-__decorate([
-    watch(['current'], { waitUntilFirstUpdate: true })
-], NileSwitcher.prototype, "handleSwitcherChange", null);
 NileSwitcher = __decorate([
     customElement('nile-switcher')
 ], NileSwitcher);