@aquera/nile-elements 0.0.13 → 0.0.15

package/package.json

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

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

@@ -53,7 +53,6 @@ export const styles = css`
     line-height: 14px;
     letter-spacing: 0.2px;
     height: 50px;
-    margin-top: 10px;
   }
 
   .day-names,
@@ -98,7 +97,8 @@ export const styles = css`
     background: white;
     display: flex;
     justify-content: space-between;
-    width: auto;
+    width: 365px;
+    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
   }
 
   .selected-date,
@@ -147,24 +147,24 @@ export const styles = css`
   .base {
     background-color: white;
     border-radius: 4px;
-    padding-bottom: 20px;
     width: 365px;
   }
 
   .base__range {
-    width: 730px;
+    padding: 24px;
   }
 
   .calender-input {
-    padding: 20px;
+    margin-top: 6px;
     padding-bottom: 0px;
-    background: white;
+    width: 365px;
   }
 
   .from {
     display: flex;
     justify-content: space-between;
-    gap: 20px;
+    gap: 8px;
+    margin-top: 12px;
   }
 
   .manual-input {
@@ -172,16 +172,18 @@ export const styles = css`
   }
 
   .manual-input-label {
+    color: #7f7f7f;
+    font-family: Colfax-regular;
     font-size: 12px;
-    font-style: normal;
     font-weight: 500;
-    margin-bottom: 10px;
+    line-height: 12px;
+    letter-spacing: 0.2px;
   }
 
   .button-contaner {
     width: 100%;
     text-align: right;
-    padding: 10px 0;
+    padding: 12px 0 0 0;
   }
 `;
 

package/src/nile-calendar/nile-calendar.ts

@@ -512,7 +512,7 @@ private handleEndTimeInput(event: CustomEvent): void {
 
     return html`
 
-        <div class="base${this.range ? '__range' : ''}">
+        <div class="base ${this.range ? 'base__range' : ''}">
           <div class="calendar-wrapper" >
             <div class="calendar-container ${this.range ? 'with-margin' : ''}">
               ${this.renderMonth(
@@ -521,7 +521,7 @@ private handleEndTimeInput(event: CustomEvent): void {
                 this.getDaysArray(this.currentYear, this.currentMonth)
               )}
             </div>
-            ${this.range
+            <!-- ${this.range
               ? html`
                   <div class="calendar-container">
                     ${this.renderMonth(
@@ -534,7 +534,7 @@ private handleEndTimeInput(event: CustomEvent): void {
                     )}
                   </div>
                 `
-              : ''}
+              : ''} -->
 
           </div>
           ${this.range

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

@@ -98,20 +98,22 @@ export class NileContentEditor extends NileElement {
 
   async handleClipboardEvent(event: Event) {
     const selectedText = window?.getSelection()?.toString();
-    if (!!selectedText) {
-      switch (event.type) {
-        case 'cut':
-        case 'copy':
-          await navigator.clipboard.writeText(selectedText);
-          document.execCommand(event.type);
-          break;
-        case 'paste':
-          const pastedText = await navigator.clipboard.readText();
-          document.execCommand('insertText', false, pastedText);
-          break;
-        default:
-          break;
-      }
+    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();
@@ -144,7 +146,10 @@ export class NileContentEditor extends NileElement {
       event.preventDefault();
       return;
     }
-    if ([KeyCode.CUT, KeyCode.COPY, KeyCode.PASTE].includes(event.code)) {
+    if (
+      [KeyCode.CUT, KeyCode.COPY, KeyCode.PASTE].includes(event.code) &&
+      (event.ctrlKey || event.metaKey)
+    ) {
       return;
     }
     if (event.code === KeyCode.ESCAPE) {
@@ -162,14 +167,14 @@ export class NileContentEditor extends NileElement {
       } 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;
@@ -190,13 +195,20 @@ 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;
@@ -204,7 +216,7 @@ export class NileContentEditor extends NileElement {
         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),
       });
@@ -302,6 +314,7 @@ export class NileContentEditor extends NileElement {
             : ''}
           <div
             contenteditable="${!readonly}"
+            spellcheck="false"
             class=${classMap({
               'content-editable-input': true,
               error: hasError || hasErrorMessage,
@@ -323,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/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;
 }
 
@@ -139,11 +140,21 @@ export class NileSwitcher extends NileElement {
   }
 
   renderNileTextArea(Input: switchInputType, inputType: string) {
-    const { value, disabled, readonly, 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);
       }}
@@ -190,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) {
@@ -214,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() {
@@ -307,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 {