@aquera/nile-elements 0.0.6-1 → 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/nile-switcher.css.ts

@@ -32,6 +32,11 @@ export const styles = css`
     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

@@ -24,23 +24,52 @@ import { classMap } from 'lit/directives/class-map.js';
  *
  
  * @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: 'dropdown' | 'text' | 'checkbox' | 'text-area';
+  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 {
   /**
@@ -48,7 +77,7 @@ 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() nileSwitchConfig: switchconfig;
+  @property({ type: Object }) nileSwitchConfig: switchconfig;
 
   connectedCallback() {
     super.connectedCallback();
@@ -60,54 +89,123 @@ export class NileSwitcher extends NileElement {
     this.emit('nile-destroy');
   }
 
-  renderNileText(defaultInput: switchInputType) {
-    const { value, label, placeholder } = defaultInput;
+  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}
-      @nile-input=${this.handleChange}
+      .error=${true}
+      @nile-input=${(e: CustomEvent) => {
+        this.handleChange(e, inputType, inputTypeName);
+      }}
     ></nile-input>`;
   }
 
-  renderNileTextArea(switchInput: switchInputType) {
-    const { value } = switchInput;
+  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}
-      @nile-input=${this.handleChange}
+      .disabled=${disabled}
+      @nile-input=${(e: CustomEvent) => {
+        this.handleChange(e, inputType, inputTypeName);
+      }}
     ></nile-textarea>`;
   }
 
-  renderNileCheckBox(defaultInput: switchInputType) {
-    const { value, label } = defaultInput;
+  renderNileCheckBox(Input: switchInputType, inputType: string) {
+    const { value, label, disabled, inputType: inputTypeName } = Input;
 
     return html`<nile-checkbox
       .checked=${value}
       .label=${label}
-      @valueChange="${this.handleChangeCheckbox}"
+      .disabled=${disabled}
+      @valueChange=${(e: CustomEvent) => {
+        this.handleChange(e, inputType, inputTypeName);
+      }}
     ></nile-checkbox>`;
   }
 
-  handleChange(event: CustomEvent) {
-    this.emit('nile-change', { value: event.detail.value });
-  }
-
-  handleChangeCheckbox(event: CustomEvent) {
-    this.emit('nile-change', { value: event.detail.checked });
-  }
+  renderNileRadio(Input: switchInputType, inputType: string) {
+    const { options, value, disabled, inputType: inputTypeName } = Input;
 
-  renderDropdown(defaultInput: switchInputType) {
-    const { options, multiple, placeholder } = defaultInput;
-    return html`<nile-select
-      .placeholder=${placeholder}
-      .multiple="${multiple}"
-      @nile-change="${this.handleChange}"
+    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-option .value="${option}">${option} </nile-option>`;
+        return html`<nile-radio .value="${option}">${option} </nile-radio>`;
       })}
-    </nile-select>`;
+    </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() {
@@ -131,12 +229,14 @@ export class NileSwitcher extends NileElement {
       ...this.nileSwitchConfig,
       toggleSwitch: !this.nileSwitchConfig.toggleSwitch,
     };
+    this.emit('nile-switch', { config: this.nileSwitchConfig });
   }
 
   singleFieldSwitcher(
     defaultInput: switchInputType,
     switchInput: switchInputType,
-    toggleField: boolean
+    toggleField: boolean,
+    disable: boolean
   ) {
     const defaultInputType = defaultInput.inputType;
     const switchInputType = switchInput.inputType;
@@ -145,22 +245,61 @@ export class NileSwitcher extends NileElement {
         ? choose(
             defaultInputType,
             [
-              ['text', () => this.renderNileText(defaultInput)],
-              ['checkbox', () => this.renderNileCheckBox(defaultInput)],
               [
-                'dropdown',
-                () => this.renderDropdown(this.nileSwitchConfig.defaultInput),
+                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)
+            () => this.renderNileText(defaultInput, INPUT_TYPE.DEFAULT)
           )
         : choose(
             switchInputType,
-            [['text-area', () => this.renderNileTextArea(switchInput)]],
+            [
+              [
+                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)
+            () => this.renderNileTextArea(switchInput, INPUT_TYPE.SWITCH)
           )}
-      ${this.renderIcon()}
+      ${!disable ? this.renderIcon() : ''}
     `;
   }
   public render(): TemplateResult {
@@ -168,10 +307,16 @@ export class NileSwitcher extends NileElement {
       toggleSwitch: toggleField,
       defaultInput,
       switchInput,
+      disable,
     } = this.nileSwitchConfig;
 
     return html`<div class="input-container">
-      ${this.singleFieldSwitcher(defaultInput, switchInput, toggleField)}
+      ${this.singleFieldSwitcher(
+        defaultInput,
+        switchInput,
+        toggleField,
+        !!disable
+      )}
     </div>`;
   }
 }

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');
   }