@aquera/nile-elements 0.0.5-9 → 0.0.6-10

package/src/nile-slide-toggle/nile-slide-toggle.ts

@@ -39,6 +39,9 @@ export class NileSlideToggle extends NileElement {
 
     return html`
     <div class="nile-slide-toggle">
+    <span class="nile-slide-toggle__label">
+        ${this.label}
+      </span>
       <label class="nile-slide-toggle__switch">
         <input
           type="checkbox"
@@ -47,9 +50,6 @@ export class NileSlideToggle extends NileElement {
         />
         <span class="nile-slide-toggle__slider"></span>
       </label>
-      <span class="nile-slide-toggle__label">
-        <slot>${this.label}</slot>
-      </span>
     </div>
     ${
           hasHelpText

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,42 @@
+/**
+ * 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;
+  }
+
+  nile-radio {
+    display: inline-block;
+    padding-right: 10px;
+  }
+`;
+
+export default [styles];

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

@@ -0,0 +1,330 @@
+/**
+ * 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.
+ * @event nile-switch - Emitted when the nile component is being switched.
+  
+ */
+
+export interface switchconfig {
+  [key: string]: any;
+  toggleSwitch: boolean;
+  disable?: boolean;
+  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;
+  value?: String | boolean;
+  label?: String;
+  type: string;
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  error?: boolean;
+  errorMessage?: string;
+  options?: Array<any>;
+  multiple?: boolean;
+}
+
+export enum INPUT_TYPE {
+  DEFAULT = 'defaultInput',
+  SWITCH = 'switchInput',
+}
+
+export enum INPUT_TYPE_NAMES {
+  DROPDOWN = 'dropdown',
+  TEXT = 'text',
+  CHECKBOX = 'checkbox',
+  TEXTAREA = 'text-area',
+  RADIO = 'radio',
+  CONTENTEDITOR = 'content-editor',
+}
+
+@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({ type: Object }) nileSwitchConfig: switchconfig;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.emit('nile-init');
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.emit('nile-destroy');
+  }
+
+  renderNileText(Input: switchInputType, inputType: string) {
+    const {
+      value,
+      label,
+      placeholder,
+      disabled,
+      required,
+      errorMessage,
+      inputType: inputTypeName,
+    } = Input;
+    return html`<nile-input
+      .value=${value}
+      .label=${label}
+      .disabled=${disabled}
+      .required=${required}
+      .errorMessage=${errorMessage}
+      .placeholder=${placeholder}
+      .error=${true}
+      @nile-input=${(e: CustomEvent) => {
+        this.handleChange(e, inputType, inputTypeName);
+      }}
+    ></nile-input>`;
+  }
+
+  renderDropdown(Input: switchInputType, inputType: string) {
+    const {
+      options,
+      multiple,
+      placeholder,
+      disabled,
+      inputType: inputTypeName,
+    } = Input;
+    return html`<nile-select
+      .placeholder=${placeholder}
+      .disabled="${disabled}"
+      .multiple="${multiple}"
+      @nile-change=${(e: CustomEvent) => {
+        this.handleChange(e, inputType, inputTypeName);
+      }}
+    >
+      ${options?.map((option: any) => {
+        return html`<nile-option .value="${option}">${option} </nile-option>`;
+      })}
+    </nile-select>`;
+  }
+
+  renderNileTextArea(Input: switchInputType, inputType: string) {
+    const { value, disabled, inputType: inputTypeName } = Input;
+    return html`<nile-textarea
+      .value=${value}
+      .disabled=${disabled}
+      @nile-input=${(e: CustomEvent) => {
+        this.handleChange(e, inputType, inputTypeName);
+      }}
+    ></nile-textarea>`;
+  }
+
+  renderNileCheckBox(Input: switchInputType, inputType: string) {
+    const { value, label, disabled, inputType: inputTypeName } = Input;
+
+    return html`<nile-checkbox
+      .checked=${value}
+      .label=${label}
+      .disabled=${disabled}
+      @valueChange=${(e: CustomEvent) => {
+        this.handleChange(e, inputType, inputTypeName);
+      }}
+    ></nile-checkbox>`;
+  }
+
+  renderNileRadio(Input: switchInputType, inputType: string) {
+    const { options, value, disabled, inputType: inputTypeName } = Input;
+
+    return html`<nile-radio-group
+      .value=${value}
+      .disabled=${disabled}
+      @change=${(e: CustomEvent) => {
+        this.handleChange(e, inputType, inputTypeName);
+      }}
+    >
+      ${options &&
+      options.map((option: any) => {
+        return html`<nile-radio .value="${option}">${option} </nile-radio>`;
+      })}
+    </nile-radio-group>`;
+  }
+
+  renderContentEditor(Input: switchInputType, inputType: string) {
+    const {
+      value,
+      options,
+      inputType: inputTypeName,
+      errorMessage,
+      type,
+    } = Input;
+    return html`<nile-content-editor
+       .value=${value}
+       .options=${options}
+       .type =${type}
+       .errorMessage=${errorMessage}
+       @nile-change=${(e: CustomEvent) => {
+         this.handleChange(e, inputType, inputTypeName);
+       }}
+     >
+     </nile-radio-group>`;
+  }
+
+  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() {
+    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,
+    };
+    this.emit('nile-switch', { config: this.nileSwitchConfig });
+  }
+
+  singleFieldSwitcher(
+    defaultInput: switchInputType,
+    switchInput: switchInputType,
+    toggleField: boolean,
+    disable: boolean
+  ) {
+    const defaultInputType = defaultInput.inputType;
+    const switchInputType = switchInput.inputType;
+    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() : ''}
+    `;
+  }
+  public render(): TemplateResult {
+    const {
+      toggleSwitch: toggleField,
+      defaultInput,
+      switchInput,
+      disable,
+    } = this.nileSwitchConfig;
+
+    return html`<div class="input-container">
+      ${this.singleFieldSwitcher(
+        defaultInput,
+        switchInput,
+        toggleField,
+        !!disable
+      )}
+    </div>`;
+  }
+}
+
+export default NileSwitcher;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-switcher': NileSwitcher;
+  }
+}

package/src/nile-textarea/nile-textarea.ts

@@ -149,6 +149,8 @@ export class NileTextarea extends NileElement  {
   /** The default value of the form control. Primarily used for resetting the form control. */
   @defaultValue() defaultValue = '';
 
+  @property({ type: Boolean, reflect: true }) fullHeight = false;
+
   connectedCallback() {
     super.connectedCallback();
     this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());
@@ -157,12 +159,26 @@ export class NileTextarea extends NileElement  {
       this.setTextareaHeight();
       this.resizeObserver.observe(this.input);
     });
+
+    if(this.fullHeight){
+    requestAnimationFrame(() => {
+      let parentHeight = this.parentElement?.getBoundingClientRect().height;
+
+      if (parentHeight) {
+        parentHeight = parentHeight - 65;
+        this.shadowRoot?.querySelector('textarea')?.style.setProperty('height', `${parentHeight}px`);
+      }
+    });
+    }
+
     this.emit('nile-init');
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.resizeObserver.unobserve(this.input);
+    if(this.input) {
+          this.resizeObserver.unobserve(this.input);
+    }
     this.emit('nile-destroy');
   }