@aquera/nile-elements 0.0.6-6 → 0.0.6-8

package/package.json

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

package/src/index.ts

@@ -31,3 +31,4 @@ export { NileFormHelpText } from './nile-form-help-text';
 export { NileCalendar } from './nile-calendar';
 export { NileLink } from './nile-link';
 export { NileSwitcher } from './nile-switcher';
+export { NileContentEditor } from './nile-content-editor';

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

@@ -0,0 +1 @@
+export { NileContentEditor } from './nile-content-editor';

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

@@ -0,0 +1,79 @@
+/**
+ * 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';
+
+/**
+ * AttributeExpression CSS
+ */
+export const styles = css`
+  :host {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .content-editable-wrapper {
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .content-editable-input {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 9px;
+    border: 1px solid #c7ced4;
+    border-radius: 4px;
+    overflow-x: auto;
+    overflow-anchor: none;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    cursor: text;
+    white-space: nowrap;
+    background-color: #ffffff;
+    height: 38px;
+  }
+  .content-editable-input:focus {
+    outline: none;
+  }
+
+  .content-editable-input::-webkit-scrollbar {
+    display: none;
+  }
+
+  .chips {
+    background: #e5e9eb;
+    color: #000;
+    border-radius: 4px;
+    padding: 6px;
+    margin-left: 3px;
+    display: inline;
+    letter-spacing: 0.2px;
+  }
+
+  .nile-options-container {
+    box-sizing: border-box;
+    background-color: #ffffff;
+    border: 1px solid #c7ced4;
+    overflow: auto;
+  }
+
+  nile-popup::part(popup) {
+    top: 91px;
+  }
+
+  label {
+    display: inline-block;
+    margin-bottom: 6px;
+    font-family: 'colfax-medium';
+  }
+
+  .asterik {
+    color: #e5434d;
+  }
+`;
+
+export default [styles];

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

@@ -0,0 +1,186 @@
+/**
+ * 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, query, state } from 'lit/decorators.js';
+import { styles } from './nile-content-editor.css';
+import { CSSResultGroup } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import NileElement from '../internal/nile-element';
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-attribute-expression
+ *
+ */
+@customElement('nile-content-editor')
+export class NileContentEditor extends NileElement {
+  /**
+ * @summary Allows you to handle both input and dropdown selection
+
+ * @dependency nile-option
+ 
+ * @event nile-change - Emitted when the control's value changes.  
+ */
+
+  @property() value: string = '';
+
+  @property() dropdownOptions: Array<any>;
+
+  @property() showLabel: boolean = true;
+
+  @property() labelText = '';
+
+  @property() required: boolean = true;
+
+  @query('.content-editable-input') input: HTMLInputElement;
+
+  @state() private openDropdown: boolean = false;
+
+  @property({ attribute: 'help-text' }) helpText = '';
+
+  @property({ attribute: 'error-message' }) errorMessage = '';
+
+  static styles: CSSResultGroup = styles;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.emit('nile-init');
+    this.afterFirstRender().then(res => {
+      if (res && this.value !== '')
+        this.input.innerHTML = this.generateHTMLTagsWithValues(this.value);
+    });
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.emit('nile-destroy');
+  }
+
+  async afterFirstRender(): Promise<boolean> {
+    return await this.updateComplete;
+  }
+
+  private handleChange(event: any) {
+    const value = this.input.innerText;
+    this.emitInputChange();
+    if (value.includes('$')) {
+      this.openDropdown = true;
+    }
+  }
+
+  generateValuesFromHTMLTags(string: any): string {
+    var pattern =
+      /<span class="chips(?: chip-error)?" contenteditable="false">(.*?)<\/span>/g;
+    var result = string.replace(pattern, (match: any, option: any) => {
+      return '{{' + option + '}}';
+    });
+    return result;
+  }
+
+  generateHTMLTagsWithValues(string: any): string {
+    var pattern = /{{(.*?)}}/g;
+    var result = string.replace(pattern, (match: any, option: any) => {
+      if (this.dropdownOptions.includes(option)) {
+        return (
+          '<span class="chips" contenteditable="false">' + option + '</span>'
+        );
+      }
+    });
+    return result;
+  }
+
+  emitInputChange(): void {
+    this.emit(
+      'nile-change',
+      this.generateValuesFromHTMLTags(this.input.innerHTML)
+    );
+  }
+
+  handleOptions(option: any): void {
+    this.openDropdown = !this.openDropdown;
+
+    // not appending Native element as it replaces all existing child nodes with new node
+    const autoOptionsTag =
+      '<span class="chips" contenteditable="false">' + option + '</span>';
+    this.input.innerHTML = this.input.innerHTML + autoOptionsTag;
+
+    // removing '$' from innerText  after option is being selected
+    if (this.input.lastChild?.previousSibling)
+      this.input.lastChild.previousSibling.nodeValue =
+        this.input.lastChild.previousSibling.nodeValue!.replace('$', '');
+    this.emitInputChange();
+  }
+
+  public renderAutoOptions(): TemplateResult {
+    return html`<div class="nile-options-container">
+      ${this.dropdownOptions &&
+      this.dropdownOptions.map((option: any) => {
+        return html` <nile-option
+          .value="${option}"
+          @click="${(event: Event) => {
+            this.handleOptions(option);
+          }}"
+          >${option}
+        </nile-option>`;
+      })}
+    </div>`;
+  }
+
+  public render(): TemplateResult {
+    const hasHelpText = this.helpText ? true : false;
+    const hasErrorMessage = this.errorMessage ? true : false;
+    return html`
+      <nile-popup
+        .active="${this.openDropdown}"
+        sync="width"
+        placement="bottom"
+        class=${classMap({
+          dropdown: true,
+          'dropdown--open': true,
+        })}
+      >
+        <div class="content-editable-wrapper" slot="anchor">
+          ${this.showLabel && this.labelText
+            ? html`<label class="ods-label">${this.labelText} </label> ${this
+                  .required
+                  ? html`<span class="asterik">*</span>`
+                  : ''}`
+            : ''}
+          <div
+            class="content-editable-input"
+            contenteditable="true"
+            @input=${this.handleChange}
+          ></div>
+          ${hasHelpText
+            ? html`
+                <nile-form-help-text>${this.helpText}</nile-form-help-text>
+              `
+            : ``}
+          ${hasErrorMessage
+            ? html`
+                <nile-form-error-message
+                  >${this.errorMessage}</nile-form-error-message
+                >
+              `
+            : ``}
+        </div>
+
+        ${this.renderAutoOptions()}
+      </nile-popup>
+    `;
+  }
+}
+
+export default NileContentEditor;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-content-editor': NileContentEditor;
+  }
+}

package/src/nile-icon/icons/svg/array.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBpZD0iWyBdIj48cGF0aCBkPSJNMC4zNDk2MDkgMTEuNDM5MVYwLjUzMDAyOUgyLjg3MjM0VjEuMzY1MjZIMS4zMDQxNVYxMC42MDM5SDIuODcyMzRWMTEuNDM5MUgwLjM0OTYwOVoiIGZpbGw9IiMxQzFCMUYiLz48cGF0aCBkPSJNOS41ODkzMSAwLjUzMDAyOVYxMS40MzkxSDcuMDY2NThWMTAuNjAzOUg4LjYzNDc3VjEuMzY1MjZINy4wNjY1OFYwLjUzMDAyOUg5LjU4OTMxWiIgZmlsbD0iIzFDMUIxRiIvPjwvZz48L3N2Zz4=";

package/src/nile-icon/icons/svg/arrayofobject.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEuOTk5OSAyVjEySDkuNjY2MDJWMTEuMzIzMUgxMS4yNTE1VjIuNjc2ODZIOS42NjYwMlYySDExLjk5OTlaIiBmaWxsPSJibGFjayIvPjxwYXRoIGQ9Ik0xMC42NTczIDYuNjYxNTdIMTAuOTMzMVY3LjMzODQzSDEwLjY1NzNDMTAuMDI3MSA3LjMzODQzIDkuNjkyMjYgNy43NDIzNiA5LjY5MjI2IDguNDQxMDVWMTAuMzYyNEM5LjY5MjI2IDExLjM2NjggOS4xODAxOSAxMiA4LjE0NjIgMTJINy40NzY1NlYxMS4zMjMxSDguMDI4MDNDOC43MDc1MSAxMS4zMjMxIDguOTQzODUgMTAuOTYyOSA4Ljk0Mzg1IDEwLjMyOTdWOC4zNzU1NUM4Ljk0Mzg1IDcuNjExMzUgOS4yNDkxMiA3LjEyMDA5IDkuODk5MDYgN0M5LjI0OTEyIDYuODc5OTEgOC45NDM4NSA2LjM4ODY1IDguOTQzODUgNS42MjQ0NVYzLjY3MDMxQzguOTQzODUgMy4wMzcxMiA4LjcwNzUxIDIuNjc2ODYgOC4wMjgwMyAyLjY3Njg2SDcuNDc2NTZWMkg4LjE0NjJDOS4xODAxOSAyIDkuNjkyMjYgMi42MzMxOSA5LjY5MjI2IDMuNjM3NTVWNS41NTg5NUM5LjY5MjI2IDYuMjU3NjQgMTAuMDI3MSA2LjY2MTU3IDEwLjY1NzMgNi42NjE1N1oiIGZpbGw9ImJsYWNrIi8+PHBhdGggZD0iTTMuMDk1NyA2LjY2MTU3SDMuMzcxNDRDNC4wMDE2OCA2LjY2MTU3IDQuMzM2NSA2LjI1NzY0IDQuMzM2NSA1LjU1ODk1VjMuNjM3NTVDNC4zMzY1IDIuNjMzMTkgNC44NDg1NyAyIDUuODgyNTYgMkg2LjU1MjJWMi42NzY4Nkg2LjAwMDczQzUuMzIxMjUgMi42NzY4NiA1LjA4NDkxIDMuMDM3MTIgNS4wODQ5MSAzLjY3MDMxVjUuNjI0NDVDNS4wODQ5MSA2LjM4ODY1IDQuNzc5NjQgNi44Nzk5MSA0LjEyOTcgN0M0Ljc3OTY0IDcuMTIwMDkgNS4wODQ5MSA3LjYxMTM1IDUuMDg0OTEgOC4zNzU1NVYxMC4zMjk3QzUuMDg0OTEgMTAuOTYyOSA1LjMyMTI1IDExLjMyMzEgNi4wMDA3MyAxMS4zMjMxSDYuNTUyMlYxMkg1Ljg4MjU2QzQuODQ4NTcgMTIgNC4zMzY1IDExLjM2NjggNC4zMzY1IDEwLjM2MjRWOC40NDEwNUM0LjMzNjUgNy43NDIzNiA0LjAwMTY4IDcuMzM4NDMgMy4zNzE0NCA3LjMzODQzSDMuMDk1N1Y2LjY2MTU3WiIgZmlsbD0iYmxhY2siLz48cGF0aCBkPSJNMiAxMlYySDQuMzMzODdWMi42NzY4NkgyLjc0ODQxVjExLjMyMzFINC4zMzM4N1YxMkgyWiIgZmlsbD0iYmxhY2siLz48L3N2Zz4=";

package/src/nile-icon/icons/svg/index.ts

@@ -14,6 +14,8 @@ export { default as applications } from './applications';
 export { default as approve } from './approve';
 export { default as aquera } from './aquera';
 export { default as aquerasupport } from './aquerasupport';
+export { default as array } from './array';
+export { default as arrayofobject } from './arrayofobject';
 export { default as arrow } from './arrow';
 export { default as arrowdown } from './arrowdown';
 export { default as arrowdropdown } from './arrowdropdown';
@@ -232,6 +234,8 @@ export { default as notificationadded } from './notificationadded';
 export { default as notscheduled } from './notscheduled';
 export { default as null } from './null';
 export { default as number } from './number';
+export { default as numberinput } from './numberinput';
+export { default as object } from './object';
 export { default as operators } from './operators';
 export { default as options } from './options';
 export { default as orchestrationsolid } from './orchestration-solid';
@@ -322,6 +326,7 @@ export { default as stop } from './stop';
 export { default as storybook } from './storybook';
 export { default as string } from './string';
 export { default as stringinput } from './stringinput';
+export { default as stringletters } from './stringletters';
 export { default as support } from './support';
 export { default as swap } from './swap';
 export { default as sync } from './sync';

package/src/nile-icon/icons/svg/numberinput.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkuMTg3NSAxLjMxMjVIMTAuNVYwLjQzNzVIN1YxLjMxMjVIOC4zMTI1VjEyLjY4NzVIN1YxMy41NjI1SDEwLjVWMTIuNjg3NUg5LjE4NzVWMS4zMTI1Wk0xLjMxMjUgMy4wNjI1SDdWMy45Mzc1SDIuMTg3NVYxMC4wNjI1SDdWMTAuOTM3NUgxLjMxMjVWMy4wNjI1Wk0xMS44MTI1IDMuOTM3NUgxMC41VjMuMDYyNUgxMi42ODc1VjEwLjkzNzVIMTAuNVYxMC4wNjI1SDExLjgxMjVWMy45Mzc1Wk01LjE0ODYxIDguMTQwNDlINC4zNzVWOC43NUg2LjU5NTAzVjguMTQwNDlINS44MjE0MlY1LjI1SDUuMTUzM0w0LjQyODkyIDUuNDIzNDhWNi4wNDcwNUw1LjE0ODYxIDUuODY4ODlWOC4xNDA0OVoiIGZpbGw9ImJsYWNrIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/object.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCAxMC4yNzQ5VjkuMjgyNjVDMC44OTA5MjEgOS4yODI2NSAxLjUxMjQzIDkuMDk1OTMgMS44NjQ1MyA4LjcyMjVDMi4yMjE5NyA4LjM0OTA1IDIuNDAwNjkgNy43MjQ4OCAyLjQwMDY5IDYuODQ5OTZWNC4yODkyM0MyLjQwMDY5IDMuNTUzMDIgMi40NzAwNCAyLjkxNTUgMi42MDg3NSAyLjM3NjY4QzIuNzUyNzkgMS44Mzc4NiAyLjk4NDg1IDEuMzkyNCAzLjMwNDk0IDEuMDQwM0MzLjYyNTA0IDAuNjg4MTk4IDQuMDUxODMgMC40MjY3OSA0LjU4NTMxIDAuMjU2MDc0QzUuMTE4OCAwLjA4NTM1ODEgNS43Nzc2NSAwIDYuNTYxODggMFYxLjU2ODQ1QzUuOTQzMDMgMS41Njg0NSA1LjQ1NDg5IDEuNjY0NDggNS4wOTc0NiAxLjg1NjUzQzQuNzQ1MzYgMi4wNDg1OSA0LjQ5NDYyIDIuMzQ3MzQgNC4zNDUyNCAyLjc1Mjc5QzQuMjAxMiAzLjE1MjkgNC4xMjkxOCAzLjY2NTA1IDQuMTI5MTggNC4yODkyM1Y3LjQ5MDE0QzQuMTI5MTggNy45MDYyNiA0LjA3MzE2IDguMjg1MDQgMy45NjExMyA4LjYyNjQ3QzMuODU0NDQgOC45Njc5IDMuNjU0MzggOS4yNjEzMSAzLjM2MDk2IDkuNTA2NzJDMy4wNjc1NCA5Ljc1MjEyIDIuNjQ4NzYgOS45NDE1MSAyLjEwNDYgMTAuMDc0OUMxLjU2NTc4IDEwLjIwODMgMC44NjQyNDcgMTAuMjc0OSAwIDEwLjI3NDlaTTYuNTYxODggMjAuNDg1OUM1Ljc3NzY1IDIwLjQ4NTkgNS4xMTg4IDIwLjQwMDUgNC41ODUzMSAyMC4yMjk4QzQuMDUxODMgMjAuMDU5MSAzLjYyNTA0IDE5Ljc5NzcgMy4zMDQ5NCAxOS40NDU2QzIuOTg0ODUgMTkuMDkzNSAyLjc1Mjc5IDE4LjY0OCAyLjYwODc1IDE4LjEwOTJDMi40NzAwNCAxNy41NzA0IDIuNDAwNjkgMTYuOTMyOCAyLjQwMDY5IDE2LjE5NjZWMTMuNjM1OUMyLjQwMDY5IDEyLjc2MSAyLjIyMTk3IDEyLjEzNjggMS44NjQ1MyAxMS43NjM0QzEuNTEyNDMgMTEuMzg5OSAwLjg5MDkyMSAxMS4yMDMyIDAgMTEuMjAzMlYxMC4yMTA5QzAuODY0MjQ3IDEwLjIxMDkgMS41NjU3OCAxMC4yNzc2IDIuMTA0NiAxMC40MTFDMi42NDg3NiAxMC41NDQzIDMuMDY3NTQgMTAuNzMzNyAzLjM2MDk2IDEwLjk3OTFDMy42NTQzOCAxMS4yMjQ1IDMuODU0NDQgMTEuNTE4IDMuOTYxMTMgMTEuODU5NEM0LjA3MzE2IDEyLjIwMDggNC4xMjkxOCAxMi41Nzk2IDQuMTI5MTggMTIuOTk1N1YxNi4xOTY2QzQuMTI5MTggMTYuODIwOCA0LjIwMTIgMTcuMzMzIDQuMzQ1MjQgMTcuNzMzMUM0LjQ5NDYyIDE4LjEzMzIgNC43NDUzNiAxOC40MjkzIDUuMDk3NDYgMTguNjIxM0M1LjQ1NDg5IDE4LjgxODcgNS45NDMwMyAxOC45MTc0IDYuNTYxODggMTguOTE3NFYyMC40ODU5Wk0wIDExLjIwMzJWOS4yODI2NUgxLjg4ODU0VjExLjIwMzJIMFoiIGZpbGw9ImJsYWNrIi8+PHBhdGggZD0iTTIxIDEwLjIxMDlWMTEuMjAzMkMyMC4xMDkxIDExLjIwMzIgMTkuNDg0OSAxMS4zODk5IDE5LjEyNzUgMTEuNzYzNEMxOC43NzU0IDEyLjEzNjggMTguNTk5MyAxMi43NjEgMTguNTk5MyAxMy42MzU5VjE2LjE5NjZDMTguNTk5MyAxNi45MzI4IDE4LjUyNzMgMTcuNTcwNCAxOC4zODMzIDE4LjEwOTJDMTguMjQ0NSAxOC42NDggMTguMDE1MSAxOS4wOTM1IDE3LjY5NTEgMTkuNDQ1NkMxNy4zNzUgMTkuNzk3NyAxNi45NDgyIDIwLjA1OTEgMTYuNDE0NyAyMC4yMjk4QzE1Ljg4MTIgMjAuNDAwNSAxNS4yMjI0IDIwLjQ4NTkgMTQuNDM4MSAyMC40ODU5VjE4LjkxNzRDMTUuMDU3IDE4LjkxNzQgMTUuNTQyNCAxOC44MTg3IDE1Ljg5NDUgMTguNjIxM0MxNi4yNTIgMTguNDI5MyAxNi41MDI3IDE4LjEzMzIgMTYuNjQ2OCAxNy43MzMxQzE2Ljc5NjEgMTcuMzMzIDE2Ljg3MDggMTYuODIwOCAxNi44NzA4IDE2LjE5NjZWMTIuOTk1N0MxNi44NzA4IDEyLjU3OTYgMTYuOTI0MiAxMi4yMDA4IDE3LjAzMDkgMTEuODU5NEMxNy4xNDI5IDExLjUxOCAxNy4zNDU2IDExLjIyNDUgMTcuNjM5IDEwLjk3OTFDMTcuOTMyNSAxMC43MzM3IDE4LjM0ODYgMTAuNTQ0MyAxOC44ODc0IDEwLjQxMUMxOS40MzE2IDEwLjI3NzYgMjAuMTM1OCAxMC4yMTA5IDIxIDEwLjIxMDlaTTE0LjQzODEgMEMxNS4yMjI0IDAgMTUuODgxMiAwLjA4NTM1ODEgMTYuNDE0NyAwLjI1NjA3NEMxNi45NDgyIDAuNDI2NzkgMTcuMzc1IDAuNjg4MTk4IDE3LjY5NTEgMS4wNDAzQzE4LjAxNTEgMS4zOTI0IDE4LjI0NDUgMS44Mzc4NiAxOC4zODMzIDIuMzc2NjhDMTguNTI3MyAyLjkxNTUgMTguNTk5MyAzLjU1MzAyIDE4LjU5OTMgNC4yODkyM1Y2Ljg0OTk2QzE4LjU5OTMgNy43MjQ4OCAxOC43NzU0IDguMzQ5MDUgMTkuMTI3NSA4LjcyMjVDMTkuNDg0OSA5LjA5NTkzIDIwLjEwOTEgOS4yODI2NSAyMSA5LjI4MjY1VjEwLjI3NDlDMjAuMTM1OCAxMC4yNzQ5IDE5LjQzMTYgMTAuMjA4MyAxOC44ODc0IDEwLjA3NDlDMTguMzQ4NiA5Ljk0MTUxIDE3LjkzMjUgOS43NTIxMiAxNy42MzkgOS41MDY3MkMxNy4zNDU2IDkuMjYxMzEgMTcuMTQyOSA4Ljk2NzkgMTcuMDMwOSA4LjYyNjQ3QzE2LjkyNDIgOC4yODUwNCAxNi44NzA4IDcuOTA2MjYgMTYuODcwOCA3LjQ5MDE0VjQuMjg5MjNDMTYuODcwOCAzLjY2NTA1IDE2Ljc5NjEgMy4xNTI5IDE2LjY0NjggMi43NTI3OUMxNi41MDI3IDIuMzQ3MzQgMTYuMjUyIDIuMDQ4NTkgMTUuODk0NSAxLjg1NjUzQzE1LjU0MjQgMS42NjQ0OCAxNS4wNTcgMS41Njg0NSAxNC40MzgxIDEuNTY4NDVWMFpNMjEgOS4yODI2NVYxMS4yMDMySDE5LjExMTVWOS4yODI2NUgyMVoiIGZpbGw9ImJsYWNrIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/stringletters.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNS4zNjg1NyA1SDQuMTUxNDNMMiAxMUgzLjE5MTQzTDMuNTk0MjkgOS43NEg1LjkyNTcxTDYuMzI4NTcgMTFINy41Mkw1LjM2ODU3IDVaTTQuNzYgNi4wOEw1LjYxNzE0IDguNzg4NTdIMy44OTQyOUw0Ljc2IDYuMDhaIiBmaWxsPSJibGFjayIvPjxwYXRoIGQ9Ik05LjkyMzY4IDExSDEyLjY1OEMxMy44NTggMTEgMTQuNjg5NCAxMC4zMTQzIDE0LjY4OTQgOS4zMTE0M0MxNC42ODk0IDguNDk3MTQgMTQuMTkyMyA4LjAyNTcxIDEzLjU3NTEgNy44OTcxNEMxMy45OTUxIDcuNjU3MTQgMTQuMzI5NCA3LjIwMjg2IDE0LjMyOTQgNi41MTcxNEMxNC4zMjk0IDUuNjE3MTQgMTMuNjY5NCA1IDEyLjYxNTEgNUg5LjkyMzY4VjExWk0xMS4wODk0IDEwLjA1NzFWOC40MkgxMi41ODk0QzEzLjE1NTEgOC40MiAxMy40ODk0IDguNzM3MTQgMTMuNDg5NCA5LjIzNDI5QzEzLjQ4OTQgOS43NCAxMy4xNzIzIDEwLjA1NzEgMTIuNTk4IDEwLjA1NzFIMTEuMDg5NFpNMTEuMDg5NCA3LjQ4NTcxVjUuOTQyODZIMTIuMzQwOEMxMi44MzggNS45NDI4NiAxMy4xMjk0IDYuMjM0MjkgMTMuMTI5NCA2LjY4ODU3QzEzLjEyOTQgNy4xNTE0MyAxMi44NTUxIDcuNDg1NzEgMTIuMzQ5NCA3LjQ4NTcxSDExLjA4OTRaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==";

package/src/nile-input/nile-input.ts

@@ -445,6 +445,7 @@ export class NileInput extends NileElement implements NileFormControl {
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
     const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasLabelSuffixSlot = this.hasSlotController.test('label-suffix');
     const hasHelpText = this.helpText ? true : false;
     const hasErrorMessage = this.errorMessage ? true : false;
     const hasClearIcon =
@@ -474,6 +475,8 @@ export class NileInput extends NileElement implements NileFormControl {
           <slot name="label">${this.label}</slot>
         </label>
 
+        ${hasLabelSuffixSlot ? html` <slot name="label-suffix"></slot> ` : ``}
+
         <div part="form-control-input" class="form-control-input">
           <div
             part="base"

package/src/nile-radio-group/nile-radio-group.ts

@@ -209,6 +209,7 @@ export class NileRadioGroup extends NileElement {
   render() {
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
+    const hasLabelSuffixSlot = this.hasSlotController.test('label-suffix');
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHelpText = this.helpText ? true : false;
     const hasErrorMessage = this.errorMessage ? true : false;
@@ -247,6 +248,8 @@ export class NileRadioGroup extends NileElement {
           <slot name="label">${this.label}</slot>
         </label>
 
+        ${hasLabelSuffixSlot ? html` <slot name="label-suffix"></slot> ` : ``}
+
         <div part="form-control-input" class="form-control-input">
           <div class="visually-hidden">
             <label class="radio-group__validation">

package/src/nile-select/nile-select.ts

@@ -873,6 +873,7 @@ export class NileSelect extends NileElement implements NileFormControl {
   render() {
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
+    const hasLabelSuffixSlot = this.hasSlotController.test('label-suffix');
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasClearIcon =
       this.clearable && !this.disabled && this.value.length > 0;
@@ -903,6 +904,8 @@ export class NileSelect extends NileElement implements NileFormControl {
           <slot name="label">${this.label}</slot>
         </label>
 
+        ${hasLabelSuffixSlot ? html` <slot name="label-suffix"></slot> ` : ``}
+
         <div part="form-control-input" class="form-control-input">
           <nile-popup
             class=${classMap({

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

@@ -35,14 +35,20 @@ export interface switchconfig {
 }
 
 export interface switchInputType {
-  inputType: 'dropdown' | 'text' | 'checkbox' | 'text-area';
+  inputType: 'dropdown' | 'text' | 'checkbox' | 'text-area' | 'radio';
   value?: String | boolean;
   label?: String;
   placeholder?: string;
+  disabled?: boolean;
   options?: Array<any>;
   multiple?: boolean;
 }
 
+export enum INPUT_TYPE {
+  DEFAULT = 'defaultInput',
+  SWITCH = 'switchInput',
+}
+
 @customElement('nile-switcher')
 export class NileSwitcher extends NileElement {
   /**
@@ -50,7 +56,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();
@@ -62,54 +68,93 @@ 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 } = Input;
     return html`<nile-input
       .value=${value}
       .label=${label}
+      .disabled=${disabled}
       .placeholder=${placeholder}
-      @nile-input=${this.handleChange}
+      @nile-input=${(e: CustomEvent) => {
+        this.handleChange(e, inputType);
+      }}
     ></nile-input>`;
   }
 
-  renderNileTextArea(switchInput: switchInputType) {
-    const { value } = switchInput;
+  renderDropdown(Input: switchInputType, inputType: string) {
+    const { options, multiple, placeholder, disabled } = Input;
+    return html`<nile-select
+      .placeholder=${placeholder}
+      .disabled="${disabled}"
+      .multiple="${multiple}"
+      @nile-change=${(e: CustomEvent) => {
+        this.handleChange(e, inputType);
+      }}
+    >
+      ${options?.map((option: any) => {
+        return html`<nile-option .value="${option}">${option} </nile-option>`;
+      })}
+    </nile-select>`;
+  }
+
+  renderNileTextArea(Input: switchInputType, inputType: string) {
+    const { value, disabled } = Input;
     return html`<nile-textarea
       .value=${value}
-      @nile-input=${this.handleChange}
+      .disabled=${disabled}
+      @nile-input=${(e: CustomEvent) => {
+        this.handleChange(e, inputType);
+      }}
     ></nile-textarea>`;
   }
 
-  renderNileCheckBox(defaultInput: switchInputType) {
-    const { value, label } = defaultInput;
+  renderNileCheckBox(Input: switchInputType, inputType: string) {
+    const { value, label, disabled } = Input;
 
     return html`<nile-checkbox
       .checked=${value}
       .label=${label}
-      @valueChange="${this.handleChangeCheckbox}"
+      .disabled=${disabled}
+      @valueChange=${(e: CustomEvent) => {
+        this.handleChangeCheckbox(e, inputType);
+      }}
     ></nile-checkbox>`;
   }
 
-  handleChange(event: CustomEvent) {
-    this.emit('nile-change', { value: event.detail.value });
-  }
+  renderNileRadio(Input: switchInputType, inputType: string) {
+    const { options, value, disabled } = Input;
 
-  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}"
+    return html`<nile-radio-group
+      .value=${value}
+      .disabled=${disabled}
+      @change=${(e: CustomEvent) => {
+        this.handleChange(e, inputType);
+      }}
     >
       ${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>`;
+  }
+
+  handleChange(event: CustomEvent, inputType: string) {
+    if (inputType === INPUT_TYPE.DEFAULT) {
+      this.nileSwitchConfig.defaultInput.value = event.detail.value;
+    } else {
+      this.nileSwitchConfig.switchInput.value = event.detail.value;
+    }
+    event.stopPropagation();
+    this.emit('nile-change', { config: this.nileSwitchConfig });
+  }
+
+  handleChangeCheckbox(event: CustomEvent, inputType: string) {
+    if (inputType === INPUT_TYPE.DEFAULT) {
+      this.nileSwitchConfig.defaultInput.value = event.detail.checked;
+    } else {
+      this.nileSwitchConfig.switchInput.value = event.detail.checked;
+    }
+    this.emit('nile-change', { config: this.nileSwitchConfig });
   }
 
   renderIcon() {
@@ -148,20 +193,47 @@ export class NileSwitcher extends NileElement {
         ? choose(
             defaultInputType,
             [
-              ['text', () => this.renderNileText(defaultInput)],
-              ['checkbox', () => this.renderNileCheckBox(defaultInput)],
+              [
+                'text',
+                () => this.renderNileText(defaultInput, INPUT_TYPE.DEFAULT),
+              ],
+              [
+                'checkbox',
+                () => this.renderNileCheckBox(defaultInput, INPUT_TYPE.DEFAULT),
+              ],
+              [
+                'text-area',
+                () => this.renderNileTextArea(defaultInput, INPUT_TYPE.DEFAULT),
+              ],
+              [
+                'radio',
+                () => this.renderNileRadio(defaultInput, INPUT_TYPE.DEFAULT),
+              ],
               [
                 'dropdown',
-                () => this.renderDropdown(this.nileSwitchConfig.defaultInput),
+                () =>
+                  this.renderDropdown(
+                    this.nileSwitchConfig.defaultInput,
+                    INPUT_TYPE.DEFAULT
+                  ),
               ],
             ],
-            () => this.renderNileText(defaultInput)
+            () => this.renderNileText(defaultInput, INPUT_TYPE.DEFAULT)
           )
         : choose(
             switchInputType,
-            [['text-area', () => this.renderNileTextArea(switchInput)]],
+            [
+              [
+                'text-area',
+                () => this.renderNileTextArea(switchInput, INPUT_TYPE.SWITCH),
+              ],
+              [
+                'text',
+                () => this.renderNileText(switchInput, INPUT_TYPE.SWITCH),
+              ],
+            ],
 
-            () => this.renderNileTextArea(switchInput)
+            () => this.renderNileTextArea(switchInput, INPUT_TYPE.SWITCH)
           )}
       ${this.renderIcon()}
     `;

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

@@ -176,7 +176,9 @@ export class NileTextarea extends NileElement  {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.resizeObserver.unobserve(this.input);
+    if(this.input) {
+          this.resizeObserver.unobserve(this.input);
+    }
     this.emit('nile-destroy');
   }