@aquera/nile-elements 0.0.28 → 0.0.30

package/package.json

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

package/src/nile-content-editor/nile-content-editor.css.ts

@@ -14,6 +14,7 @@ export const styles = css`
   :host {
     box-sizing: border-box;
     font-size: 14px;
+    overflow: hidden;
   }
 
   .content-editable-wrapper {

package/src/nile-error-message/nile-error-message.ts

@@ -62,7 +62,7 @@ export class NileErrorMessage extends LitElement {
           size="14"
           class="nile-error-message__icon"
           part="icon"
-          color="#E5434D"
+          color="#A4121C"
         ></nile-icon>
         <span class="nile-error-message__error">${this.errorMessage}</span>
 

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

@@ -16,27 +16,64 @@ export const styles = css`
     box-sizing: border-box;
   }
 
-  .pointer-cursor {
+  .switcher-icon-container {
     cursor: pointer;
+    justify-content: center;
+    display: flex;
+    align-items: center;
+    margin-bottom: 6px;
+    height: 28px;
+    width: 28px;
+    border-radius: 4px;
+  }
+
+  .switcher-icon-container.current {
+    background: var(--nile-colors-blue-400);
   }
-  .input-container {
+
+  .switcher-input-container {
     display: flex;
+  }
+
+  .switcher-inline {
     gap: 0.5rem;
   }
 
-  .input-container > :first-child {
-    max-width: 98%;
-    min-width: 98%;
+  .switcher-block {
+    flex-direction: column;
+  }
+
+  .switcher-block > :first-child {
+    align-self: end;
+  }
+
+  .switcher-inline > :nth-child(2) {
+    flex: 1;
   }
 
-  nile-icon {
+  .switcher-input-container > :first-child {
+    display: flex;
+    gap: 0.5rem;
     max-height: 38px;
+    align-items: center;
   }
 
   nile-radio {
     display: inline-block;
     padding-right: 10px;
   }
+
+  .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];

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

@@ -12,20 +12,19 @@ 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';
 
 /**
  * @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 +32,9 @@ export interface switchconfig {
   toggleSwitch: boolean;
   disable?: boolean;
   confirmation?: boolean;
-  defaultInput: switchInputType;
-  switchInput: switchInputType;
+  current: number;
+  align: 'block' | 'inline';
+  inputs: switchInputType[];
 }
 
 export interface switchInputType {
@@ -44,11 +44,15 @@ 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;
   value?: String | boolean;
   label?: String;
   readonly?: boolean;
+  order: number;
   type?: string;
+  icon: string;
+  mode?: string;
   placeholder?: string;
   disabled?: boolean;
   required?: boolean;
@@ -60,6 +64,11 @@ export interface switchInputType {
   noborder?: boolean;
 }
 
+export enum POSITIONS {
+  INLINE = 'inline',
+  BLOCK = 'block',
+}
+
 export enum INPUT_TYPE {
   DEFAULT = 'defaultInput',
   SWITCH = 'switchInput',
@@ -72,6 +81,12 @@ export enum INPUT_TYPE_NAMES {
   TEXTAREA = 'text-area',
   RADIO = 'radio',
   CONTENTEDITOR = 'content-editor',
+  OBJECT_MAPPER = 'object-mapper',
+}
+
+export enum MODE {
+  CREATE = 'create',
+  EDIT = 'edit',
 }
 
 @customElement('nile-switcher')
@@ -81,9 +96,12 @@ 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({ type: Object }) nileSwitchConfig: switchconfig;
+  @property() currentInput: switchInputType;
 
   connectedCallback() {
+    this.currentInput = this.nileSwitchConfig.inputs[0];
     super.connectedCallback();
     this.emit('nile-init');
   }
@@ -93,7 +111,7 @@ export class NileSwitcher extends NileElement {
     this.emit('nile-destroy');
   }
 
-  renderNileText(Input: switchInputType, inputType: string) {
+  renderNileText(Input: switchInputType) {
     const {
       value,
       label,
@@ -102,9 +120,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 +136,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 +150,11 @@ export class NileSwitcher extends NileElement {
       value,
       error,
       errorMessage,
-      inputType: inputTypeName,
+      inputType,
     } = Input;
 
     return html`<nile-select
+      class="switcher-dropdown"
       .placeholder=${placeholder}
       .disabled="${disabled}"
       .multiple="${multiple}"
@@ -138,7 +162,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 +171,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 +229,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 +241,141 @@ 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;
-
-    const icon = !this.nileSwitchConfig.toggleSwitch
-      ? 'header-functions'
-      : 'stringinput';
+  renderObjectMapper() {
+    const noborder = this.currentInput.noborder;
+    const mode = this.currentInput.mode;
+    const value =
+      this.currentInput.mode === MODE.CREATE
+        ? 'Click to Create - Not Mapped'
+        : '';
 
-    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}
+      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="collapse"
         color="#005EA6"
-        @click=${this.toggleField}
-      ></nile-icon>
-    </nile-tooltip>`;
+        size="16"
+      >
+      </nile-icon>
+    </nile-input>`;
   }
 
-  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;
+      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 class="switcher-icons-container">
+        ${repeat(
+          inputs,
+          input => html` <nile-tooltip
+            class=${classMap({
+              'switcher-tooltip-container': true,
+            })}
+            content=${input.helperText}
+            placement=${toolTipPosition}
+          >
+            <div  class=${classMap({
+              'switcher-icon-container': true,
+              current: input.order === this.currentInput.order,
+            })}>
+               <nile-icon
+              size="16"
+              class=${classMap({
+                'pointer-cursor': true,
+              })}
+              .name=${input.icon}
+              color="#000000"
+              @click=${() => this.toggleField(input)}
+            ></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
+
+  toggleField(currentInput: switchInputType) {
+    this.currentInput = currentInput;
+    this.emit('nile-switch', { input: this.currentInput });
+  }
+
+  singleFieldSwitcher() {
+    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.renderNileText(this.currentInput)
       )}
+    `;
+  }
+
+  public render(): TemplateResult {
+    const align = this.nileSwitchConfig.align;
+    return html`<div
+      class=${classMap({
+        'switcher-block': align === POSITIONS.BLOCK,
+        'switcher-inline': align === POSITIONS.INLINE,
+        'switcher-input-container': true,
+      })}
+    >
+      ${this.renderIcon()} ${this.singleFieldSwitcher()}
     </div>`;
   }
 }