@aquera/nile-elements 0.1.33-beta-1.1 → 0.1.34-beta-1.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.33-beta-1.1",
+  "version": "0.1.34-beta-1.0",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -189,4 +189,4 @@
       "prettier --write"
     ]
   }
-}
+}

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

@@ -16,11 +16,11 @@ export const styles = css`
 
   .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);
+    max-width: var(--nile-error-max-width, 535px);
   }
 
   .nile-error-message__error {
@@ -32,6 +32,8 @@ export const styles = css`
     color: var(--nile-colors-dark-500);
     margin-top:6px;
     line-height: 16px;
+    max-height: var(--nile-error-max-height, 48px);
+    overflow-x: auto;
   }
 
   .nile-error-message__icon {
@@ -54,7 +56,7 @@ export const styles = css`
     border: 1px solid var(--nile-colors-red-500);
     border-left: 6px solid var(--nile-colors-red-500);
     border-radius: 4px;
-    margin-top: 12px;
+    margin-top: 8px;
     padding: 12px;
     background: var(--nile-colors-neutral-100);
   }
@@ -81,10 +83,10 @@ export const styles = css`
   }
 
   .nile-error-message__response-expanded.expanded {
-    max-height: 100px;
+    max-height: var(--nile-error-max-dialog-height, 48px);
     transition: max-height 0.3s ease-in-out;
     visibility: visible;
-    padding: 12px;
+    padding: 8px;
   }
 `;
 

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

@@ -32,6 +32,12 @@ export class NileErrorMessage extends LitElement {
   @property({ type: Boolean })
   isExpanded: boolean = false;
 
+  @property({ type: String }) maxWidth: string;
+
+  @property({ type: String }) maxHeight: string;
+
+  @property({ type: String }) maxDialogHeight: string;
+
   // The maximum length before truncation.
   private readonly MAX_LENGTH: number = 100;
 
@@ -46,6 +52,18 @@ export class NileErrorMessage extends LitElement {
     return this.errorResponse;
   }
 
+  updated(changedProperties: Map<string, any>) {
+    if (changedProperties.has('maxWidth')) {
+      this.style.setProperty('--nile-error-max-width', this.maxWidth);
+    }
+    if (changedProperties.has('maxHeight')) {
+      this.style.setProperty('--nile-error-max-height', this.maxHeight);
+    }
+    if (changedProperties.has('maxDialogHeight')) {
+      this.style.setProperty('--nile-error-max-dialog-height', this.maxDialogHeight);
+    }
+  }
+
   /**
    * Toggle the expanded state of the error response.
    */

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

@@ -12,7 +12,7 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    --indication-color: var(--nile-colors-red-500);
+    --indication-color: var(--nile-colors-red-700);
   }
 
   .nile-error-notification {

package/vscode-html-custom-data.json

@@ -1348,7 +1348,7 @@
     },
     {
       "name": "nile-error-message",
-      "description": "A custom error message component that displays error information to the user.\n\nAttributes:\n\n  * `errorMessage` {`string`} - \n\n  * `errorResponse` {`string`} - \n\n  * `errorResponseLong` {`string`} - \n\n  * `isExpanded` {`boolean`} - \n\nProperties:\n\n  * `errorMessage` {`string`} - \n\n  * `errorResponse` {`string`} - \n\n  * `errorResponseLong` {`string`} - \n\n  * `isExpanded` {`boolean`} - \n\n  * `MAX_LENGTH` {`number`} - ",
+      "description": "A custom error message component that displays error information to the user.\n\nAttributes:\n\n  * `errorMessage` {`string`} - \n\n  * `errorResponse` {`string`} - \n\n  * `errorResponseLong` {`string`} - \n\n  * `isExpanded` {`boolean`} - \n\n  * `maxWidth` {`string`} - \n\n  * `maxHeight` {`string`} - \n\n  * `maxDialogHeight` {`string`} - \n\nProperties:\n\n  * `errorMessage` {`string`} - \n\n  * `errorResponse` {`string`} - \n\n  * `errorResponseLong` {`string`} - \n\n  * `isExpanded` {`boolean`} - \n\n  * `maxWidth` {`string`} - \n\n  * `maxHeight` {`string`} - \n\n  * `maxDialogHeight` {`string`} - \n\n  * `MAX_LENGTH` {`number`} - ",
       "attributes": [
         {
           "name": "errorMessage",
@@ -1366,6 +1366,18 @@
           "name": "isExpanded",
           "description": "`isExpanded` {`boolean`} - \n\nProperty: isExpanded\n\nDefault: false",
           "valueSet": "v"
+        },
+        {
+          "name": "maxWidth",
+          "description": "`maxWidth` {`string`} - \n\nProperty: maxWidth"
+        },
+        {
+          "name": "maxHeight",
+          "description": "`maxHeight` {`string`} - \n\nProperty: maxHeight"
+        },
+        {
+          "name": "maxDialogHeight",
+          "description": "`maxDialogHeight` {`string`} - \n\nProperty: maxDialogHeight"
         }
       ]
     },