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

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-error-message/nile-error-message.css.js

@@ -10,76 +10,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;
   }
 `;
 export default [styles];

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-error-message/nile-error-message.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-error-message.css.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyExB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * ErrorMessage CSS\n */\nexport const styles = css`\n  :host {\n    width:100%;\n  }\n\n  .nile-error-message {\n    width: 100%;\n    font-size: var(--nile-font-size-small);\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-font-size-small);\n    border: 1px solid var(--nile-colors-red-500);\n    border-left: 6px solid var(--nile-colors-red-500);\n    border-radius: var(--nile-radius-base-standard);\n    background: var(--nile-colors-red-100);\n  }\n\n  .nile-error-message__info {\n    color: var(--nile-colors-red-500);\n    padding: 8px;\n    display: flex;\n    align-items: center;\n  }\n\n  .nile-error-message__icon,\n  .nile-error-message__arrow {\n    vertical-align: middle;\n    margin-right: 6px;\n    transition: transform 0.3s ease-in-out;\n  }\n\n  .nile-error-message__expandable {\n    cursor: pointer;\n    overflow: hidden;\n  }\n\n  .nile-error-message__content {\n    display: flex;\n    align-items: flex-start;\n    padding: 8px 12px;\n  }\n\n  .nile-error-message__expandable.bordered {\n    border-top: 1px solid var(--nile-colors-neutral-500);\n  }\n\n  .nile-error-message__summary {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    transition: height 0.3s ease-in-out, white-space 1s ease-in-out;\n    height: 14px;\n  }\n\n  .nile-error-message__expandable.expanded .nile-error-message__summary {\n    white-space: normal;\n    max-height: 6em;\n    overflow-y: scroll;\n  }\n\n  .nile-error-message__expandable.expanded\n    .nile-error-message__summary::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  .nile-error-message__expandable.expanded\n    .nile-error-message__summary::-webkit-scrollbar-thumb {\n    border-radius: 20px;\n    background: rgba(148, 159, 184, 0.25);\n  }\n\n  .nile-error-message__expandable.expanded .nile-error-message__arrow {\n    transform: rotate(90deg);\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-error-message.css.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsExB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * ErrorMessage CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .nile-error-message {\n    width: 100%;\n    word-break: break-all;\n    font-size: var(--nile-font-size-small);\n    letter-spacing: 0.2px;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-font-size-small);\n  }\n\n  .nile-error-message__error {\n    color: var(--nile-colors-red-500);\n    word-break: break-word;\n  }\n\n  .nile-error-message__response {\n    color: var(--nile-colors-dark-500);\n  }\n\n  .nile-error-message__icon {\n    vertical-align: middle;\n    margin-right:2px;\n  }\n\n  .nile-error-message__more-button {\n    color: var(--nile-colors-primary-600);\n    cursor: pointer;\n    word-break: break-word;\n  }\n\n  .nile-error-message__response-expanded {\n    height: auto;\n    border: 1px solid var(--nile-colors-red-500);\n    border-left: 6px solid var(--nile-colors-red-500);\n    border-radius: 4px;\n    margin-top: 12px;\n    padding: 12px;\n    background: var(--nile-colors-neutral-100);\n  }\n\n  .nile-error-message__response-expanded {\n    max-height: 100px;\n    overflow-y: auto;\n    border: 1px solid var(--nile-colors-red-500);\n    border-left: 6px solid var(--nile-colors-red-500);\n    border-radius: 4px;\n    margin-top: 12px;\n    padding: 12px;\n    background: var(--nile-colors-neutral-100);\n    transition: max-height 0.3s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  .nile-error-message__response-expanded.collapsed {\n    max-height: 0;\n    overflow: hidden;\n    transition: max-height 0.3s ease-in-out;\n    visibility: hidden;\n    padding: 0 12px;\n  }\n\n  .nile-error-message__response-expanded.expanded {\n    max-height: 100px;\n    transition: max-height 0.3s ease-in-out;\n    visibility: visible;\n    padding: 12px;\n  }\n`;\n\nexport default [styles];\n"]}

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-error-message/nile-error-message.d.ts

@@ -5,11 +5,19 @@ import { LitElement, CSSResultArray, TemplateResult } from 'lit-element';
  */
 export declare class NileErrorMessage extends LitElement {
     static get styles(): CSSResultArray;
-    errorMessages: Array<string>;
-    expandedIndex: number | null;
-    expandText(index: number, target: any): void;
-    collapseText(target: any): void;
-    toggleExpand(index: number, event: any): void;
+    errorMessage: string;
+    errorResponse: string;
+    isExpanded: boolean;
+    private readonly MAX_LENGTH;
+    /**
+     * Get a truncated version of the errorResponse if it's too long.
+     * @returns {string}
+     */
+    getTruncatedResponse(): string;
+    /**
+     * Toggle the expanded state of the error response.
+     */
+    toggleExpanded(): void;
     render(): TemplateResult;
 }
 declare global {

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-error-message/nile-error-message.js

@@ -2,12 +2,6 @@ import { __decorate } from "tslib";
 import { LitElement, html, property, } from 'lit-element';
 import { customElement } from 'lit/decorators.js';
 import { styles } from './nile-error-message.css';
-const convertToStringArray = (value) => {
-    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
@@ -15,99 +9,75 @@ const convertToStringArray = (value) => {
 let NileErrorMessage = class NileErrorMessage extends LitElement {
     constructor() {
         super(...arguments);
-        this.errorMessages = [];
-        this.expandedIndex = null;
+        // Represents the error message to be displayed to the user.
+        this.errorMessage = '';
+        this.isExpanded = false;
+        // The maximum length before truncation.
+        this.MAX_LENGTH = 100;
     }
     static get styles() {
         return [styles];
     }
-    expandText(index, target) {
-        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);
-        element.style.height = originalHeight + 'px';
-        requestAnimationFrame(() => {
-            element.style.height = expandedHeight + 'px';
-        });
-    }
-    collapseText(target) {
-        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';
-        });
-    }
-    toggleExpand(index, event) {
-        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);
-                }
-            }
-        }
-        if (this.expandedIndex === index) {
-            this.expandedIndex = null;
-            this.collapseText(event.currentTarget);
-        }
-        else {
-            this.expandedIndex = index;
-            this.expandText(index, event.currentTarget);
+    /**
+     * Get a truncated version of the errorResponse if it's too long.
+     * @returns {string}
+     */
+    getTruncatedResponse() {
+        if (this.errorResponse.length > this.MAX_LENGTH) {
+            return `${this.errorResponse.substring(0, this.MAX_LENGTH)}...`;
         }
+        return this.errorResponse;
+    }
+    /**
+     * Toggle the expanded state of the error response.
+     */
+    toggleExpanded() {
+        this.isExpanded = !this.isExpanded;
     }
     render() {
         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
+      <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>
+
+
+        ${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) => 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>
     `;
     }
 };
 __decorate([
-    property({
-        type: Array,
-        attribute: 'error-messages',
-        hasChanged: (newVal, oldVal) => JSON.stringify(newVal) !== JSON.stringify(oldVal),
-        converter: {
-            toAttribute: value => JSON.stringify(value),
-            fromAttribute: value => convertToStringArray(JSON.parse(value || '[]')),
-        },
-    })
-], NileErrorMessage.prototype, "errorMessages", void 0);
+    property({ type: String })
+], NileErrorMessage.prototype, "errorMessage", void 0);
+__decorate([
+    property({ type: String })
+], NileErrorMessage.prototype, "errorResponse", void 0);
 __decorate([
-    property({ type: Number })
-], NileErrorMessage.prototype, "expandedIndex", void 0);
+    property({ type: Boolean })
+], NileErrorMessage.prototype, "isExpanded", void 0);
 NileErrorMessage = __decorate([
     customElement('nile-error-message')
 ], NileErrorMessage);

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-error-message/nile-error-message.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-error-message.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  LitElement,\n  html,\n  property,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-error-message.css';\n\nconst convertToStringArray = (value: any): Array<string> => {\n  if (Array.isArray(value)) {\n    return value.map(item => String(item));\n  }\n  return [];\n};\n\n/**\n * A custom error message component that displays error information to the user.\n * @customElement nile-error-message\n */\n@customElement('nile-error-message')\nexport class NileErrorMessage extends LitElement {\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @property({\n    type: Array,\n    attribute: 'error-messages',\n    hasChanged: (newVal, oldVal) =>\n      JSON.stringify(newVal) !== JSON.stringify(oldVal), // Optional: to detect deep changes\n    converter: {\n      toAttribute: value => JSON.stringify(value),\n      fromAttribute: value => convertToStringArray(JSON.parse(value || '[]')),\n    },\n  })\n  errorMessages: Array<string> = [];\n\n  @property({ type: Number })\n  expandedIndex: number | null = null;\n\n  expandText(index: number, target: any) {\n    const element = target.querySelector('.nile-error-message__summary');\n    const originalHeight = element.clientHeight;\n    element.style.whiteSpace = 'normal';\n    element.style.height = 'auto';\n    const expandedHeight = Math.min(element.clientHeight, 5.5 * 12);\n\n    element.style.height = originalHeight + 'px';\n\n    requestAnimationFrame(() => {\n      element.style.height = expandedHeight + 'px';\n    });\n  }\n\n  collapseText(target: any) {\n    const element = target.querySelector('.nile-error-message__summary');\n    const expandedHeight = element.clientHeight;\n    element.style.height = expandedHeight + 'px';\n\n    requestAnimationFrame(() => {\n      element.style.height = '14px';\n      element.style.whiteSpace = 'nowrap';\n    });\n  }\n\n  toggleExpand(index: number, event: any) {\n    if (this.shadowRoot) {\n      if (this.expandedIndex !== null && this.expandedIndex !== index) {\n        const prevExpandable = this.shadowRoot.querySelectorAll(\n          '.nile-error-message__expandable'\n        )[this.expandedIndex];\n        if (prevExpandable) {\n          this.collapseText(prevExpandable);\n        }\n      }\n    }\n\n    if (this.expandedIndex === index) {\n      this.expandedIndex = null;\n      this.collapseText(event.currentTarget);\n    } else {\n      this.expandedIndex = index;\n      this.expandText(index, event.currentTarget);\n    }\n  }\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"nile-error-message\">\n        <div class=\"nile-error-message__info\">\n          <nile-icon\n            name=\"info2\"\n            size=\"14\"\n            class=\"nile-error-message__icon\"\n            part=\"icon\"\n          ></nile-icon>\n          ${this.errorMessages.length}\n          ${this.errorMessages.length > 1 ? 'attributes' : 'attribute'} are not\n          valid\n        </div>\n        ${this.errorMessages.map(\n          (errorMessage, index) => html`\n            <div\n              class=\"nile-error-message__expandable ${index !== 0\n                ? 'bordered'\n                : ''} ${this.expandedIndex === index ? 'expanded' : ''}\"\n              @click=\"${(event: any) => this.toggleExpand(index, event)}\"\n            >\n              <div class=\"nile-error-message__content\">\n                <nile-icon\n                  name=\"arrowright\"\n                  size=\"14\"\n                  class=\"nile-error-message__arrow\"\n                ></nile-icon>\n                <div class=\"nile-error-message__summary\">${errorMessage}</div>\n              </div>\n            </div>\n          `\n        )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-error-message': NileErrorMessage;\n  }\n}\n"]}
+{"version":3,"file":"nile-error-message.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,EACJ,QAAQ,GAGT,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD;;;GAGG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAKL,4DAA4D;QAE5D,iBAAY,GAAW,EAAE,CAAC;QAO1B,eAAU,GAAY,KAAK,CAAC;QAE5B,wCAAwC;QACvB,eAAU,GAAW,GAAG,CAAC;IAsD5C,CAAC;IAtEQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAgBD;;;OAGG;IACH,oBAAoB;QAClB,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE;YAC/C,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;SACjE;QACD,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,cAAc;QACZ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IACrC,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;;;;;;;kDASmC,IAAI,CAAC,YAAY;;;UAGzD,IAAI,CAAC,aAAa;YAClB,CAAC,CAAC,IAAI,CAAA;mBACG,IAAI,CAAC,oBAAoB,EAAE;;;;yBAIrB,IAAI,CAAC,cAAc;mBACzB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;gBAC9C;YACN,CAAC,CAAC,EAAE;;;yDAG2C,IAAI,CAAC,UAAU;YAC5D,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,WAAW;;YAEb,IAAI,CAAC,aAAa;;;KAGzB,CAAC;IACJ,CAAC;CACF,CAAA;AAhEC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACD;AAI1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACL;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDACA;AAdjB,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAuE5B;SAvEY,gBAAgB","sourcesContent":["import {\n  LitElement,\n  html,\n  property,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-error-message.css';\n\n/**\n * A custom error message component that displays error information to the user.\n * @customElement nile-error-message\n */\n@customElement('nile-error-message')\nexport class NileErrorMessage extends LitElement {\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  // Represents the error message to be displayed to the user.\n  @property({ type: String })\n  errorMessage: string = '';\n\n  // Represents additional details about the error, like stack trace or other info.\n  @property({ type: String })\n  errorResponse: string;\n\n  @property({ type: Boolean })\n  isExpanded: boolean = false;\n\n  // The maximum length before truncation.\n  private readonly MAX_LENGTH: number = 100;\n\n  /**\n   * Get a truncated version of the errorResponse if it's too long.\n   * @returns {string}\n   */\n  getTruncatedResponse(): string {\n    if (this.errorResponse.length > this.MAX_LENGTH) {\n      return `${this.errorResponse.substring(0, this.MAX_LENGTH)}...`;\n    }\n    return this.errorResponse;\n  }\n\n  /**\n   * Toggle the expanded state of the error response.\n   */\n  toggleExpanded() {\n    this.isExpanded = !this.isExpanded;\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"nile-error-message\" part=\"base\">\n        <nile-icon\n          name=\"info2\"\n          size=\"14\"\n          class=\"nile-error-message__icon\"\n          part=\"icon\"\n          color=\"#E5434D\"\n        ></nile-icon>\n        <span class=\"nile-error-message__error\">${this.errorMessage}</span>\n\n\n        ${this.errorResponse\n          ? html` <span class=\"nile-error-message__response\"\n                >${this.getTruncatedResponse()}</span\n              >\n              <span\n                class=\"nile-error-message__more-button\"\n                @click=${this.toggleExpanded}\n                >${this.isExpanded ? 'View Less' : 'View More'}</span\n              >`\n          : ``}\n\n        <div\n          class=\"nile-error-message__response-expanded ${this.isExpanded\n            ? 'expanded'\n            : 'collapsed'}\"\n        >\n          ${this.errorResponse}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-error-message': NileErrorMessage;\n  }\n}\n"]}

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-select/nile-select.js

@@ -154,11 +154,11 @@ let NileSelect = class NileSelect extends NileElement {
     }
     /** 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() {
         super.connectedCallback();