@aquera/nile-elements 0.0.12 → 0.0.14

package/package.json

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

package/src/internal/enum.ts

@@ -14,4 +14,7 @@ export const KeyCode = {
   ARROW_UP: 'ArrowUp',
   ARROW_RIGHT: 'ArrowRight',
   ARROW_DOWN: 'ArrowDown',
+  CUT: 'KeyX',
+  COPY: 'Copy',
+  PASTE: 'Paste',
 };

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

@@ -25,7 +25,7 @@ export const styles = css`
 
   .dropdown-position {
     position: relative;
-    bottom: 60px;
+    bottom: 20px;
   }
   .content-editable-input {
     box-sizing: border-box;

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

@@ -66,6 +66,7 @@ export class NileContentEditor extends NileElement {
 
   connectedCallback() {
     this.handleOutsideClick = this.handleOutsideClick.bind(this);
+    this.handleClipboardEvent = this.handleClipboardEvent.bind(this);
     super.connectedCallback();
     this.emit('nile-init');
     this.addOpenListeners();
@@ -83,10 +84,40 @@ export class NileContentEditor extends NileElement {
 
   addOpenListeners() {
     window.addEventListener('click', this.handleOutsideClick);
+    window.addEventListener('cut', this.handleClipboardEvent);
+    window.addEventListener('copy', this.handleClipboardEvent);
+    window.addEventListener('paste', this.handleClipboardEvent);
   }
 
   removeOpenListeners() {
     window.removeEventListener('click', this.handleOutsideClick);
+    window.removeEventListener('cut', this.handleClipboardEvent);
+    window.removeEventListener('copy', this.handleClipboardEvent);
+    window.removeEventListener('paste', this.handleClipboardEvent);
+  }
+
+  async handleClipboardEvent(event: Event) {
+    const selectedText = window?.getSelection()?.toString();
+    switch (event.type) {
+      case 'cut':
+      case 'copy':
+        if (!!selectedText) await navigator.clipboard.writeText(selectedText);
+        document.execCommand(event.type);
+        break;
+      case 'paste':
+        event.preventDefault();
+        let pastedText = await navigator.clipboard.readText();
+        pastedText = pastedText
+          .replace(/<(|\/)(html|body|meta|span)[^>]*?>/gi, '')
+          .trim();
+        document.execCommand('insertText', false, pastedText);
+        break;
+      default:
+        break;
+    }
+    setTimeout(() => {
+      this.emitInputChange();
+    });
   }
 
   toggleDropdown(value: boolean) {
@@ -110,20 +141,17 @@ export class NileContentEditor extends NileElement {
     this.emit('nile-destroy');
   }
 
-  handlePaste(event: ClipboardEvent) {
-    event.preventDefault();
-    if (event.clipboardData) {
-      let text = event.clipboardData.getData('text/plain');
-      document.execCommand('insertText', false, text);
-    }
-    this.emitInputChange();
-  }
-
   private handlekeyDown(event: any) {
     if (event.code === KeyCode.ENTER && this.type === 'text') {
       event.preventDefault();
       return;
     }
+    if (
+      [KeyCode.CUT, KeyCode.COPY, KeyCode.PASTE].includes(event.code) &&
+      (event.ctrlKey || event.metaKey)
+    ) {
+      return;
+    }
     if (event.code === KeyCode.ESCAPE) {
       event.preventDefault();
       this.toggleDropdown(false);
@@ -133,19 +161,20 @@ export class NileContentEditor extends NileElement {
       const value = this.contentEditor.innerText;
       this.emitInputChange();
       if (value.includes(this.tagIdentifier)) {
-        this.toggleDropdown(true);
+        this.insertNodes(this.contentEditor, this.contentEditor.childNodes);
         this.filterOptions();
+        this.toggleDropdown(true);
       } else {
         this.toggleDropdown(false);
       }
-    });
+    }, 10);
   }
 
   filterOptions() {
     this.filteredOptions = this.options;
     if (!!this.options.length && !!this.filteredValue) {
       this.filteredOptions = this.options.filter(item =>
-        item.startsWith(this.filteredValue)
+        item.includes(this.filteredValue)
       );
     } else {
       this.filteredOptions = this.options;
@@ -166,39 +195,57 @@ export class NileContentEditor extends NileElement {
     var result = string.replace(pattern, (match: any, option: any) => {
       return this.options.includes(option)
         ? '<span class="chips" contenteditable="false">' + option + '</span>'
-        : '<span class="chips chip-error" contenteditable="false">' +
-            option +
-            '</span>';
+        : this.setError(option);
     });
     return result;
   }
 
+  setError(option: any) {
+    this.error = true;
+    return (
+      '<span class="chips chip-error" contenteditable="false">' +
+      option +
+      '</span>'
+    );
+  }
+
   emitInputChange(): void {
     if (this.contentEditor) {
       let fieldValue = this.contentEditor.innerHTML;
-
       if (this.contentEditor.innerText !== '') {
         fieldValue = this.generateValuesFromHTMLTags(fieldValue);
       }
       fieldValue = fieldValue.replace(/&nbsp;/g, ' ');
-      fieldValue = fieldValue === '<br>' ? '' : fieldValue?.trim();
+      fieldValue = fieldValue.replace('<br>', '');
       this.emit('nile-change', {
         value: this.generateValuesFromHTMLTags(fieldValue),
       });
     }
   }
 
-  insertNodes(parentNode: Node, childNodes: NodeList, autoOptionsTag: Node) {
-    Array.from(childNodes).map((node: Node, index: number) => {
+  insertNodes(parentNode: Node, childNodes: NodeList, autoOptionsTag?: Node) {
+    [...childNodes].forEach((node: Node, index: number) => {
       if (node.hasChildNodes()) {
-        this.insertNodes(node, node.childNodes, autoOptionsTag);
+        if (autoOptionsTag) {
+          this.insertNodes(node, node.childNodes, autoOptionsTag);
+        } else {
+          this.insertNodes(node, node.childNodes);
+        }
       } else {
         if (node.nodeValue?.includes(this.tagIdentifier)) {
-          parentNode.childNodes[index].nodeValue = node.nodeValue?.replace(
-            this.tagIdentifier + this.filteredValue,
-            ''
-          );
-          parentNode.childNodes[index].after(autoOptionsTag);
+          if (autoOptionsTag) {
+            parentNode.childNodes[index].nodeValue = node.nodeValue?.replace(
+              this.tagIdentifier + this.filteredValue,
+              ''
+            );
+            parentNode.childNodes[index].after(autoOptionsTag);
+          }
+          this.filteredValue =
+            parentNode?.childNodes[index]?.nodeValue
+              ?.split(this.tagIdentifier)
+              .slice(1)
+              .join() || '';
+          return;
         }
       }
     });
@@ -250,6 +297,7 @@ export class NileContentEditor extends NileElement {
       <nile-popup
         .active="${live(this.openDropdown)}"
         sync="width"
+        strategy="fixed"
         placement="bottom"
         class=${classMap({
           dropdown: true,
@@ -261,11 +309,12 @@ export class NileContentEditor extends NileElement {
           ${this.showLabel && this.labelText
             ? html`<label class="ods-label">${this.labelText} </label> ${this
                   .required
-                  ? html`<sapn class="asterik">*</span>`
+                  ? html`<span class="asterik">*</span>`
                   : ''}`
             : ''}
           <div
             contenteditable="${!readonly}"
+            spellcheck="false"
             class=${classMap({
               'content-editable-input': true,
               error: hasError || hasErrorMessage,
@@ -273,7 +322,6 @@ export class NileContentEditor extends NileElement {
               'text-area': type === 'text-area' ? true : false,
             })}
             @keydown=${this.handlekeyDown}
-            @paste=${this.handlePaste}
           ></div>
           ${hasHelpText
             ? html`
@@ -288,8 +336,9 @@ export class NileContentEditor extends NileElement {
               `
             : ``}
         </div>
-
-        ${this.renderAutoOptions()}
+        ${this.filteredOptions && !!this.filteredOptions.length
+          ? this.renderAutoOptions()
+          : null}
       </nile-popup>
     `;
   }

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

@@ -30,6 +30,7 @@ export const styles = css`
 
   .nile-error-message__response {
     color: var(--nile-colors-dark-500);
+    margin-top:6px;
   }
 
   .nile-error-message__icon {

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

@@ -26,6 +26,10 @@ export class NileErrorMessage extends LitElement {
   @property({ type: String })
   errorResponse: string;
 
+  // Extended error information
+  @property({ type: String })
+  errorResponseLong: string;
+
   @property({ type: Boolean })
   isExpanded: boolean = false;
 
@@ -64,22 +68,26 @@ export class NileErrorMessage extends LitElement {
 
 
         ${this.errorResponse
-          ? html` <span class="nile-error-message__response"
-                >${this.getTruncatedResponse()}</span
-              >
+        ? html`
+            <div class="nile-error-message__response">
+            ${this.errorResponse}
+            ${this.errorResponseLong
+                ? html`
               <span
-                class="nile-error-message__more-button"
-                @click=${this.toggleExpanded}
-                >${this.isExpanded ? 'View Less' : 'View More'}</span
-              >`
-          : ``}
+              class="nile-error-message__more-button"
+              @click=${this.toggleExpanded}
+              >${this.isExpanded ? 'View Less' : 'View More'}</span
+            >`:``}
+            </div>
+            `
+        : ``}
 
         <div
           class="nile-error-message__response-expanded ${this.isExpanded
             ? 'expanded'
             : 'collapsed'}"
         >
-          ${this.errorResponse}
+          ${this.errorResponseLong}
         </div>
       </div>
     `;

package/src/nile-form-help-text/nile-form-help-text.css.ts

@@ -26,8 +26,18 @@ export const styles = css`
     line-height: 12px;
     letter-spacing: 0.2px;
     margin-top: 6px;
+    margin-right: 4px;
+    width: auto;
   }
 
+  .nile-form-help-text__more-button {
+    display: inline-flex;
+    gap: 4px;
+    color: var(--nile-colors-primary-600);
+    cursor: pointer;
+    white-space: nowrap;
+    align-items: center
+  }
 `;
 
 export default [styles];

package/src/nile-form-help-text/nile-form-help-text.ts

@@ -6,7 +6,7 @@
  */
 
 import {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
-import { customElement } from 'lit/decorators.js';
+import { customElement, query } from 'lit/decorators.js';
 import {styles} from './nile-form-help-text.css';
 
 /**
@@ -17,32 +17,79 @@ import {styles} from './nile-form-help-text.css';
  */
 @customElement('nile-form-help-text')
 export class NileFormHelpText extends LitElement {
+  /**
+   * The styles for FormHelpText
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+
+  @property({ type: Boolean })
+  isExpanded: boolean = false;
+
+  @property({ type: String })
+  fullText: string = '';
+
+  @property({ type: String })
+  displayedText: string = '';
+
+  @query('slot')
+  slotElement!: HTMLSlotElement;
+
+  connectedCallback() {
+    super.connectedCallback();
+    requestAnimationFrame(() => {
+      this.slotElement?.addEventListener('slotchange', this.handleSlotChange.bind(this));
+  });
+  }
+
+  firstUpdated() {
+    this.handleSlotChange();
+  }
+
+  handleSlotChange() {
+    const nodes = this.slotElement.assignedNodes({flatten: true});
+    const textContent = nodes.map(node => node.textContent).join('');
+    this.fullText = textContent;
+    this.displayedText = textContent.length > 50 ? `${textContent.substring(0, 47)}...` : textContent;
+  }
+
+  toggleExpanded() {
+    this.isExpanded = !this.isExpanded;
+    this.displayedText = this.isExpanded ? this.fullText : `${this.fullText.substring(0, 47)}...`;
+  }
 
-	/**
-	 * The styles for FormHelpText
-	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
-	 */
-	public static get styles(): CSSResultArray {
-		return [styles];
-	}
-
-	/* #endregion */
-
-	/* #region Methods */
-
-	/**
-	 * Render method
-	 * @slot This is a slot test
-	 */
-	public render(): TemplateResult {
-		return html`
-      <div class="nile-form-help-text">
-         <slot> </slot>
-        </div>
-			`;
-	}
-
-	/* #endregion */
+  /* #endregion */
+
+  /* #region Methods */
+
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+  public render(): TemplateResult {
+    const showMoreButton = this.fullText.length > 50;
+    const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';
+
+    return html`
+    <div class="nile-form-help-text" part="container">
+      <slot hidden></slot>
+      <div part="text">${this.displayedText}
+        ${showMoreButton ? html`
+          <span
+            class="nile-form-help-text__more-button"
+            part="toggle-button"
+            @click=${this.toggleExpanded}
+            >${this.isExpanded ? 'View Less' : 'View More'}
+            <nile-icon color="#005EA6" part="icon" size="14" name="${iconName}"></nile-icon>
+  </span>
+        ` : ''}
+  </div>
+    </div>
+  `;
+  }
 }
 
 export default NileFormHelpText;

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

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxMi4zNCI+PHBhdGggZD0ibTEwLjM4LDYuNTloLjM4di0uODRoLS4zOGMtLjg2LDAtMS4zMi0uNS0xLjMyLTEuMzZ2LTIuMzdjMC0uNDctLjEtLjg3LS4zLTEuMTloMHMwLS4wMi0uMDEtLjAyaDBjLS4zMy0uNTEtLjkzLS44MS0xLjgtLjgxaC0uOTJ2Ljg0aC43NWMuOTMsMCwxLjI1LjQ0LDEuMjUsMS4yM3YyLjQxYzAsLjk0LjQyLDEuNTUsMS4zMSwxLjctLjg5LjE1LTEuMzEuNzUtMS4zMSwxLjd2Mi40MWMwLC43OC0uMzIsMS4yMy0xLjI1LDEuMjNoLS43NXYuODRoLjkyYy44NywwLDEuNDctLjMsMS44LS44MmgwczAtLjAxLjAxLS4wMmgwYy4yLS4zMi4zLS43Mi4zLTEuMTl2LTIuMzdjMC0uODYuNDYtMS4zNiwxLjMyLTEuMzZaIi8+PHBhdGggZD0ibTE1LjYyLDUuNzVjLS44NiwwLTEuMzItLjUtMS4zMi0xLjM2di0yLjM3YzAtMS4yNC0uNy0yLjAyLTIuMTItMi4wMmgtLjJjLjI1LjI2LjQzLjU3LjU0Ljg5LjU0LjE0Ljc1LjU1Ljc1LDEuMTd2Mi40MWMwLC45NC40MiwxLjU1LDEuMzEsMS43LS44OS4xNS0xLjMxLjc1LTEuMzEsMS43djIuNDFjMCwuNjItLjIsMS4wMy0uNzUsMS4xNy0uMTIuMzMtLjI5LjYzLS41NC44OWguMmMxLjQxLDAsMi4xMi0uNzgsMi4xMi0yLjAydi0yLjM3YzAtLjg2LjQ2LTEuMzYsMS4zMi0xLjM2aC4zOHYtLjg0aC0uMzhaIi8+PHBhdGggZD0ibTEzLjEsNi41OWguMzh2LS44NGgtLjM4Yy0uODYsMC0xLjMyLS41LTEuMzItMS4zNnYtMi4zN2MwLTEuMjQtLjctMi4wMi0yLjEyLTIuMDJoLS40OWMuMjQuMjUuNDEuNTMuNTIuODQuNzguMDYsMS4wNS41LDEuMDUsMS4yMnYyLjQxYzAsLjk0LjQyLDEuNTUsMS4zMSwxLjctLjg5LjE1LTEuMzEuNzUtMS4zMSwxLjd2Mi40MWMwLC43Mi0uMjgsMS4xNi0xLjA1LDEuMjItLjEyLjMxLS4yOS41OS0uNTIuODRoLjQ5YzEuNDEsMCwyLjEyLS43OCwyLjEyLTIuMDJ2LTIuMzdjMC0uODYuNDYtMS4zNiwxLjMyLTEuMzZaIi8+PHBhdGggZD0ibTEuNywyLjAydjIuMzdjMCwuODYtLjQ2LDEuMzYtMS4zMiwxLjM2aC0uMzh2Ljg0aC4zOGMuODYsMCwxLjMyLjUsMS4zMiwxLjM2djIuMzdjMCwxLjI0LjcsMi4wMiwyLjEyLDIuMDJoLjkydi0uODRoLS43NWMtLjkzLDAtMS4yNS0uNDQtMS4yNS0xLjIzdi0yLjQxYzAtLjk0LS40Mi0xLjU1LTEuMzEtMS43Ljg5LS4xNSwxLjMxLS43NSwxLjMxLTEuN3YtMi40MWMwLS43OC4zMi0xLjIzLDEuMjUtMS4yM2guNzV2LS44NGgtLjkyQzIuNCwwLDEuNy43OCwxLjcsMi4wMloiLz48L3N2Zz4=";

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

@@ -2,4 +2,4 @@
  * Do not edit directly
  */
 
-export default "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjEuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48Zz48cGF0aCBpZD0iZG9jdW1lbnRfMV8iIGQ9Ik0xNi4zLDAuMmw2LjQsNi40djE3LjFIMS4yVjAuM0wxNi4zLDAuMnogTTE1LjMsMS43SDIuOHYyMC41aDE4LjVWNy43aC02TDE1LjMsMS43eiBNMTcsMTYuMnYxLjVINwkJCXYtMS41SDE3eiBNMTcsMTEuMnYxLjVIN3YtMS41SDE3eiBNMTEsNi4ydjEuNUg3VjYuMkgxMXogTTE2LjgsMi44djMuNGgzLjRMMTYuOCwyLjh6Ii8+PC9nPjwvZz48L3N2Zz4=";
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMuNzUgNS43MzgyOEMzLjc1IDQuNDk1NjQgNC43NTczNiAzLjQ4ODI4IDYgMy40ODgyOEgxMy4zNzVWNS43MzgyOEMxMy4zNzUgNy44MDkzNSAxNS4wNTM5IDkuNDg4MjggMTcuMTI1IDkuNDg4MjhIMjAuMjVWMTkuNzM4M0MyMC4yNSAyMC45ODA5IDE5LjI0MjYgMjEuOTg4MyAxOCAyMS45ODgzSDZDNC43NTczNiAyMS45ODgzIDMuNzUgMjAuOTgwOSAzLjc1IDE5LjczODNWNS43MzgyOFpNMTkgNy45ODgyOEwxNC44NzUgNC4zODgyOFY1LjczODI4QzE0Ljg3NSA2Ljk4MDkyIDE1Ljg4MjQgNy45ODgyOCAxNy4xMjUgNy45ODgyOEgxOVpNNiAxLjk4ODI4QzMuOTI4OTMgMS45ODgyOCAyLjI1IDMuNjY3MjEgMi4yNSA1LjczODI4VjE5LjczODNDMi4yNSAyMS44MDkzIDMuOTI4OTMgMjMuNDg4MyA2IDIzLjQ4ODNIMThDMjAuMDcxMSAyMy40ODgzIDIxLjc1IDIxLjgwOTMgMjEuNzUgMTkuNzM4M1Y4LjM5NzM3TDE0LjQwNjIgMS45ODgyOEg2Wk02IDE4LjQ4ODNMMTggMTguNDg4M1YxNi45ODgzTDYgMTYuOTg4M0w2IDE4LjQ4ODNaTTE4IDE0LjIzODNMNiAxNC4yMzgzTDYgMTIuNzM4M0wxOCAxMi43MzgzVjE0LjIzODNaTTYgMTAuMjM4M0gxMVY4LjczODI4TDYgOC43MzgyOEw2IDEwLjIzODNaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==";

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

@@ -15,6 +15,7 @@ export { default as applyfilter } from './apply-filter';
 export { default as approve } from './approve';
 export { default as aquera } from './aquera';
 export { default as aquerasupport } from './aquerasupport';
+export { default as arrayloop } from './array-loop';
 export { default as array } from './array';
 export { default as arrayofobject } from './arrayofobject';
 export { default as arrow } from './arrow';
@@ -192,6 +193,7 @@ export { default as infoicon1 } from './info-icon1';
 export { default as info } from './info';
 export { default as info2 } from './info2';
 export { default as inprogress } from './inprogress';
+export { default as integer } from './integer';
 export { default as itemplaceholder } from './itemplaceholder';
 export { default as js } from './js';
 export { default as kill } from './kill';

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

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJhIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGRlZnM+PHN0eWxlPi5ie3N0cm9rZS13aWR0aDowcHg7fTwvc3R5bGU+PC9kZWZzPjxwb2x5Z29uIGNsYXNzPSJiIiBwb2ludHM9IjMgNS43MyAzIDYuNzYgNC4yNSA2LjI5IDQuMjUgMTEgNS40MSAxMSA1LjQxIDUuMTIgNC40NSA1LjEyIDMgNS43MyIvPjxwYXRoIGNsYXNzPSJiIiBkPSJtMTEuNTcsOC42NWMuNTUtLjUsMS4xNS0xLjA2LDEuMTUtMS45MiwwLTEuMDUtLjgyLTEuNzMtMi4wMy0xLjczcy0xLjk3LjYzLTEuOTcsMS44di4xN2gxLjF2LS4xMmMwLS41Ni4zLS45Ljg3LS45LjUsMCwuODYuMjkuODYuNzksMCwuNDEtLjIzLjcxLS41NSwxLjAzbC0yLjM5LDIuMzV2Ljg4aDQuMDd2LS45NWgtMi42NWwxLjUzLTEuNFoiLz48L3N2Zz4=";

package/src/nile-option/nile-option.ts

@@ -141,6 +141,15 @@ export class NileOption extends NileElement {
 
   /** Returns a plain text label based on the option's content. */
   getTextLabel() {
+    // Search for a label element inside the component
+    const labelElement = this.querySelector('label');
+
+    // If a label element is found, return its text content
+    if (labelElement) {
+      return labelElement.textContent?.trim() ?? '';
+    }
+
+    // If no label element is found, return the existing behavior
     return (this.textContent ?? '').trim();
   }
 

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

@@ -304,6 +304,13 @@ export const styles = css`
     color: #aaaaaa;
   }
 
+  .select__suffix {
+    flex: 0;
+    display: inline-flex;
+    align-items: center;
+    color: #aaaaaa;
+  }
+
   /* Clear button */
   .select__clear {
     display: inline-flex;
@@ -426,6 +433,10 @@ export const styles = css`
     animation: spin 0.6s linear infinite;
   }
 
+  .select__no-results {
+    padding: 10px;
+  }
+
   @keyframes spin {
     0% {
       transform: rotate(0deg);

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

@@ -218,7 +218,8 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   @property({ type: Boolean }) showSelected = false;
 
-  @state() showNoResults: boolean;
+
+  @property({ type: Boolean }) showNoResults: boolean = false;
 
   @property({ type: String }) noResultsMessage: string = "No results found";
 
@@ -1054,6 +1055,14 @@ export class NileSelect extends NileElement implements NileFormControl {
                   `
                 : ''}
 
+              <slot
+                part="suffix"
+                name="suffix"
+                class=${classMap({
+                  select__suffix: true,
+                })}
+              ></slot>
+
               <slot
                 name="expand-icon"
                 part="expand-icon"

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

@@ -55,6 +55,7 @@ export interface switchInputType {
   error?: boolean;
   errorMessage?: string;
   options?: Array<any>;
+  helperText?: string;
   multiple?: boolean;
 }
 
@@ -98,6 +99,7 @@ export class NileSwitcher extends NileElement {
       placeholder,
       disabled,
       required,
+      error,
       errorMessage,
       inputType: inputTypeName,
     } = Input;
@@ -108,7 +110,7 @@ export class NileSwitcher extends NileElement {
       .required=${required}
       .errorMessage=${errorMessage}
       .placeholder=${placeholder}
-      .error=${true}
+      .error=${error}
       @nile-input=${(e: CustomEvent) => {
         this.handleChange(e, inputType, inputTypeName);
       }}
@@ -138,10 +140,21 @@ export class NileSwitcher extends NileElement {
   }
 
   renderNileTextArea(Input: switchInputType, inputType: string) {
-    const { value, disabled, inputType: inputTypeName } = Input;
+    const {
+      value,
+      disabled,
+      readonly,
+      errorMessage,
+      error,
+      inputType: inputTypeName,
+    } = Input;
+
     return html`<nile-textarea
       .value=${value}
       .disabled=${disabled}
+      ?readonly=${readonly}
+      .error=${error}
+      .errorMessage=${errorMessage}
       @nile-input=${(e: CustomEvent) => {
         this.handleChange(e, inputType, inputTypeName);
       }}
@@ -188,16 +201,16 @@ export class NileSwitcher extends NileElement {
       readonly,
     } = Input;
     return html`<nile-content-editor
-       .value=${value}
-       .options=${options}
-       .type =${type}
-       .readonly=${readonly}
-       .errorMessage=${errorMessage}
-       @nile-change=${(e: CustomEvent) => {
-         this.handleChange(e, inputType, inputTypeName);
-       }}
-     >
-     </nile-radio-group>`;
+      .value=${value}
+      .options=${options}
+      .type=${type}
+      .readonly=${readonly}
+      .errorMessage=${errorMessage}
+      @nile-change=${(e: CustomEvent) => {
+        this.handleChange(e, inputType, inputTypeName);
+      }}
+    >
+    </nile-content-editor>`;
   }
 
   handleChange(event: CustomEvent, inputType: string, inputTypeName: string) {
@@ -212,20 +225,34 @@ export class NileSwitcher extends NileElement {
     this.emit('nile-change', { config: this.nileSwitchConfig });
   }
 
-  renderIcon() {
+  renderIcon(defaultInput: switchInputType, switchInput: switchInputType) {
+    const defaultHelperText = defaultInput.helperText;
+    const switchHelperText = switchInput.helperText;
+
     const icon = !this.nileSwitchConfig.toggleSwitch
       ? 'header-functions'
       : 'stringinput';
-    return html`<nile-icon
-      size="14"
-      class=${classMap({
-        'pointer-cursor': true,
-        'flex-start': true,
-      })}
-      .name=${icon}
-      color="#005EA6"
-      @click=${this.toggleField}
-    ></nile-icon>`;
+
+    const helperText = !this.nileSwitchConfig.toggleSwitch
+      ? !!switchHelperText
+        ? switchHelperText
+        : `switch to ${switchInput.inputType}`
+      : !!defaultHelperText
+      ? defaultHelperText
+      : `switch to ${defaultInput.inputType}`;
+
+    return html` <nile-tooltip content=${helperText} placement="bottom">
+      <nile-icon
+        size="14"
+        class=${classMap({
+          'pointer-cursor': true,
+          'flex-start': true,
+        })}
+        .name=${icon}
+        color="#005EA6"
+        @click=${this.toggleField}
+      ></nile-icon>
+    </nile-tooltip>`;
   }
 
   toggleField() {
@@ -305,7 +332,7 @@ export class NileSwitcher extends NileElement {
 
             () => this.renderNileTextArea(switchInput, INPUT_TYPE.SWITCH)
           )}
-      ${!disable ? this.renderIcon() : ''}
+      ${!disable ? this.renderIcon(defaultInput, switchInput) : ''}
     `;
   }
   public render(): TemplateResult {