@aquera/nile-elements 1.3.3-beta-1.3 → 1.3.3-beta-1.5

package/dist/src/nile-empty-state/nile-empty-state.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-empty-state.test.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture,html,expect } from \"@open-wc/testing\";\nimport './nile-empty-state';\nimport { NileEmptyState } from \"./nile-empty-state\";\n\ndescribe('NileEmptyState',()=>{\n    it('renders correctly with default properties',async ()=>{\n        const el=await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`)\n        expect(el.size).to.equal('md');\n        expect(el.variant).to.equal('tonal');\n        expect(el.icon).to.equal('error');\n        expect(el.grayscale).to.be.false;\n        expect(el.text).to.equal('Empty State');\n        expect(el.subText).to.equal('No Data');\n    })\n\n    it('should reflect properties to attributes', async () => {\n        const iconName=\"action\"\n        const el = await fixture<NileEmptyState>(html`\n          <nile-empty-state size=\"sm\" variant=\"flat\" icon=${iconName} grayscale text=\"Test state text\" sub-text=\"Test sub text\"></nile-empty-state>\n        `);\n        expect(el.getAttribute('size')).to.equal('sm');\n        expect(el.getAttribute('variant')).to.equal('flat');\n        expect(el.getAttribute('icon')).to.equal(iconName);\n        expect(el.hasAttribute('grayscale')).to.be.true;\n        expect(el.getAttribute('text')).to.equal('Test state text');\n        expect(el.getAttribute('sub-text')).to.equal('Test sub text');\n      });\n\n      it('should render different sizes correctly', async () => {\n        const sizes:Array<'sm' | 'md' | 'lg' >= ['sm', 'md', 'lg'];\n        for (const size of sizes) {\n          const el = await fixture<NileEmptyState>(html`<nile-empty-state size=\"${size}\"></nile-empty-state>`);\n          const container = el.shadowRoot!.querySelector('.empty-state')!;\n          expect(container.classList.contains(`empty-state--${size}`)).to.be.true;\n        }\n      });\n\n      it('should render different variants correctly', async () => {\n        const variants :Array<'flat' | 'content' | 'tonal' >= ['flat', 'content', 'tonal'];\n        for (const variant of variants) {\n          const el = await fixture<NileEmptyState>(html`<nile-empty-state variant=\"${variant}\"></nile-empty-state>`);\n          const container = el.shadowRoot!.querySelector(`.empty-state__body--${variant}`)!;\n          expect(container).to.exist;\n        }\n      });\n\n      it('should render text properties correctly', async () => {\n        const sampleText='Custom Text'\n        const sampleSubText=\"Custom SubText\"\n        const el = await fixture<NileEmptyState>(html`\n          <nile-empty-state text=${sampleText} sub-text=${sampleSubText}></nile-empty-state>\n        `);\n        const textEl = el.shadowRoot!.querySelector('.empty-state__text')!;\n        const subTextEl = el.shadowRoot!.querySelector('.empty-state__subtext')!;\n        expect(textEl.textContent).to.equal(sampleText);\n        expect(subTextEl.textContent).to.equal(sampleSubText);\n      });\n\n      it('should render slot content', async () => {\n        const el = await fixture<NileEmptyState>(html`\n          <nile-empty-state>\n            <div class=\"slot-content\">Slot Content</div>\n          </nile-empty-state>\n        `);\n        const slotContent = el.querySelector('.slot-content')!;\n        expect(slotContent).to.exist;\n        expect(slotContent.textContent).to.equal('Slot Content');\n      });\n})"]}

package/dist/src/nile-error-message/index.js

@@ -0,0 +1,2 @@
+export { NileErrorMessage } from './nile-error-message';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-error-message/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-error-message/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC","sourcesContent":["export { NileErrorMessage } from './nile-error-message';\n"]}

package/dist/src/nile-error-message/nile-error-message.css.js

@@ -0,0 +1,87 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit';
+/**
+ * ErrorMessage CSS
+ */
+export const styles = css `
+  :host {
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+  .nile-error-message {
+    width: 100%;
+    font-size: var(--nile-font-size-small, var(--ng-font-size-text-xs));
+    letter-spacing: 0.2px;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    line-height: var(--nile-font-size-small, var(--ng-line-height-text-xs));
+   
+  }
+
+  .nile-error-message__error {
+    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
+    word-break: break-word;
+  }
+
+  .nile-error-message__response {
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));
+    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));
+    overflow-x: auto;
+  }
+
+  .nile-error-message__icon {
+    vertical-align: middle;
+    margin-right: var(--nile-spacing-xxs, var(--ng-spacing-xxs));
+  }
+
+  .nile-error-message__more-button {
+    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
+    cursor: pointer;
+    white-space: nowrap;
+    display: inline-flex;
+    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    align-items: center
+  }
+
+  .nile-error-message__response-expanded {
+    line-height: var(--nile-line-height-small);
+    height: auto;
+    max-height: 100px;
+    overflow-y: auto;
+    border: 1px solid var(--nile-colors-red-500, var(--ng-colors-border-error));
+    border-left: var(--nile-border-size-6, var(--ng-border-width-4)) solid var(--nile-colors-red-500, var(--ng-colors-border-error));
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    margin-top: var(--nile-spacing-lg, var(--ng-spacing-md));
+    padding: var(--nile-spacing-lg, var(--ng-spacing-md));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-fg-white));
+    transition: max-height 0.3s ease-in-out;
+    flex-shrink: 0;
+  }
+
+  .nile-error-message__response-expanded.collapsed {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease-in-out;
+    visibility: hidden;
+    padding: var(--nile-spacing-none) var(--nile-spacing-none);
+  }
+
+  .nile-error-message__response-expanded.expanded {
+    max-height: var(--nile-height-48px, var(--ng-height-48px));
+    transition: max-height 0.3s ease-in-out;
+    visibility: visible;
+    padding-top: var(--nile-spacing-lg,  var(--ng-spacing-md));
+    padding-bottom: var(--nile-spacing-lg, var(--ng-spacing-md));
+    padding-left: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    padding-right: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    }
+`;
+export default [styles];
+//# sourceMappingURL=nile-error-message.css.js.map

package/dist/src/nile-error-message/nile-error-message.css.js.map

@@ -0,0 +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,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ExB,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';\n\n/**\n * ErrorMessage CSS\n */\nexport const styles = css`\n  :host {\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .nile-error-message {\n    width: 100%;\n    font-size: var(--nile-font-size-small, var(--ng-font-size-text-xs));\n    letter-spacing: 0.2px;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-font-size-small, var(--ng-line-height-text-xs));\n   \n  }\n\n  .nile-error-message__error {\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n    word-break: break-word;\n  }\n\n  .nile-error-message__response {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));\n    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));\n    overflow-x: auto;\n  }\n\n  .nile-error-message__icon {\n    vertical-align: middle;\n    margin-right: var(--nile-spacing-xxs, var(--ng-spacing-xxs));\n  }\n\n  .nile-error-message__more-button {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    cursor: pointer;\n    white-space: nowrap;\n    display: inline-flex;\n    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    align-items: center\n  }\n\n  .nile-error-message__response-expanded {\n    line-height: var(--nile-line-height-small);\n    height: auto;\n    max-height: 100px;\n    overflow-y: auto;\n    border: 1px solid var(--nile-colors-red-500, var(--ng-colors-border-error));\n    border-left: var(--nile-border-size-6, var(--ng-border-width-4)) solid var(--nile-colors-red-500, var(--ng-colors-border-error));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-md));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-md));\n    background: var(--nile-colors-neutral-100, var(--ng-colors-fg-white));\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: var(--nile-spacing-none) var(--nile-spacing-none);\n  }\n\n  .nile-error-message__response-expanded.expanded {\n    max-height: var(--nile-height-48px, var(--ng-height-48px));\n    transition: max-height 0.3s ease-in-out;\n    visibility: visible;\n    padding-top: var(--nile-spacing-lg,  var(--ng-spacing-md));\n    padding-bottom: var(--nile-spacing-lg, var(--ng-spacing-md));\n    padding-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    padding-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-error-message/nile-error-message.js

@@ -0,0 +1,116 @@
+import { __decorate } from "tslib";
+import { LitElement, html, } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './nile-error-message.css';
+/**
+ * A custom error message component that displays error information to the user.
+ * @customElement nile-error-message
+ */
+let NileErrorMessage = class NileErrorMessage extends LitElement {
+    constructor() {
+        super(...arguments);
+        // 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];
+    }
+    /**
+     * 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;
+    }
+    updated(changedProperties) {
+        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.
+     */
+    toggleExpanded() {
+        this.isExpanded = !this.isExpanded;
+    }
+    render() {
+        const iconName = this.isExpanded ? 'var(--nile-icon-arrow-up, var(--ng-icon-chevron-up))' : 'var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))';
+        return html `
+      <div class="nile-error-message" part="base">
+        <nile-icon
+          name="var(--nile-icon-info, var(--ng-icon-info-circle))"
+          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+          size="14"
+          class="nile-error-message__icon"
+          part="icon"
+          color="var(--nile-colors-red-700, var(--ng-colors-fg-error-primary))"
+        ></nile-icon>
+        <span class="nile-error-message__error">${this.errorMessage}</span>
+
+
+        ${this.errorResponse
+            ? 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'}
+              <nile-icon color="var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600))" part="icon" size="14" name="${iconName}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
+              </span
+            > ` : ``}
+            </div>
+            `
+            : ``}
+
+        <div
+          class="nile-error-message__response-expanded ${this.isExpanded
+            ? 'expanded'
+            : 'collapsed'}"
+        >
+          ${this.errorResponseLong}
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], NileErrorMessage.prototype, "errorMessage", void 0);
+__decorate([
+    property({ type: String })
+], NileErrorMessage.prototype, "errorResponse", void 0);
+__decorate([
+    property({ type: String })
+], NileErrorMessage.prototype, "errorResponseLong", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileErrorMessage.prototype, "isExpanded", void 0);
+__decorate([
+    property({ type: String })
+], NileErrorMessage.prototype, "maxWidth", void 0);
+__decorate([
+    property({ type: String })
+], NileErrorMessage.prototype, "maxHeight", void 0);
+__decorate([
+    property({ type: String })
+], NileErrorMessage.prototype, "maxDialogHeight", void 0);
+NileErrorMessage = __decorate([
+    customElement('nile-error-message')
+], NileErrorMessage);
+export { NileErrorMessage };
+//# sourceMappingURL=nile-error-message.js.map

package/dist/src/nile-error-message/nile-error-message.js.map

@@ -0,0 +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  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } 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  // Extended error information\n  @property({ type: String })\n  errorResponseLong: string;\n\n  @property({ type: Boolean })\n  isExpanded: boolean = false;\n\n  @property({ type: String }) maxWidth: string;\n\n  @property({ type: String }) maxHeight: string;\n\n  @property({ type: String }) maxDialogHeight: string;\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  updated(changedProperties: Map<string, any>) {\n    if (changedProperties.has('maxWidth')) {\n      this.style.setProperty('--nile-error-max-width', this.maxWidth);\n    }\n    if (changedProperties.has('maxHeight')) {\n      this.style.setProperty('--nile-error-max-height', this.maxHeight);\n    }\n    if (changedProperties.has('maxDialogHeight')) {\n      this.style.setProperty('--nile-error-max-dialog-height', this.maxDialogHeight);\n    }\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    const iconName = this.isExpanded ? 'var(--nile-icon-arrow-up, var(--ng-icon-chevron-up))' : 'var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))';\n\n    return html`\n      <div class=\"nile-error-message\" part=\"base\">\n        <nile-icon\n          name=\"var(--nile-icon-info, var(--ng-icon-info-circle))\"\n          method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n          size=\"14\"\n          class=\"nile-error-message__icon\"\n          part=\"icon\"\n          color=\"var(--nile-colors-red-700, var(--ng-colors-fg-error-primary))\"\n        ></nile-icon>\n        <span class=\"nile-error-message__error\">${this.errorMessage}</span>\n\n\n        ${this.errorResponse\n        ? html`\n            <div class=\"nile-error-message__response\">\n            ${this.errorResponse}\n            ${this.errorResponseLong\n                ? html`\n              <span\n              class=\"nile-error-message__more-button\"\n              @click=${this.toggleExpanded}\n              >${this.isExpanded ? 'View Less' : 'View More'}\n              <nile-icon color=\"var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600))\" part=\"icon\" size=\"14\" name=\"${iconName}\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"></nile-icon>\n              </span\n            > `:``}\n            </div>\n            `\n        : ``}\n\n        <div\n          class=\"nile-error-message__response-expanded ${this.isExpanded\n            ? 'expanded'\n            : 'collapsed'}\"\n        >\n          ${this.errorResponseLong}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-error-message': NileErrorMessage;\n  }\n}\n"]}

package/dist/src/nile-error-message/nile-error-message.test.js

@@ -0,0 +1,61 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import './nile-error-message';
+describe('NileErrorMessage', () => {
+    it('should render the error message', async () => {
+        const el = await fixture(html `<nile-error-message errorMessage="An error occurred"></nile-error-message>`);
+        const errorMessage = el.shadowRoot.querySelector('.nile-error-message__error');
+        expect(errorMessage.textContent).to.equal('An error occurred');
+    });
+    it('should truncate the error response if it is too long', async () => {
+        const longErrorResponse = 'a'.repeat(150);
+        const el = await fixture(html `<nile-error-message errorResponse="${longErrorResponse}"></nile-error-message>`);
+        const truncatedResponse = el.getTruncatedResponse();
+        expect(truncatedResponse).to.equal(`${longErrorResponse.substring(0, 100)}...`);
+    });
+    it('should not truncate the error response if it is within the maximum length', async () => {
+        const shortErrorResponse = 'Short error message';
+        const el = await fixture(html `<nile-error-message errorResponse="${shortErrorResponse}"></nile-error-message>`);
+        const truncatedResponse = el.getTruncatedResponse();
+        expect(truncatedResponse).to.equal(shortErrorResponse);
+    });
+    it('should toggle the expanded state when the button is clicked', async () => {
+        const el = await fixture(html `<nile-error-message errorResponse="Short error message" errorResponseLong="Detailed error information"></nile-error-message>`);
+        const button = el.shadowRoot.querySelector('.nile-error-message__more-button') ?? {};
+        button.click();
+        expect(el.isExpanded).to.be.true;
+        button.click();
+        expect(el.isExpanded).to.be.false;
+    });
+    it('should display the "View More" button if there is extended error information', async () => {
+        const el = await fixture(html `<nile-error-message errorResponse="Short error message" errorResponseLong="Detailed error information"></nile-error-message>`);
+        const button = el.shadowRoot.querySelector('.nile-error-message__more-button');
+        expect(button).to.exist;
+    });
+    it('should not display the "View More" button if there is no extended error information', async () => {
+        const el = await fixture(html `<nile-error-message errorResponse="Short error message"></nile-error-message>`);
+        const button = el.shadowRoot.querySelector('.nile-error-message__more-button');
+        expect(button).to.not.exist;
+    });
+    it('should show the extended error information when expanded', async () => {
+        const el = await fixture(html `<nile-error-message errorResponse="Short error message" errorResponseLong="Detailed error information"></nile-error-message>`);
+        el.isExpanded = true;
+        await el.updateComplete;
+        const expandedResponse = el.shadowRoot.querySelector('.nile-error-message__response-expanded');
+        expect(expandedResponse?.textContent).to.include('Detailed error information');
+    });
+    it('should hide the extended error information when collapsed', async () => {
+        const el = await fixture(html `<nile-error-message errorResponse="Short error message" errorResponseLong="Detailed error information"></nile-error-message>`);
+        el.isExpanded = false;
+        await el.updateComplete;
+        const expandedResponse = el.shadowRoot.querySelector('.nile-error-message__response-expanded');
+        expect(expandedResponse).to.have.class('collapsed');
+    });
+    it('should render icon and error message parts', async () => {
+        const el = await fixture(html `<nile-error-message errorMessage="An error occurred"></nile-error-message>`);
+        const icon = el.shadowRoot.querySelector('nile-icon');
+        expect(icon).to.exist;
+        const errorMessage = el.shadowRoot.querySelector('.nile-error-message__error');
+        expect(errorMessage).to.exist;
+    });
+});
+//# sourceMappingURL=nile-error-message.test.js.map

package/dist/src/nile-error-message/nile-error-message.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-error-message.test.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, fixture, expect, oneEvent } from '@open-wc/testing';\nimport './nile-error-message';\nimport { NileErrorMessage } from './nile-error-message';\ndescribe('NileErrorMessage', () => {\n  it('should render the error message', async () => {\n    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorMessage=\"An error occurred\"></nile-error-message>`);\n    const errorMessage = el.shadowRoot!.querySelector('.nile-error-message__error');\n    expect(errorMessage!.textContent).to.equal('An error occurred');\n  });\n\n  it('should truncate the error response if it is too long', async () => {\n    const longErrorResponse = 'a'.repeat(150);\n    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse=\"${longErrorResponse}\"></nile-error-message>`);\n    const truncatedResponse = el.getTruncatedResponse();\n    expect(truncatedResponse).to.equal(`${longErrorResponse.substring(0, 100)}...`);\n  });\n\n  it('should not truncate the error response if it is within the maximum length', async () => {\n    const shortErrorResponse = 'Short error message';\n    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse=\"${shortErrorResponse}\"></nile-error-message>`);\n    const truncatedResponse = el.getTruncatedResponse();\n    expect(truncatedResponse).to.equal(shortErrorResponse);\n  });\n\n  it('should toggle the expanded state when the button is clicked', async () => {\n    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse=\"Short error message\" errorResponseLong=\"Detailed error information\"></nile-error-message>`);\n    const button :HTMLButtonElement = el.shadowRoot!.querySelector('.nile-error-message__more-button') ??{} as HTMLButtonElement;\n    button.click();\n    expect(el.isExpanded).to.be.true;\n    button.click();\n    expect(el.isExpanded).to.be.false;\n  });\n\n  it('should display the \"View More\" button if there is extended error information', async () => {\n    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse=\"Short error message\" errorResponseLong=\"Detailed error information\"></nile-error-message>`);\n    const button = el.shadowRoot!.querySelector('.nile-error-message__more-button');\n    expect(button).to.exist;\n  });\n\n  it('should not display the \"View More\" button if there is no extended error information', async () => {\n    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse=\"Short error message\"></nile-error-message>`);\n    const button = el.shadowRoot!.querySelector('.nile-error-message__more-button');\n    expect(button).to.not.exist;\n  });\n\n  it('should show the extended error information when expanded', async () => {\n    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse=\"Short error message\" errorResponseLong=\"Detailed error information\"></nile-error-message>`);\n    el.isExpanded = true;\n    await el.updateComplete;\n    const expandedResponse = el.shadowRoot!.querySelector('.nile-error-message__response-expanded');\n    expect(expandedResponse?.textContent).to.include('Detailed error information');\n  });\n\n  it('should hide the extended error information when collapsed', async () => {\n    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse=\"Short error message\" errorResponseLong=\"Detailed error information\"></nile-error-message>`);\n    el.isExpanded = false;\n    await el.updateComplete;\n    const expandedResponse = el.shadowRoot!.querySelector('.nile-error-message__response-expanded');\n    expect(expandedResponse).to.have.class('collapsed');\n  });\n\n  it('should render icon and error message parts', async () => {\n    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorMessage=\"An error occurred\"></nile-error-message>`);\n    const icon = el.shadowRoot!.querySelector('nile-icon');\n    expect(icon).to.exist;\n    const errorMessage = el.shadowRoot!.querySelector('.nile-error-message__error');\n    expect(errorMessage).to.exist;\n  });\n});"]}

package/dist/src/nile-error-notification/index.js

@@ -0,0 +1,2 @@
+export { NileErrorNotification } from './nile-error-notification';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-error-notification/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-error-notification/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC","sourcesContent":["export { NileErrorNotification } from './nile-error-notification';\n"]}

package/dist/src/nile-error-notification/nile-error-notification.css.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit';
+/**
+ * ErrorNotification CSS
+ */
+export const styles = css `
+  :host {
+    --indication-color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+  .nile-error-notification {
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-style: normal;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));
+    letter-spacing: 0.2px;
+    border: 1px solid var(--indication-color);
+    border-left: var(--nile-border-size-6, var(--ng-border-width-4)) solid var(--indication-color);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    padding: var(--nile-spacing-md, var(--ng-spacing-md));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-fg-white));
+    color: var(--indication-color);
+    box-sizing: border-box;
+  }
+
+  .nile-error-notification__icon {
+    vertical-align: middle;
+    margin-right: var(--nile-spacing-xs, var(--ng-spacing-xxs));
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-error-notification.css.js.map

package/dist/src/nile-error-notification/nile-error-notification.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-error-notification.css.js","sourceRoot":"","sources":["../../../src/nile-error-notification/nile-error-notification.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BxB,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';\n\n/**\n * ErrorNotification CSS\n */\nexport const styles = css`\n  :host {\n    --indication-color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .nile-error-notification {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));\n    letter-spacing: 0.2px;\n    border: 1px solid var(--indication-color);\n    border-left: var(--nile-border-size-6, var(--ng-border-width-4)) solid var(--indication-color);\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    padding: var(--nile-spacing-md, var(--ng-spacing-md));\n    background: var(--nile-colors-neutral-100, var(--ng-colors-fg-white));\n    color: var(--indication-color);\n    box-sizing: border-box;\n  }\n\n  .nile-error-notification__icon {\n    vertical-align: middle;\n    margin-right: var(--nile-spacing-xs, var(--ng-spacing-xxs));\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-error-notification/nile-error-notification.js

@@ -0,0 +1,72 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { LitElement, html, } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './nile-error-notification.css';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-error-notification
+ *
+ */
+let NileErrorNotification = class NileErrorNotification extends LitElement {
+    constructor() {
+        super(...arguments);
+        // Represents the error message to be displayed to the user.
+        this.errorMessage = '';
+        this.color = '';
+        /* #endregion */
+    }
+    /**
+     * The styles for ErrorNotification
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    updated(_changedProperties) {
+        if (_changedProperties.has('color')) {
+            this.style.setProperty('--indication-color', this.color);
+        }
+    }
+    /* #endregion */
+    /* #region Methods */
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render() {
+        return html `
+      <div class="nile-error-notification" part="container">
+        <nile-icon
+          name="var(--nile-icon-info, var(--ng-icon-info-circle))"
+          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+          size="14"
+          class="nile-error-notification__icon"
+          part="icon"
+          color="var(--indication-color)"
+        ></nile-icon>
+        <span part="message">
+          ${this.errorMessage}
+        </span>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], NileErrorNotification.prototype, "errorMessage", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileErrorNotification.prototype, "color", void 0);
+NileErrorNotification = __decorate([
+    customElement('nile-error-notification')
+], NileErrorNotification);
+export { NileErrorNotification };
+export default NileErrorNotification;
+//# sourceMappingURL=nile-error-notification.js.map

package/dist/src/nile-error-notification/nile-error-notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-error-notification.js","sourceRoot":"","sources":["../../../src/nile-error-notification/nile-error-notification.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EACL,UAAU,EACV,IAAI,GAIL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEvD;;;;;GAKG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QASL,4DAA4D;QAChB,iBAAY,GAAW,EAAE,CAAC;QAE1B,UAAK,GAAW,EAAE,CAAC;QAiC/D,gBAAgB;IAClB,CAAC;IA7CC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAMS,OAAO,CAAC,kBAAkC;QAClD,IAAG,kBAAkB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAC,CAAC;YAClC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACzD,CAAC;IACH,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACX,OAAO,IAAI,CAAA;;;;;;;;;;;YAWH,IAAI,CAAC,YAAY;;;KAGxB,CAAC;IACJ,CAAC;CAGF,CAAA;AApC6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAG,CAAC;2DAA2B;AAE1B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAG,CAAC;oDAAoB;AAZpD,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CA8CjC;;AAED,eAAe,qBAAqB,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 {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n  PropertyValues,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-error-notification.css';\n\n/**\n * Nile icon component.\n *\n * @tag nile-error-notification\n *\n */\n@customElement('nile-error-notification')\nexport class NileErrorNotification extends LitElement {\n  /**\n   * The styles for ErrorNotification\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\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, reflect: true  }) errorMessage: string = '';\n\n  @property({ type: String, reflect: true  }) color: string = '';\n  protected updated(_changedProperties: PropertyValues): void {\n    if(_changedProperties.has('color')){\n      this.style.setProperty('--indication-color',this.color)\n    }\n  }\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    return html`\n      <div class=\"nile-error-notification\" part=\"container\">\n        <nile-icon\n          name=\"var(--nile-icon-info, var(--ng-icon-info-circle))\"\n          method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n          size=\"14\"\n          class=\"nile-error-notification__icon\"\n          part=\"icon\"\n          color=\"var(--indication-color)\"\n        ></nile-icon>\n        <span part=\"message\">\n          ${this.errorMessage}\n        </span>\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileErrorNotification;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-error-notification': NileErrorNotification;\n  }\n}\n"]}

package/dist/src/nile-file-preview/index.js

@@ -0,0 +1,2 @@
+export { NileFilePreview } from './nile-file-preview';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-file-preview/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-file-preview/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export { NileFilePreview } from './nile-file-preview';"]}