@aquera/nile-elements 0.0.5-9 → 0.0.6

package/package.json

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

package/src/index.ts

@@ -29,4 +29,5 @@ export { NileErrorMessage } from './nile-error-message';
 export { NileFormErrorMessage } from './nile-form-error-message';
 export { NileFormHelpText } from './nile-form-help-text';
 export { NileCalendar } from './nile-calendar';
-export { NileLink} from './nile-link';
+export { NileLink } from './nile-link';
+export { NileSwitcher } from './nile-switcher';

package/src/nile-switcher/index.ts

@@ -0,0 +1 @@
+export { NileSwitcher } from './nile-switcher';

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

@@ -0,0 +1,37 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit-element';
+
+/**
+ * FieldGenerator CSS
+ */
+export const styles = css`
+  :host {
+    display: inline-block;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .pointer-cursor {
+    cursor: pointer;
+  }
+  .input-container {
+    display: flex;
+  }
+
+  .input-container > :first-child {
+    width: 100%;
+    padding-right: 12px;
+  }
+  .flex-start {
+    align-items: flex-start;
+    padding-top: 10px;
+  }
+`;
+
+export default [styles];

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

@@ -0,0 +1,185 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html, property, TemplateResult } from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import { styles } from './nile-switcher.css';
+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';
+
+/**
+ * @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.
+ */
+
+export interface switchconfig {
+  toggleSwitch: boolean;
+  defaultInput: switchInputType;
+  switchInput: switchInputType;
+}
+
+export interface switchInputType {
+  inputType: 'dropdown' | 'text' | 'checkbox' | 'text-area';
+  value?: String | boolean;
+  label?: String;
+  placeholder?: string;
+  options?: Array<any>;
+  multiple?: boolean;
+}
+
+@customElement('nile-switcher')
+export class NileSwitcher extends NileElement {
+  /**
+   * The styles for nile switcher
+   * @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;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.emit('nile-init');
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.emit('nile-destroy');
+  }
+
+  renderNileText(defaultInput: switchInputType) {
+    const { value, label, placeholder } = defaultInput;
+    return html`<nile-input
+      .value=${value}
+      .label=${label}
+      .placeholder=${placeholder}
+      @nile-input=${this.handleChange}
+    ></nile-input>`;
+  }
+
+  renderNileTextArea(switchInput: switchInputType) {
+    const { value } = switchInput;
+    return html`<nile-textarea
+      .value=${value}
+      @nile-input=${this.handleChange}
+    ></nile-textarea>`;
+  }
+
+  renderNileCheckBox(defaultInput: switchInputType) {
+    const { value, label } = defaultInput;
+
+    return html`<nile-checkbox
+      .checked=${value}
+      .label=${label}
+      @valueChange="${this.handleChangeCheckbox}"
+    ></nile-checkbox>`;
+  }
+
+  handleChange(event: CustomEvent) {
+    this.emit('nile-change', { value: event.detail.value });
+  }
+
+  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}"
+    >
+      ${options &&
+      options.map((option: any) => {
+        return html`<nile-option .value="${option}">${option} </nile-option>`;
+      })}
+    </nile-select>`;
+  }
+
+  renderIcon() {
+    const icon = !this.nileSwitchConfig.toggleSwitch
+      ? 'header-functions'
+      : 'stringinput';
+    return html`<nile-icon
+      size="14"
+      class=${classMap({
+        'pointer-cursor': true,
+        'flex-start': icon === 'stringinput',
+      })}
+      .name=${icon}
+      color="#005EA6"
+      @click=${this.toggleField}
+    ></nile-icon>`;
+  }
+
+  toggleField() {
+    this.nileSwitchConfig = {
+      ...this.nileSwitchConfig,
+      toggleSwitch: !this.nileSwitchConfig.toggleSwitch,
+    };
+  }
+
+  singleFieldSwitcher(
+    defaultInput: switchInputType,
+    switchInput: switchInputType,
+    toggleField: boolean
+  ) {
+    const defaultInputType = defaultInput.inputType;
+    const switchInputType = switchInput.inputType;
+    return html`
+      ${!toggleField
+        ? choose(
+            defaultInputType,
+            [
+              ['text', () => this.renderNileText(defaultInput)],
+              ['checkbox', () => this.renderNileCheckBox(defaultInput)],
+              [
+                'dropdown',
+                () => this.renderDropdown(this.nileSwitchConfig.defaultInput),
+              ],
+            ],
+            () => this.renderNileText(defaultInput)
+          )
+        : choose(
+            switchInputType,
+            [['text-area', () => this.renderNileTextArea(switchInput)]],
+
+            () => this.renderNileTextArea(switchInput)
+          )}
+      ${this.renderIcon()}
+    `;
+  }
+  public render(): TemplateResult {
+    const {
+      toggleSwitch: toggleField,
+      defaultInput,
+      switchInput,
+    } = this.nileSwitchConfig;
+
+    return html`<div class="input-container">
+      ${this.singleFieldSwitcher(defaultInput, switchInput, toggleField)}
+    </div>`;
+  }
+}
+
+export default NileSwitcher;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-switcher': NileSwitcher;
+  }
+}