@aquera/nile-elements 0.1.35-beta-1.2 → 0.1.35-beta-1.3

package/dist/src/nile-calendar/__snapshots__/nile-calendar.test.snap.js

@@ -0,0 +1,275 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["NileCalendar renders correctly with default properties"] = 
+`<div class="base">
+  <div class="calendar-config hidden">
+    <div class="calendar-switcher">
+      <nile-tab-group
+        centered=""
+        value="absolute"
+      >
+        <nile-tab
+          active=""
+          aria-disabled="false"
+          aria-selected="true"
+          centered=""
+          id="nile-tab-1"
+          panel="absolute"
+          role="tab"
+          slot="nav"
+        >
+          Absolute
+        </nile-tab>
+        <nile-tab
+          aria-disabled="false"
+          aria-selected="false"
+          centered=""
+          id="nile-tab-2"
+          panel="relative"
+          role="tab"
+          slot="nav"
+        >
+          Relative
+        </nile-tab>
+      </nile-tab-group>
+    </div>
+  </div>
+  <div class="calendar-wrapper">
+    <div class="calendar-container">
+      <div class="calendar">
+        <div class="calendar-header">
+          <nile-icon
+            class="calendar-header__month-navigation"
+            color="black"
+            description=""
+            method="fill"
+            name="arrowleft"
+            set="local"
+            size="16"
+            style="--nile-svg-fill: black; --nile-svg-height: 16px; --nile-svg-width: 16px;"
+          >
+          </nile-icon>
+          <span>
+            April
+            2025
+          </span>
+          <nile-icon
+            class="calendar-header__month-navigation"
+            color="black"
+            description=""
+            method="fill"
+            name="arrowright"
+            set="local"
+            size="16"
+            style="--nile-svg-fill: black; --nile-svg-height: 16px; --nile-svg-width: 16px;"
+          >
+          </nile-icon>
+        </div>
+        <div class="days_container">
+          <div class="day_name">
+            Su
+          </div>
+          <div class="day_name">
+            Mo
+          </div>
+          <div class="day_name">
+            Tu
+          </div>
+          <div class="day_name">
+            We
+          </div>
+          <div class="day_name">
+            Th
+          </div>
+          <div class="day_name">
+            Fr
+          </div>
+          <div class="day_name">
+            Sa
+          </div>
+          <div class="day_date filler">
+            <span style="position:relative;">
+              30
+            </span>
+          </div>
+          <div class="day_date filler">
+            <span style="position:relative;">
+              31
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              1
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              2
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              3
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              4
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              5
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              6
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              7
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              8
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              9
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              10
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              11
+              <div class="current__date__dot">
+              </div>
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              12
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              13
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              14
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              15
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              16
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              17
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              18
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              19
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              20
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              21
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              22
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              23
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              24
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              25
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              26
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              27
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              28
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              29
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              30
+            </span>
+          </div>
+          <div class="day_date filler">
+            <span style="position:relative;">
+              1
+            </span>
+          </div>
+          <div class="day_date filler">
+            <span style="position:relative;">
+              2
+            </span>
+          </div>
+          <div class="day_date filler">
+            <span style="position:relative;">
+              3
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+/* end snapshot NileCalendar renders correctly with default properties */
+

package/dist/src/nile-card/__snapshots__/nile-card.test.snap.js

@@ -0,0 +1,34 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["Nile Card should render the card properly"] = 
+`<div
+  class="card card--has-footer"
+  part="base"
+>
+  <div
+    class="body__wrapper"
+    part="body__wrapper"
+  >
+    <slot
+      class="card__header"
+      name="header"
+      part="header"
+    >
+    </slot>
+    <slot
+      class="card__body"
+      part="body"
+    >
+    </slot>
+  </div>
+  <slot
+    class="card__footer"
+    name="footer"
+    part="footer"
+  >
+  </slot>
+</div>
+`;
+/* end snapshot Nile Card should render the card properly */
+

package/dist/src/nile-checkbox/__snapshots__/nile-checkbox.test.snap.js

@@ -0,0 +1,31 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["NileCheckbox renders correctly with default properties"] = 
+`<label
+  class="checkbox checkbox--medium"
+  part="base"
+>
+  <input
+    aria-checked="false"
+    class="checkbox__input"
+    name=""
+    title=""
+    type="checkbox"
+  >
+  <span
+    class="checkbox__control"
+    part="control"
+  >
+  </span>
+  <div
+    class="checkbox__label"
+    part="label"
+  >
+    <slot>
+    </slot>
+  </div>
+</label>
+`;
+/* end snapshot NileCheckbox renders correctly with default properties */
+

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

@@ -14,11 +14,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 {
@@ -30,8 +30,6 @@ 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 +52,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: 8px;
+    margin-top: 12px;
     padding: 12px;
     background: var(--nile-colors-neutral-100);
   }
@@ -81,10 +79,10 @@ export const styles = css `
   }
 
   .nile-error-message__response-expanded.expanded {
-    max-height: var(--nile-error-max-dialog-height, 48px);
+    max-height: 100px;
     transition: max-height 0.3s ease-in-out;
     visibility: visible;
-    padding: 8px;
+    padding: 12px;
   }
 `;
 export default [styles];

package/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,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ExB,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  }\n\n  .nile-error-message {\n    width: 100%;\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    max-width: var(--nile-error-max-width, 535px);\n  }\n\n  .nile-error-message__error {\n    color: var(--nile-colors-red-700);\n    word-break: break-word;\n  }\n\n  .nile-error-message__response {\n    color: var(--nile-colors-dark-500);\n    margin-top:6px;\n    line-height: 16px;\n    max-height: var(--nile-error-max-height, 48px);\n    overflow-x: auto;\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    white-space: nowrap;\n    display: inline-flex;\n    gap: 4px;\n    align-items: center\n  }\n\n  .nile-error-message__response-expanded {\n    line-height: 18px;\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: 8px;\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: var(--nile-error-max-dialog-height, 48px);\n    transition: max-height 0.3s ease-in-out;\n    visibility: visible;\n    padding: 8px;\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,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4ExB,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  }\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-700);\n    word-break: break-word;\n  }\n\n  .nile-error-message__response {\n    color: var(--nile-colors-dark-500);\n    margin-top:6px;\n    line-height: 16px;\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    white-space: nowrap;\n    display: inline-flex;\n    gap: 4px;\n    align-items: center\n  }\n\n  .nile-error-message__response-expanded {\n    line-height: 18px;\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/dist/src/nile-error-message/nile-error-message.d.ts

@@ -9,16 +9,12 @@ export declare class NileErrorMessage extends LitElement {
     errorResponse: string;
     errorResponseLong: string;
     isExpanded: boolean;
-    maxWidth: string;
-    maxHeight: string;
-    maxDialogHeight: string;
     private readonly MAX_LENGTH;
     /**
      * Get a truncated version of the errorResponse if it's too long.
      * @returns {string}
      */
     getTruncatedResponse(): string;
-    updated(changedProperties: Map<string, any>): void;
     /**
      * Toggle the expanded state of the error response.
      */

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

@@ -28,17 +28,6 @@ let NileErrorMessage = class NileErrorMessage extends LitElement {
         }
         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.
      */
@@ -99,15 +88,6 @@ __decorate([
 __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);

package/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  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 ? 'arrowup' : 'arrowdown';\n\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=\"var(--nile-colors-red-700)\"\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)\" part=\"icon\" size=\"14\" name=\"${iconName}\"></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"]}
+{"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,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,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;QAW1B,eAAU,GAAY,KAAK,CAAC;QAE5B,wCAAwC;QACvB,eAAU,GAAW,GAAG,CAAC;IA8D5C,CAAC;IAlFQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAoBD;;;OAGG;IACH,oBAAoB;QAClB,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YAChD,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;QAClE,CAAC;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,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC;QAE3D,OAAO,IAAI,CAAA;;;;;;;;;kDASmC,IAAI,CAAC,YAAY;;;UAGzD,IAAI,CAAC,aAAa;YACpB,CAAC,CAAC,IAAI,CAAA;;cAEA,IAAI,CAAC,aAAa;cAClB,IAAI,CAAC,iBAAiB;gBACpB,CAAC,CAAC,IAAI,CAAA;;;uBAGC,IAAI,CAAC,cAAc;iBACzB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;8FACkC,QAAQ;;eAEvF,CAAA,CAAC,CAAA,EAAE;;aAEL;YACL,CAAC,CAAC,EAAE;;;yDAG6C,IAAI,CAAC,UAAU;YAC5D,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,WAAW;;YAEb,IAAI,CAAC,iBAAiB;;;KAG7B,CAAC;IACJ,CAAC;CACF,CAAA;AA5EC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACD;AAI1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACL;AAItB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DACD;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDACA;AAlBjB,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAmF5B","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  // 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    const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';\n\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=\"var(--nile-colors-red-700)\"\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)\" part=\"icon\" size=\"14\" name=\"${iconName}\"></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-notification/nile-error-notification.css.js

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

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

@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;CAyBxB,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);\n  }\n\n  .nile-error-notification {\n    font-family: var(--nile-font-family-serif);\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n    border: 1px solid var(--indication-color);\n    border-left: 6px solid var(--indication-color);\n    border-radius: 4px;\n    padding: 8px;\n    background: var(--nile-colors-neutral-100);\n    color: var(--indication-color);\n    box-sizing: border-box;\n  }\n\n  .nile-error-notification__icon {\n    vertical-align: middle;\n    margin-right: 4px;\n  }\n`;\n\nexport default [styles];\n"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;CAyBxB,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-500);\n  }\n\n  .nile-error-notification {\n    font-family: var(--nile-font-family-serif);\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n    border: 1px solid var(--indication-color);\n    border-left: 6px solid var(--indication-color);\n    border-radius: 4px;\n    padding: 8px;\n    background: var(--nile-colors-neutral-100);\n    color: var(--indication-color);\n    box-sizing: border-box;\n  }\n\n  .nile-error-notification__icon {\n    vertical-align: middle;\n    margin-right: 4px;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-fileupload/index.d.ts

@@ -0,0 +1 @@
+export { NileFileupload } from './nile-fileupload';

package/dist/src/nile-fileupload/index.js

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

package/dist/src/nile-fileupload/index.js.map

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

package/dist/src/nile-fileupload/nile-fileupload.css.d.ts

@@ -0,0 +1,12 @@
+/**
+* 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.
+*/
+/**
+ * Fileupload CSS
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/src/nile-fileupload/nile-fileupload.css.js

@@ -0,0 +1,17 @@
+/**
+* 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';
+/**
+ * Fileupload CSS
+ */
+export const styles = css `
+	:host {
+
+	}
+`;
+export default [styles];
+//# sourceMappingURL=nile-fileupload.css.js.map

package/dist/src/nile-fileupload/nile-fileupload.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-fileupload.css.js","sourceRoot":"","sources":["../../../src/nile-fileupload/nile-fileupload.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,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 * Fileupload CSS\n */\nexport const styles = css`\n\t:host {\n\n\t}\n`;\n\nexport default [styles];"]}

package/dist/src/nile-fileupload/nile-fileupload.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 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 { CSSResultArray, TemplateResult } from 'lit';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile fileupload component.
+ *
+ * @tag nile-fileupload
+ *
+ */
+export declare class NileFileupload extends NileElement {
+    /**
+     * The styles for nile-fileupload
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles(): CSSResultArray;
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render(): TemplateResult;
+}
+export default NileFileupload;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-fileupload': NileFileupload;
+    }
+}

package/dist/src/nile-fileupload/nile-fileupload.js

@@ -0,0 +1,43 @@
+/**
+ * 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 { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { styles } from './nile-fileupload.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile fileupload component.
+ *
+ * @tag nile-fileupload
+ *
+ */
+let NileFileupload = class NileFileupload extends NileElement {
+    /**
+     * The styles for nile-fileupload
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    /* #endregion */
+    /* #region Methods */
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render() {
+        return html `
+			<h1> Hello World</h1>
+			`;
+    }
+};
+NileFileupload = __decorate([
+    customElement('nile-fileupload')
+], NileFileupload);
+export { NileFileupload };
+export default NileFileupload;
+//# sourceMappingURL=nile-fileupload.js.map

package/dist/src/nile-fileupload/nile-fileupload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-fileupload.js","sourceRoot":"","sources":["../../../src/nile-fileupload/nile-fileupload.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAa,IAAI,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAW,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAC,MAAM,EAAC,MAAM,uBAAuB,CAAC;AAC7C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD;;;;;GAKG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,WAAW;IAE9C;;;OAGG;IACI,MAAM,KAAK,MAAM;QACvB,OAAO,CAAC,MAAM,CAAC,CAAC;IACjB,CAAC;IAID,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACZ,OAAO,IAAI,CAAA;;IAET,CAAC;IACJ,CAAC;CAGD,CAAA;AA3BY,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CA2B1B;;AAED,eAAe,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 {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, property} from 'lit/decorators.js';\nimport {styles} from './nile-fileupload.css';\nimport NileElement from '../internal/nile-element';\n\n\n/**\n * Nile fileupload component.\n *\n * @tag nile-fileupload\n *\n */\n@customElement('nile-fileupload')\nexport class NileFileupload extends NileElement {\n\n\t/**\n\t * The styles for nile-fileupload\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n\t\t\t<h1> Hello World</h1>\n\t\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileFileupload;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-fileupload': NileFileupload;\n  }\n}"]}

package/dist/src/nile-filter-chip/nile-filter-chip.css.js

@@ -29,7 +29,7 @@ export const styles = css `
     transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
     cursor: pointer;
     gap: 6px;
-    margin-right: 6px;
+    /* margin-right: 6px; */
   }
 
   .chip:hover {

package/dist/src/nile-filter-chip/nile-filter-chip.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-filter-chip.css.js","sourceRoot":"","sources":["../../../src/nile-filter-chip/nile-filter-chip.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiGxB,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 * FilterChip CSS\n */\n\nexport const styles = css`\n\n\n  .filter-chips {\n    display: flex;\n    align-items: center;\n  }\n\n\n  .chip {\n    display: inline-flex;\n    align-items: center;\n    padding: 4px 8px;\n    border: 1px solid var(--nile-filter-chip-chip-border-color-stroke);\n    border-radius: 4px;\n    font-size: 14px;\n    background-color: var(--nile-filter-chip-background-default);\n    color: var(--nile-filter-chip-text-default);\n    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;\n    cursor: pointer;\n    gap: 6px;\n    margin-right: 6px;\n  }\n\n  .chip:hover {\n    background-color: var(--nile-filter-chip-hover-background);\n  }\n\n  .chip:active {\n    background-color: var(--nile-filter-chip-active-background);\n    border-color: var(--nile-filter-chip-active-border-color-stroke);\n  }\n\n  .icon {\n    color: var(--nile-filter-chip-icon-color-default);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    vertical-align: middle;\n    position: relative;\n    top: 12px;\n  }\n\n  .label {\n    font-weight: 500;\n    color: var(--nile-filter-chip-label-color-default);\n  }\n\n  nile-badge::part(base) {\n    width: auto;\n    height: 14px;\n    border-radius: 100px;\n    padding: 6px;\n    gap: 10px;\n    font-size: 8px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n  }\n\n  .chip-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n  }\n\n  .clear-all-container {\n    margin-left: 18px;\n    white-space: nowrap;\n    cursor: pointer;\n  }\n\n\n  .value {\n    color: var(--nile-filter-chip-values-color-default);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 140px;\n  }\n\n  .close-icon {\n    color: var(--nile-filter-chip-close-icon-color-default);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    padding: 2px;\n    border-radius: 50%;\n    transition: background-color 0.2s;\n  }\n\n  .close-icon:hover {\n    background-color: var(--nile-filter-chip-close-icon-hover-background);\n    color: var(--nile-filter-chip-close-icon-hover-color);\n  }\n`;\n\nexport default [styles];\n\n "]}
+{"version":3,"file":"nile-filter-chip.css.js","sourceRoot":"","sources":["../../../src/nile-filter-chip/nile-filter-chip.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiGxB,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 * FilterChip CSS\n */\n\nexport const styles = css`\n\n\n  .filter-chips {\n    display: flex;\n    align-items: center;\n  }\n\n\n  .chip {\n    display: inline-flex;\n    align-items: center;\n    padding: 4px 8px;\n    border: 1px solid var(--nile-filter-chip-chip-border-color-stroke);\n    border-radius: 4px;\n    font-size: 14px;\n    background-color: var(--nile-filter-chip-background-default);\n    color: var(--nile-filter-chip-text-default);\n    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;\n    cursor: pointer;\n    gap: 6px;\n    /* margin-right: 6px; */\n  }\n\n  .chip:hover {\n    background-color: var(--nile-filter-chip-hover-background);\n  }\n\n  .chip:active {\n    background-color: var(--nile-filter-chip-active-background);\n    border-color: var(--nile-filter-chip-active-border-color-stroke);\n  }\n\n  .icon {\n    color: var(--nile-filter-chip-icon-color-default);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    vertical-align: middle;\n    position: relative;\n    top: 12px;\n  }\n\n  .label {\n    font-weight: 500;\n    color: var(--nile-filter-chip-label-color-default);\n  }\n\n  nile-badge::part(base) {\n    width: auto;\n    height: 14px;\n    border-radius: 100px;\n    padding: 6px;\n    gap: 10px;\n    font-size: 8px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n  }\n\n  .chip-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n  }\n\n  .clear-all-container {\n    margin-left: 18px;\n    white-space: nowrap;\n    cursor: pointer;\n  }\n\n\n  .value {\n    color: var(--nile-filter-chip-values-color-default);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 140px;\n  }\n\n  .close-icon {\n    color: var(--nile-filter-chip-close-icon-color-default);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    padding: 2px;\n    border-radius: 50%;\n    transition: background-color 0.2s;\n  }\n\n  .close-icon:hover {\n    background-color: var(--nile-filter-chip-close-icon-hover-background);\n    color: var(--nile-filter-chip-close-icon-hover-color);\n  }\n`;\n\nexport default [styles];\n\n "]}