@aquera/nile-elements 0.0.4-9 → 0.0.5-1

package/package.json

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

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

@@ -12,76 +12,73 @@ import { css } from 'lit-element';
  */
 export const styles = css`
   :host {
-    width:100%;
   }
 
   .nile-error-message {
     width: 100%;
+    word-break: break-all;
     font-size: var(--nile-font-size-small);
+    letter-spacing: 0.2px;
     font-weight: var(--nile-font-weight-regular);
     line-height: var(--nile-font-size-small);
-    border: 1px solid var(--nile-colors-red-500);
-    border-left: 6px solid var(--nile-colors-red-500);
-    border-radius: var(--nile-radius-base-standard);
-    background: var(--nile-colors-red-100);
   }
 
-  .nile-error-message__info {
+  .nile-error-message__error {
     color: var(--nile-colors-red-500);
-    padding: 8px;
-    display: flex;
-    align-items: center;
+    word-break: break-word;
+  }
+
+  .nile-error-message__response {
+    color: var(--nile-colors-dark-500);
   }
 
-  .nile-error-message__icon,
-  .nile-error-message__arrow {
+  .nile-error-message__icon {
     vertical-align: middle;
-    margin-right: 6px;
-    transition: transform 0.3s ease-in-out;
+    margin-right:2px;
   }
 
-  .nile-error-message__expandable {
+  .nile-error-message__more-button {
+    color: var(--nile-colors-primary-600);
     cursor: pointer;
-    overflow: hidden;
+    word-break: break-word;
   }
 
-  .nile-error-message__content {
-    display: flex;
-    align-items: flex-start;
-    padding: 8px 12px;
+  .nile-error-message__response-expanded {
+    height: auto;
+    border: 1px solid var(--nile-colors-red-500);
+    border-left: 6px solid var(--nile-colors-red-500);
+    border-radius: 4px;
+    margin-top: 12px;
+    padding: 12px;
+    background: var(--nile-colors-neutral-100);
   }
 
-  .nile-error-message__expandable.bordered {
-    border-top: 1px solid var(--nile-colors-neutral-500);
+  .nile-error-message__response-expanded {
+    max-height: 100px;
+    overflow-y: auto;
+    border: 1px solid var(--nile-colors-red-500);
+    border-left: 6px solid var(--nile-colors-red-500);
+    border-radius: 4px;
+    margin-top: 12px;
+    padding: 12px;
+    background: var(--nile-colors-neutral-100);
+    transition: max-height 0.3s ease-in-out;
+    flex-shrink: 0;
   }
 
-  .nile-error-message__summary {
-    white-space: nowrap;
+  .nile-error-message__response-expanded.collapsed {
+    max-height: 0;
     overflow: hidden;
-    text-overflow: ellipsis;
-    transition: height 0.3s ease-in-out, white-space 1s ease-in-out;
-    height: 14px;
-  }
-
-  .nile-error-message__expandable.expanded .nile-error-message__summary {
-    white-space: normal;
-    max-height: 6em;
-    overflow-y: scroll;
-  }
-
-  .nile-error-message__expandable.expanded
-    .nile-error-message__summary::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  .nile-error-message__expandable.expanded
-    .nile-error-message__summary::-webkit-scrollbar-thumb {
-    border-radius: 20px;
-    background: rgba(148, 159, 184, 0.25);
+    transition: max-height 0.3s ease-in-out;
+    visibility: hidden;
+    padding: 0 12px;
   }
 
-  .nile-error-message__expandable.expanded .nile-error-message__arrow {
-    transform: rotate(90deg);
+  .nile-error-message__response-expanded.expanded {
+    max-height: 100px;
+    transition: max-height 0.3s ease-in-out;
+    visibility: visible;
+    padding: 12px;
   }
 `;
 

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

@@ -8,13 +8,6 @@ import {
 import { customElement } from 'lit/decorators.js';
 import { styles } from './nile-error-message.css';
 
-const convertToStringArray = (value: any): Array<string> => {
-  if (Array.isArray(value)) {
-    return value.map(item => String(item));
-  }
-  return [];
-};
-
 /**
  * A custom error message component that displays error information to the user.
  * @customElement nile-error-message
@@ -25,100 +18,69 @@ export class NileErrorMessage extends LitElement {
     return [styles];
   }
 
-  @property({
-    type: Array,
-    attribute: 'error-messages',
-    hasChanged: (newVal, oldVal) =>
-      JSON.stringify(newVal) !== JSON.stringify(oldVal), // Optional: to detect deep changes
-    converter: {
-      toAttribute: value => JSON.stringify(value),
-      fromAttribute: value => convertToStringArray(JSON.parse(value || '[]')),
-    },
-  })
-  errorMessages: Array<string> = [];
+  // Represents the error message to be displayed to the user.
+  @property({ type: String })
+  errorMessage: string = '';
 
-  @property({ type: Number })
-  expandedIndex: number | null = null;
+  // Represents additional details about the error, like stack trace or other info.
+  @property({ type: String })
+  errorResponse: string;
 
-  expandText(index: number, target: any) {
-    const element = target.querySelector('.nile-error-message__summary');
-    const originalHeight = element.clientHeight;
-    element.style.whiteSpace = 'normal';
-    element.style.height = 'auto';
-    const expandedHeight = Math.min(element.clientHeight, 5.5 * 12);
+  @property({ type: Boolean })
+  isExpanded: boolean = false;
 
-    element.style.height = originalHeight + 'px';
+  // The maximum length before truncation.
+  private readonly MAX_LENGTH: number = 100;
 
-    requestAnimationFrame(() => {
-      element.style.height = expandedHeight + 'px';
-    });
+  /**
+   * Get a truncated version of the errorResponse if it's too long.
+   * @returns {string}
+   */
+  getTruncatedResponse(): string {
+    if (this.errorResponse.length > this.MAX_LENGTH) {
+      return `${this.errorResponse.substring(0, this.MAX_LENGTH)}...`;
+    }
+    return this.errorResponse;
   }
 
-  collapseText(target: any) {
-    const element = target.querySelector('.nile-error-message__summary');
-    const expandedHeight = element.clientHeight;
-    element.style.height = expandedHeight + 'px';
-
-    requestAnimationFrame(() => {
-      element.style.height = '14px';
-      element.style.whiteSpace = 'nowrap';
-    });
+  /**
+   * Toggle the expanded state of the error response.
+   */
+  toggleExpanded() {
+    this.isExpanded = !this.isExpanded;
   }
 
-  toggleExpand(index: number, event: any) {
-    if (this.shadowRoot) {
-      if (this.expandedIndex !== null && this.expandedIndex !== index) {
-        const prevExpandable = this.shadowRoot.querySelectorAll(
-          '.nile-error-message__expandable'
-        )[this.expandedIndex];
-        if (prevExpandable) {
-          this.collapseText(prevExpandable);
-        }
-      }
-    }
+  public render(): TemplateResult {
+    return html`
+      <div class="nile-error-message" part="base">
+        <nile-icon
+          name="info2"
+          size="14"
+          class="nile-error-message__icon"
+          part="icon"
+          color="#E5434D"
+        ></nile-icon>
+        <span class="nile-error-message__error">${this.errorMessage}</span>
 
-    if (this.expandedIndex === index) {
-      this.expandedIndex = null;
-      this.collapseText(event.currentTarget);
-    } else {
-      this.expandedIndex = index;
-      this.expandText(index, event.currentTarget);
-    }
-  }
 
-  render(): TemplateResult {
-    return html`
-      <div class="nile-error-message">
-        <div class="nile-error-message__info">
-          <nile-icon
-            name="info2"
-            size="14"
-            class="nile-error-message__icon"
-            part="icon"
-          ></nile-icon>
-          ${this.errorMessages.length}
-          ${this.errorMessages.length > 1 ? 'attributes' : 'attribute'} are not
-          valid
+        ${this.errorResponse
+          ? html` <span class="nile-error-message__response"
+                >${this.getTruncatedResponse()}</span
+              >
+              <span
+                class="nile-error-message__more-button"
+                @click=${this.toggleExpanded}
+                >${this.isExpanded ? 'View Less' : 'View More'}</span
+              >`
+          : ``}
+
+        <div
+          class="nile-error-message__response-expanded ${this.isExpanded
+            ? 'expanded'
+            : 'collapsed'}"
+        >
+          ${this.errorResponse}
         </div>
-        ${this.errorMessages.map(
-          (errorMessage, index) => html`
-            <div
-              class="nile-error-message__expandable ${index !== 0
-                ? 'bordered'
-                : ''} ${this.expandedIndex === index ? 'expanded' : ''}"
-              @click="${(event: any) => this.toggleExpand(index, event)}"
-            >
-              <div class="nile-error-message__content">
-                <nile-icon
-                  name="arrowright"
-                  size="14"
-                  class="nile-error-message__arrow"
-                ></nile-icon>
-                <div class="nile-error-message__summary">${errorMessage}</div>
-              </div>
-            </div>
-          `
-        )}
       </div>
     `;
   }

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

@@ -224,12 +224,12 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   /** Gets the validity state object */
   get validity() {
-    return this.valueInput.validity;
+    return this.valueInput?.validity;
   }
 
   /** Gets the validation message */
   get validationMessage() {
-    return this.valueInput.validationMessage;
+    return this.valueInput?.validationMessage;
   }
 
   connectedCallback() {