@aquera/nile-elements 0.0.62 → 0.0.64

package/dist/src/nile-table-body/nile-table-body.js

@@ -22,7 +22,6 @@ let NileTableBody = class NileTableBody extends NileElement {
          * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
          */
         super(...arguments);
-        this.sortOrder = false;
         this.rows_data = [];
         this.header_rows_data = [];
         /* #endregion */
@@ -35,6 +34,9 @@ let NileTableBody = class NileTableBody extends NileElement {
     getChildren(child, tagname) {
         return child.querySelectorAll(tagname);
     }
+    getIndexValue(index__value) {
+        return this.header_rows_data.indexOf(index__value);
+    }
     handleSlotchange(e) {
         let row_data = [];
         this._childNodes.forEach((child) => {
@@ -75,36 +77,42 @@ let NileTableBody = class NileTableBody extends NileElement {
             }
         });
     }
-    handleDataSort(index) {
+    handleDataSort(index, order) {
         this.rows_data.sort((a, b) => {
-            let first_row_value = a[index].toLowerCase();
-            let second_row_value = b[index].toLowerCase();
-            return this.sortOrder
-                ? first_row_value < second_row_value
+            let first_row_value = a[index]?.toLowerCase();
+            let second_row_value = b[index]?.toLowerCase();
+            return order == 'asc'
+                ? first_row_value <= second_row_value
                     ? 1
                     : -1
                 : first_row_value < second_row_value
                     ? -1
                     : 1;
         });
-        this.sortOrder = !this.sortOrder;
-    }
-    getIndexValue(index__value) {
-        return this.header_rows_data.indexOf(index__value);
     }
     handleSort(e) {
-        this.sort__index = this.getIndexValue(e.detail.value.textContent);
-        this.handleDataSort(this.sort__index);
+        const { curr_sort_string, order } = e.detail.value;
+        this.sort__index = this.getIndexValue(curr_sort_string);
+        this.handleDataSort(this.sort__index, order);
         this.handleDataChange();
     }
+    handleSearch(e) {
+        const searchText = e.detail.value;
+        this.search__index = this.getIndexValue(e.target.textContent);
+        this.emit('nile-table-search', {
+            index: this.search__index,
+            value: searchText,
+        });
+    }
     render() {
         return html `
-      <div class="base">
+      <div class="base" part="base">
         <slot name="table__header" class="table__header"></slot>
         <slot
           @slotchange=${this.handleSlotchange}
           @nile-click-sort=${this.handleSort}
           class="nile__table__body"
+          @nile-search=${this.handleSearch}
         ></slot>
       </div>
     `;
@@ -116,9 +124,6 @@ __decorate([
 __decorate([
     queryAssignedNodes({ flatten: true })
 ], NileTableBody.prototype, "_childNodes", void 0);
-__decorate([
-    state()
-], NileTableBody.prototype, "sortOrder", void 0);
 __decorate([
     state()
 ], NileTableBody.prototype, "rows_data", void 0);
@@ -128,6 +133,9 @@ __decorate([
 __decorate([
     state()
 ], NileTableBody.prototype, "sort__index", void 0);
+__decorate([
+    state()
+], NileTableBody.prototype, "search__index", void 0);
 NileTableBody = __decorate([
     customElement('nile-table-body')
 ], NileTableBody);

package/dist/src/nile-table-body/nile-table-body.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-table-body.js","sourceRoot":"","sources":["../../../src/nile-table-body/nile-table-body.ts"],"names":[],"mappings":"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","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  property,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport {\n  customElement,\n  query,\n  state,\n  queryAll,\n  queryAssignedElements,\n  queryAssignedNodes,\n} from 'lit/decorators.js';\nimport { styles } from './nile-table-body.css';\nimport NileElement from '../internal/nile-element';\nimport { getInnerHTML } from '../slot';\n\n/**\n * nile-table-body component.\n *\n * @tag nile-table-body\n *\n */\n@customElement('nile-table-body')\nexport class NileTableBody extends NileElement {\n  /**\n   * The styles for TableBody\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n\n  @query('slot') defaultSlot: HTMLSlotElement;\n  @queryAssignedNodes({ flatten: true })\n  _childNodes!: Array<HTMLElement>;\n\n  @state() private sortOrder = false;\n  @state() private rows_data: any[] = [];\n  @state() private header_rows_data: any[] = [];\n  @state() private sort__index: number;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  private getChildren(child: any, tagname: string) {\n    return child.querySelectorAll(tagname);\n  }\n\n  handleSlotchange(e: any) {\n    let row_data: any = [];\n    this._childNodes.forEach((child: any) => {\n      if (child.tagName && child?.tagName?.toLowerCase() === 'nile-table-row') {\n        let nilerows = this.getChildren(child, 'nile-table-cell-item');\n        if (nilerows.length > 0) {\n          nilerows.forEach((element: { innerHTML: any }) => {\n            row_data.push(element.innerHTML);\n          });\n          this.rows_data.push(row_data);\n        } else {\n          let nileheaders = this.getChildren(child, 'nile-table-header-item');\n          if (nileheaders.length > 0) {\n            nileheaders.forEach((header: HTMLSlotElement, index: number) => {\n              this.header_rows_data.push(header.innerHTML);\n            });\n          }\n        }\n        row_data = [];\n      }\n    });\n  }\n\n  private handleDataChange() {\n    let i = 0;\n    let j = 0;\n    this._childNodes.forEach((child: any, index) => {\n      if (\n        index != 0 &&\n        child.tagName &&\n        child?.tagName?.toLowerCase() === 'nile-table-row'\n      ) {\n        let nilerows = this.getChildren(child, 'nile-table-cell-item');\n        if (nilerows.length > 0) {\n          nilerows.forEach(\n            (element: { innerHTML: any }, curr_index: number) => {\n              element.innerHTML = this.rows_data[i][curr_index];\n            }\n          );\n          i++;\n        }\n      }\n    });\n  }\n\n  private handleDataSort(index: number) {\n    this.rows_data.sort((a: any, b: any) => {\n      let first_row_value = a[index].toLowerCase();\n      let second_row_value = b[index].toLowerCase();\n      return this.sortOrder\n        ? first_row_value < second_row_value\n          ? 1\n          : -1\n        : first_row_value < second_row_value\n        ? -1\n        : 1;\n    });\n\n    this.sortOrder = !this.sortOrder;\n  }\n\n  private getIndexValue(index__value: string): number {\n    return this.header_rows_data.indexOf(index__value);\n  }\n\n  private handleSort(e: any) {\n    this.sort__index = this.getIndexValue(e.detail.value.textContent);\n    this.handleDataSort(this.sort__index);\n    this.handleDataChange();\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"base\">\n        <slot name=\"table__header\" class=\"table__header\"></slot>\n        <slot\n          @slotchange=${this.handleSlotchange}\n          @nile-click-sort=${this.handleSort}\n          class=\"nile__table__body\"\n        ></slot>\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileTableBody;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-table-body': NileTableBody;\n  }\n}\n"]}
+{"version":3,"file":"nile-table-body.js","sourceRoot":"","sources":["../../../src/nile-table-body/nile-table-body.ts"],"names":[],"mappings":"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","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  property,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport {\n  customElement,\n  query,\n  state,\n  queryAll,\n  queryAssignedElements,\n  queryAssignedNodes,\n} from 'lit/decorators.js';\nimport { styles } from './nile-table-body.css';\nimport NileElement from '../internal/nile-element';\nimport { getInnerHTML } from '../slot';\n\n/**\n * nile-table-body component.\n *\n * @tag nile-table-body\n *\n */\n@customElement('nile-table-body')\nexport class NileTableBody extends NileElement {\n  /**\n   * The styles for TableBody\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n\n  @query('slot') defaultSlot: HTMLSlotElement;\n  @queryAssignedNodes({ flatten: true })\n  _childNodes!: Array<HTMLElement>;\n\n  @state() private rows_data: any[] = [];\n  @state() private header_rows_data: any[] = [];\n  @state() private sort__index: number;\n  @state() private search__index: number;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  private getChildren(child: any, tagname: string) {\n    return child.querySelectorAll(tagname);\n  }\n\n  private getIndexValue(index__value: string): number {\n    return this.header_rows_data.indexOf(index__value);\n  }\n\n  handleSlotchange(e: any) {\n    let row_data: any = [];\n    this._childNodes.forEach((child: any) => {\n      if (child.tagName && child?.tagName?.toLowerCase() === 'nile-table-row') {\n        let nilerows = this.getChildren(child, 'nile-table-cell-item');\n        if (nilerows.length > 0) {\n          nilerows.forEach((element: { innerHTML: any }) => {\n            row_data.push(element.innerHTML);\n          });\n          this.rows_data.push(row_data);\n        } else {\n          let nileheaders = this.getChildren(child, 'nile-table-header-item');\n          if (nileheaders.length > 0) {\n            nileheaders.forEach((header: HTMLSlotElement, index: number) => {\n              this.header_rows_data.push(header.innerHTML);\n            });\n          }\n        }\n        row_data = [];\n      }\n    });\n  }\n\n  private handleDataChange() {\n    let i = 0;\n    let j = 0;\n    this._childNodes.forEach((child: any, index) => {\n      if (\n        index != 0 &&\n        child.tagName &&\n        child?.tagName?.toLowerCase() === 'nile-table-row'\n      ) {\n        let nilerows = this.getChildren(child, 'nile-table-cell-item');\n        if (nilerows.length > 0) {\n          nilerows.forEach(\n            (element: { innerHTML: any }, curr_index: number) => {\n              element.innerHTML = this.rows_data[i][curr_index];\n            }\n          );\n          i++;\n        }\n      }\n    });\n  }\n\n  private handleDataSort(index: number, order: string) {\n    this.rows_data.sort((a: any, b: any) => {\n      let first_row_value = a[index]?.toLowerCase();\n      let second_row_value = b[index]?.toLowerCase();\n      return order == 'asc'\n        ? first_row_value <= second_row_value\n          ? 1\n          : -1\n        : first_row_value < second_row_value\n        ? -1\n        : 1;\n    });\n  }\n\n  private handleSort(e: any) {\n    const { curr_sort_string, order } = e.detail.value;\n    this.sort__index = this.getIndexValue(curr_sort_string);\n    this.handleDataSort(this.sort__index, order);\n    this.handleDataChange();\n  }\n\n  private handleSearch(e: any) {\n    const searchText = e.detail.value;\n    this.search__index = this.getIndexValue(e.target.textContent);\n    this.emit('nile-table-search', {\n      index: this.search__index,\n      value: searchText,\n    });\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"base\" part=\"base\">\n        <slot name=\"table__header\" class=\"table__header\"></slot>\n        <slot\n          @slotchange=${this.handleSlotchange}\n          @nile-click-sort=${this.handleSort}\n          class=\"nile__table__body\"\n          @nile-search=${this.handleSearch}\n        ></slot>\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileTableBody;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-table-body': NileTableBody;\n  }\n}\n"]}

package/dist/src/nile-table-header-item/nile-table-header-item.css.js

@@ -12,8 +12,7 @@ export const styles = css `
   :host {
     display: table-cell;
     box-sizing: border-box;
-    --min--height: 52px;
-    --min--width: 180px;
+    --min-height: 52px;
   }
 
   .headers {
@@ -21,26 +20,36 @@ export const styles = css `
     padding: 0 var(--nile-type-scale-4);
     align-items: center;
     height: auto;
-    min-height: var(--min--height);
-    width: auto;
-    min-width: var(--min--width);
+    min-height: var(--min-height);
+    width: 100%;
     gap: 8px;
     color: var(--nile-colors-dark-900);
     font-feature-settings: 'clig' off, 'liga' off;
     font-size: var(--nile-type-scale-3);
     font-style: normal;
     font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-type-scale-3); /* 100% */
+    line-height: var(--nile-type-scale-3);
     letter-spacing: 0.2px;
   }
 
   slot {
     cursor: pointer;
   }
-  
+
   nile-icon {
     cursor: pointer;
   }
+
+  .sorting__icons {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: centre;
+  }
+
+  .sorting__icons nile-icon:hover {
+    opacity: 0.4;
+  }
 `;
 export default [styles];
 //# sourceMappingURL=nile-table-header-item.css.js.map

package/dist/src/nile-table-header-item/nile-table-header-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-table-header-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCxB,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 * TableHeaderItem CSS\n */\nexport const styles = css`\n  :host {\n    display: table-cell;\n    box-sizing: border-box;\n    --min--height: 52px;\n    --min--width: 180px;\n  }\n\n  .headers {\n    display: flex;\n    padding: 0 var(--nile-type-scale-4);\n    align-items: center;\n    height: auto;\n    min-height: var(--min--height);\n    width: auto;\n    min-width: var(--min--width);\n    gap: 8px;\n    color: var(--nile-colors-dark-900);\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-3);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-type-scale-3); /* 100% */\n    letter-spacing: 0.2px;\n  }\n\n  slot {\n    cursor: pointer;\n  }\n  \n  nile-icon {\n    cursor: pointer;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-table-header-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CxB,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 * TableHeaderItem CSS\n */\nexport const styles = css`\n  :host {\n    display: table-cell;\n    box-sizing: border-box;\n    --min-height: 52px;\n  }\n\n  .headers {\n    display: flex;\n    padding: 0 var(--nile-type-scale-4);\n    align-items: center;\n    height: auto;\n    min-height: var(--min-height);\n    width: 100%;\n    gap: 8px;\n    color: var(--nile-colors-dark-900);\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-3);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-type-scale-3);\n    letter-spacing: 0.2px;\n  }\n\n  slot {\n    cursor: pointer;\n  }\n\n  nile-icon {\n    cursor: pointer;\n  }\n\n  .sorting__icons {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: centre;\n  }\n\n  .sorting__icons nile-icon:hover {\n    opacity: 0.4;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-table-header-item/nile-table-header-item.d.ts

@@ -21,13 +21,16 @@ export declare class NileTableHeaderItem extends NileElement {
     static get styles(): CSSResultArray;
     /** Enables the sort functionality. */
     havesort: boolean;
+    /** Enables the sort functionality. */
+    havefilter: boolean;
     /** Places the icon . */
     iconName: string;
     /**
      * Render method
      * @slot This is a slot test
      */
-    private handleClick;
+    private handleSort;
+    private handleSearch;
     render(): TemplateResult;
 }
 export default NileTableHeaderItem;

package/dist/src/nile-table-header-item/nile-table-header-item.js

@@ -22,6 +22,8 @@ let NileTableHeaderItem = class NileTableHeaderItem extends NileElement {
         this.hasSlotController = new HasSlotController(this, '[default]');
         /** Enables the sort functionality. */
         this.havesort = false;
+        /** Enables the sort functionality. */
+        this.havefilter = false;
         /** Places the icon . */
         this.iconName = '';
         /* #endregion */
@@ -39,27 +41,59 @@ let NileTableHeaderItem = class NileTableHeaderItem extends NileElement {
      * Render method
      * @slot This is a slot test
      */
-    handleClick(e) {
-        if (!this.havesort) {
-            return;
-        }
-        let curr_sort_string = e.target?.parentElement?.children[0]?.assignedNodes()[0];
-        this.emit('nile-click-sort', { value: curr_sort_string });
+    handleSort(e) {
+        const clickedIcon = e.target;
+        const order = clickedIcon.getAttribute('name') === 'arrowdropup' ? 'asc' : 'desc';
+        let curr_sort_string = this.hasSlotController.host.innerHTML;
+        this.emit('nile-click-sort', {
+            value: { curr_sort_string, order },
+        });
+    }
+    handleSearch(e) {
+        this.emit('nile-search', { value: e.detail.value });
     }
     render() {
         return html ` ${this.hasSlotController.test('[default]')
             ? html ` <div class="headers">
-          <slot @click=${this.handleClick}> </slot>
+          <slot> </slot>
+          ${this.havesort
+                ? html ` <span class="sorting__icons">
+                <nile-icon
+                  name="arrowdropup"
+                  size="16"
+                  @click=${this.handleSort}
+                ></nile-icon>
+                <nile-icon
+                  name="arrowdropdown"
+                  size="16"
+                  @click=${this.handleSort}
+                ></nile-icon>
+              </span>`
+                : null}
           ${this.iconName
-                ? html ` <nile-icon name="${this.iconName}" size="16" @click=${this.handleClick}></nile-icon>`
+                ? html ` <nile-icon name="${this.iconName}" size="16"></nile-icon>`
+                : html ``}
+          ${this.havefilter
+                ? html ` <nile-popover title="Filter" placement="bottom">
+                <nile-icon name="filter" size="16" slot="anchor"></nile-icon>
+                <nile-input
+                  placeholder="Search"
+                  @nile-input=${this.handleSearch}
+                  part="filter__search"
+                ></nile-input>
+                <slot name="filter__content" part="filter__content"></slot>
+              </nile-popover>`
                 : html ``}
         </div>`
-            : html ``}`;
+            : null}`;
     }
 };
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileTableHeaderItem.prototype, "havesort", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileTableHeaderItem.prototype, "havefilter", void 0);
 __decorate([
     property({ type: String, reflect: true, attribute: 'icon-name' })
 ], NileTableHeaderItem.prototype, "iconName", void 0);

package/dist/src/nile-table-header-item/nile-table-header-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-table-header-item.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,EACJ,QAAQ,GAGT,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD;;;;;GAKG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,WAAW;IAA7C;;QACY,sBAAiB,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QAS9E,sCAAsC;QACM,aAAQ,GAAG,KAAK,CAAC;QAE7D,wBAAwB;QAC2C,aAAQ,GACzE,EAAE,CAAC;QA6BL,gBAAgB;IAClB,CAAC;IA3CC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IASD,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACK,WAAW,CAAC,CAAM;QACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAO;SACR;QACD,IAAI,gBAAgB,GAClB,CAAC,CAAC,MAAM,EAAE,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC,CAAC;QAC3D,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC,CAAC;IAC5D,CAAC;IACM,MAAM;QACX,OAAO,IAAI,CAAA,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC;YACrD,CAAC,CAAC,IAAI,CAAA;yBACa,IAAI,CAAC,WAAW;YAC7B,IAAI,CAAC,QAAQ;gBACb,CAAC,CAAC,IAAI,CAAA,qBAAqB,IAAI,CAAC,QAAQ,sBAAsB,IAAI,CAAC,WAAW,eAAe;gBAC7F,CAAC,CAAC,IAAI,CAAA,EAAE;eACL;YACT,CAAC,CAAC,IAAI,CAAA,EAAE,EAAE,CAAC;IACf,CAAC;CAGF,CAAA;AAlC6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDAAkB;AAGM;IAAlE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;qDAC7D;AAfM,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CA6C/B;SA7CY,mBAAmB;AA+ChC,eAAe,mBAAmB,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  property,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-table-header-item.css';\nimport NileElement from '../internal/nile-element';\nimport { HasSlotController } from '../internal/slot';\n\n/**\n * Nile icon component.\n *\n * @tag nile-table-header-item\n *\n */\n@customElement('nile-table-header-item')\nexport class NileTableHeaderItem extends NileElement {\n  private readonly hasSlotController = new HasSlotController(this, '[default]');\n  /**\n   * The styles for TableHeaderItem\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  /** Enables the sort functionality. */\n  @property({ type: Boolean, reflect: true }) havesort = false;\n  \n  /** Places the icon . */\n  @property({ type: String, reflect: true, attribute: 'icon-name' }) iconName =\n    '';\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  private handleClick(e: any) {\n    if (!this.havesort) {\n      return;\n    }\n    let curr_sort_string =\n      e.target?.parentElement?.children[0]?.assignedNodes()[0];\n    this.emit('nile-click-sort', { value: curr_sort_string });\n  }\n  public render(): TemplateResult {\n    return html` ${this.hasSlotController.test('[default]')\n      ? html` <div class=\"headers\">\n          <slot @click=${this.handleClick}> </slot>\n          ${this.iconName\n            ? html` <nile-icon name=\"${this.iconName}\" size=\"16\" @click=${this.handleClick}></nile-icon>`\n            : html``}\n        </div>`\n      : html``}`;\n  }\n\n  /* #endregion */\n}\n\nexport default NileTableHeaderItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-table-header-item': NileTableHeaderItem;\n  }\n}\n"]}
+{"version":3,"file":"nile-table-header-item.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,EACJ,QAAQ,GAGT,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD;;;;;GAKG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,WAAW;IAA7C;;QACY,sBAAiB,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QAS9E,sCAAsC;QACM,aAAQ,GAAG,KAAK,CAAC;QAE7D,sCAAsC;QACM,eAAU,GAAG,KAAK,CAAC;QAE/D,wBAAwB;QAC2C,aAAQ,GACzE,EAAE,CAAC;QA2DL,gBAAgB;IAClB,CAAC;IA5EC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAYD,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACK,UAAU,CAAC,CAAM;QACvB,MAAM,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC;QAC7B,MAAM,KAAK,GACT,WAAW,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC;QACtE,IAAI,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC;QAC7D,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;YAC3B,KAAK,EAAE,EAAE,gBAAgB,EAAE,KAAK,EAAE;SACnC,CAAC,CAAC;IACL,CAAC;IAEO,YAAY,CAAC,CAAM;QACzB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;IACtD,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC;YACrD,CAAC,CAAC,IAAI,CAAA;;YAEA,IAAI,CAAC,QAAQ;gBACb,CAAC,CAAC,IAAI,CAAA;;;;2BAIS,IAAI,CAAC,UAAU;;;;;2BAKf,IAAI,CAAC,UAAU;;sBAEpB;gBACV,CAAC,CAAC,IAAI;YACN,IAAI,CAAC,QAAQ;gBACb,CAAC,CAAC,IAAI,CAAA,qBAAqB,IAAI,CAAC,QAAQ,0BAA0B;gBAClE,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,IAAI,CAAC,UAAU;gBACf,CAAC,CAAC,IAAI,CAAA;;;;gCAIc,IAAI,CAAC,YAAY;;;;8BAInB;gBAClB,CAAC,CAAC,IAAI,CAAA,EAAE;eACL;YACT,CAAC,CAAC,IAAI,EAAE,CAAC;IACb,CAAC;CAEF,CAAA;AAnE6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDAAoB;AAGI;IAAlE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;qDAC7D;AAlBM,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CA8E/B;SA9EY,mBAAmB;AAgFhC,eAAe,mBAAmB,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  property,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-table-header-item.css';\nimport NileElement from '../internal/nile-element';\nimport { HasSlotController } from '../internal/slot';\n\n/**\n * Nile icon component.\n *\n * @tag nile-table-header-item\n *\n */\n@customElement('nile-table-header-item')\nexport class NileTableHeaderItem extends NileElement {\n  private readonly hasSlotController = new HasSlotController(this, '[default]');\n  /**\n   * The styles for TableHeaderItem\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  /** Enables the sort functionality. */\n  @property({ type: Boolean, reflect: true }) havesort = false;\n\n  /** Enables the sort functionality. */\n  @property({ type: Boolean, reflect: true }) havefilter = false;\n\n  /** Places the icon . */\n  @property({ type: String, reflect: true, attribute: 'icon-name' }) iconName =\n    '';\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  private handleSort(e: any) {\n    const clickedIcon = e.target;\n    const order =\n      clickedIcon.getAttribute('name') === 'arrowdropup' ? 'asc' : 'desc';\n    let curr_sort_string = this.hasSlotController.host.innerHTML;\n    this.emit('nile-click-sort', {\n      value: { curr_sort_string, order },\n    });\n  }\n\n  private handleSearch(e: any) {\n    this.emit('nile-search', { value: e.detail.value });\n  }\n\n  public render(): TemplateResult {\n    return html` ${this.hasSlotController.test('[default]')\n      ? html` <div class=\"headers\">\n          <slot> </slot>\n          ${this.havesort\n            ? html` <span class=\"sorting__icons\">\n                <nile-icon\n                  name=\"arrowdropup\"\n                  size=\"16\"\n                  @click=${this.handleSort}\n                ></nile-icon>\n                <nile-icon\n                  name=\"arrowdropdown\"\n                  size=\"16\"\n                  @click=${this.handleSort}\n                ></nile-icon>\n              </span>`\n            : null}\n          ${this.iconName\n            ? html` <nile-icon name=\"${this.iconName}\" size=\"16\"></nile-icon>`\n            : html``}\n          ${this.havefilter\n            ? html` <nile-popover title=\"Filter\" placement=\"bottom\">\n                <nile-icon name=\"filter\" size=\"16\" slot=\"anchor\"></nile-icon>\n                <nile-input\n                  placeholder=\"Search\"\n                  @nile-input=${this.handleSearch}\n                  part=\"filter__search\"\n                ></nile-input>\n                <slot name=\"filter__content\" part=\"filter__content\"></slot>\n              </nile-popover>`\n            : html``}\n        </div>`\n      : null}`;\n  }\n  /* #endregion */\n}\n\nexport default NileTableHeaderItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-table-header-item': NileTableHeaderItem;\n  }\n}\n"]}

package/dist/src/nile-table-row/nile-table-row.css.js

@@ -11,6 +11,7 @@ import { css } from 'lit-element';
 export const styles = css `
   :host {
     display: table-row;
+    width:100%;
     --nile-header-background:var(--nile-table-header-background-color);
     border-bottom: 1px solid var(--nile-table-row-border-color);
   }

package/dist/src/nile-table-row/nile-table-row.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-table-row.css.js","sourceRoot":"","sources":["../../../src/nile-table-row/nile-table-row.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;CAUxB,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 * TableRow CSS\n */\nexport const styles = css`\n  :host {\n    display: table-row;\n    --nile-header-background:var(--nile-table-header-background-color);\n    border-bottom: 1px solid var(--nile-table-row-border-color);\n  }\n\n  slot::slotted(nile-table-header-item) {\n    background-color: var(--nile-header-background);\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-table-row.css.js","sourceRoot":"","sources":["../../../src/nile-table-row/nile-table-row.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;CAWxB,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 * TableRow CSS\n */\nexport const styles = css`\n  :host {\n    display: table-row;\n    width:100%;\n    --nile-header-background:var(--nile-table-header-background-color);\n    border-bottom: 1px solid var(--nile-table-row-border-color);\n  }\n\n  slot::slotted(nile-table-header-item) {\n    background-color: var(--nile-header-background);\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -51,46 +51,65 @@ export const styles = css `
   }
 
   .alert--success {
-    border: 1px solid var(--nile-colors-green-500);
-    background: var(--nile-colors-green-100);
-    box-shadow: 0px 14px 28px 0px rgba(119, 125, 130, 0.15);
+    border: 1px solid var(--nile-toast-color-border-success);
+    background: var(--nile-toast-color-background-success);
+    box-shadow: var(--nile-toast-color-box-shadow);
   }
 
   .alert--success .alert__prefix-icon-container {
-    background: var(--nile-colors-green-500);
+    background: var(--nile-toast-color-icon-background-color-success);
   }
 
   .alert--info {
-    border: 1px solid var(--nile-colors-blue-500);
-    background: var(--nile-colors-blue-100);
-    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
+    border: 1px solid var(--nile-toast-color-border-info);
+    background: var(--nile-toast-color-background-info);
+    box-shadow: var(--nile-toast-color-box-shadow);
   }
 
   .alert--info .alert__prefix-icon-container {
-    background: var(--nile-colors-blue-500);
+    background: var(--nile-toast-color-icon-background-color-info);
   }
 
   .alert--warning {
-    border: 1px solid var(--nile-colors-yellow-500);
-    background: var(--nile-colors-yellow-100);
-    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
+    border: 1px solid var(--nile-toast-color-border-warning);
+    background: var(--nile-toast-color-background-warning);
+    box-shadow: var(--nile-toast-color-box-shadow);
   }
 
   .alert--warning .alert__prefix-icon-container {
-    background: var(--nile-colors-yellow-500);
+    background: var(--nile-toast-color-icon-background-color-warning);
   }
 
   .alert--error {
-    border: 1px solid var(--nile-colors-red-500);
-    background: var(--nile-colors-red-100);
-    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
+    border: 1px solid var(--nile-toast-color-border-error);
+    background: var(--nile-toast-color-background-error);
+    box-shadow: var(--nile-toast-color-box-shadow);
   }
 
   .alert--error .alert__prefix-icon-container {
-    border: 1px solid var(--nile-colors-red-500);
-    background: var(--nile-colors-red-500);
+    background: var(--nile-toast-color-icon-background-color-error);
   }
 
+  .alert--gray {
+    border: 1px solid var(--nile-toast-color-border-gray);
+    background: var(--nile-toast-color-background-gray);
+    box-shadow: var(--nile-toast-color-box-shadow);
+  }
+
+  .alert--gray .alert__prefix-icon-container {
+    background: var(--nile-toast-color-icon-background-color-gray);
+  }
+
+  .alert--black {
+    border: 1px solid var(--nile-toast-color-border-black);
+    background: var(--nile-toast-color-background-black);
+    box-shadow: var(--nile-toast-color-box-black);
+  }
+
+  .alert--black .alert__prefix-icon-container {
+    background: var(--nile-toast-color-icon-background-color-black);
+  }
+  
   .alert__message {
     flex: 1 1 auto;
     display: block;
@@ -99,7 +118,7 @@ export const styles = css `
     align-items: center;
     flex-direction: column;
     align-items: flex-start;
-    font-family:var(--nile-font-family-serif);
+    font-family: var(--nile-font-family-serif);
     font-size: 14px;
     font-weight: 400;
     line-height: 14px;
@@ -161,7 +180,7 @@ export const styles = css `
     border-radius: 4px 0 0 4px;
   }
 
-  .alert__prefix-img{
+  .alert__prefix-img {
     height: 24px;
     border-radius: 4px;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"nile-toast.css.js","sourceRoot":"","sources":["../../../src/nile-toast/nile-toast.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiKxB,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 * Toast CSS\n */\nexport const styles = css`\n  :host {\n    display: contents;\n\n    /* For better DX, we'll reset the margin here so the base part can inherit it */\n    margin: 0;\n  }\n\n  .alert {\n    position: relative;\n    display: flex;\n    align-items: stretch;\n    border: solid 2px 2px;\n    border-radius: var(--nile-radius-base-standard);\n    margin: inherit;\n    padding: 12px;\n    gap: 10px;\n  }\n\n  .alert:not(.alert--has-icon) .alert__icon,\n  .alert:not(.alert--closable) .alert__close-button {\n    display: none;\n  }\n\n  .alert__prefix-icon-container {\n    height: 26px;\n    width: 26px;\n    border-radius: 4px;\n    padding: 6px;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .alert__icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: 10px;\n  }\n\n  .alert--success {\n    border: 1px solid var(--nile-colors-green-500);\n    background: var(--nile-colors-green-100);\n    box-shadow: 0px 14px 28px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .alert--success .alert__prefix-icon-container {\n    background: var(--nile-colors-green-500);\n  }\n\n  .alert--info {\n    border: 1px solid var(--nile-colors-blue-500);\n    background: var(--nile-colors-blue-100);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .alert--info .alert__prefix-icon-container {\n    background: var(--nile-colors-blue-500);\n  }\n\n  .alert--warning {\n    border: 1px solid var(--nile-colors-yellow-500);\n    background: var(--nile-colors-yellow-100);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .alert--warning .alert__prefix-icon-container {\n    background: var(--nile-colors-yellow-500);\n  }\n\n  .alert--error {\n    border: 1px solid var(--nile-colors-red-500);\n    background: var(--nile-colors-red-100);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .alert--error .alert__prefix-icon-container {\n    border: 1px solid var(--nile-colors-red-500);\n    background: var(--nile-colors-red-500);\n  }\n\n  .alert__message {\n    flex: 1 1 auto;\n    display: block;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    align-items: flex-start;\n    font-family:var(--nile-font-family-serif);\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 14px;\n    color: black;\n  }\n\n  .alert__message--title {\n    font-weight: 600;\n  }\n\n  .alert__message--content {\n    line-height: 21px;\n  }\n\n  .alert__message--content-only {\n    margin-top: 3px;\n  }\n\n  .alert__close-button {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .alert__tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    margin-top: 4px;\n  }\n\n  .alert__tag {\n    height: 24px;\n    display: flex;\n    border-radius: 4px;\n    border: 1px solid #e5e9eb;\n    background: var(--nile-colors-white-base);\n  }\n\n  .alert__tag-content {\n    border-left: 1px solid #e5e9eb;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 6px;\n\n    color: var(--nile-colors-dark-900);\n    font-family: Colfax-regular;\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  }\n\n  .alert__tag-image {\n    height: 24px;\n    width: 24px;\n    border-radius: 4px 0 0 4px;\n  }\n\n  .alert__prefix-img{\n    height: 24px;\n    border-radius: 4px;\n  }\n\n  [hidden] {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-toast.css.js","sourceRoot":"","sources":["../../../src/nile-toast/nile-toast.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoLxB,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 * Toast CSS\n */\nexport const styles = css`\n  :host {\n    display: contents;\n\n    /* For better DX, we'll reset the margin here so the base part can inherit it */\n    margin: 0;\n  }\n\n  .alert {\n    position: relative;\n    display: flex;\n    align-items: stretch;\n    border: solid 2px 2px;\n    border-radius: var(--nile-radius-base-standard);\n    margin: inherit;\n    padding: 12px;\n    gap: 10px;\n  }\n\n  .alert:not(.alert--has-icon) .alert__icon,\n  .alert:not(.alert--closable) .alert__close-button {\n    display: none;\n  }\n\n  .alert__prefix-icon-container {\n    height: 26px;\n    width: 26px;\n    border-radius: 4px;\n    padding: 6px;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .alert__icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: 10px;\n  }\n\n  .alert--success {\n    border: 1px solid var(--nile-toast-color-border-success);\n    background: var(--nile-toast-color-background-success);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--success .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-success);\n  }\n\n  .alert--info {\n    border: 1px solid var(--nile-toast-color-border-info);\n    background: var(--nile-toast-color-background-info);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--info .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-info);\n  }\n\n  .alert--warning {\n    border: 1px solid var(--nile-toast-color-border-warning);\n    background: var(--nile-toast-color-background-warning);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--warning .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-warning);\n  }\n\n  .alert--error {\n    border: 1px solid var(--nile-toast-color-border-error);\n    background: var(--nile-toast-color-background-error);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--error .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-error);\n  }\n\n  .alert--gray {\n    border: 1px solid var(--nile-toast-color-border-gray);\n    background: var(--nile-toast-color-background-gray);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--gray .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-gray);\n  }\n\n  .alert--black {\n    border: 1px solid var(--nile-toast-color-border-black);\n    background: var(--nile-toast-color-background-black);\n    box-shadow: var(--nile-toast-color-box-black);\n  }\n\n  .alert--black .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-black);\n  }\n  \n  .alert__message {\n    flex: 1 1 auto;\n    display: block;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    align-items: flex-start;\n    font-family: var(--nile-font-family-serif);\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 14px;\n    color: black;\n  }\n\n  .alert__message--title {\n    font-weight: 600;\n  }\n\n  .alert__message--content {\n    line-height: 21px;\n  }\n\n  .alert__message--content-only {\n    margin-top: 3px;\n  }\n\n  .alert__close-button {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .alert__tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    margin-top: 4px;\n  }\n\n  .alert__tag {\n    height: 24px;\n    display: flex;\n    border-radius: 4px;\n    border: 1px solid #e5e9eb;\n    background: var(--nile-colors-white-base);\n  }\n\n  .alert__tag-content {\n    border-left: 1px solid #e5e9eb;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 6px;\n\n    color: var(--nile-colors-dark-900);\n    font-family: Colfax-regular;\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  }\n\n  .alert__tag-image {\n    height: 24px;\n    width: 24px;\n    border-radius: 4px 0 0 4px;\n  }\n\n  .alert__prefix-img {\n    height: 24px;\n    border-radius: 4px;\n  }\n\n  [hidden] {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -49,7 +49,7 @@ export declare class NileToast extends NileElement {
     hasSlottedIcon: boolean;
     prefixImageUrl: string;
     /** The alert's theme variant. */
-    variant: 'success' | 'info' | 'warning' | 'error';
+    variant: 'success' | 'info' | 'warning' | 'error' | 'gray' | 'black';
     /**
      * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with
      * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning
@@ -69,7 +69,8 @@ export declare class NileToast extends NileElement {
     show(): Promise<void>;
     /** Hides the alert */
     hide(): Promise<void>;
-    getIconNameByVariant(): "cancel" | "tick" | "helpsupport" | "info-icon";
+    getIconNameByVariant(): "check-circle" | "info-icon";
+    getIconColorByVariant(): "var(--nile-toast-color-icon-color-success)" | "var(--nile-toast-color-icon-color-info)" | "var(--nile-toast-color-icon-color-warning)" | "var(--nile-toast-color-icon-color-error)" | "var(--nile-toast-color-icon-color-gray)" | "var(--nile-toast-color-icon-color-black)";
     handleSlotChange(e: any): void;
     /**
      * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when

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

@@ -135,15 +135,33 @@ let NileToast = class NileToast extends NileElement {
     getIconNameByVariant() {
         switch (this.variant) {
             case 'success':
-                return 'tick';
+                return 'check-circle';
             case 'info':
-                return 'helpsupport';
+                return 'info-icon';
             case 'warning':
                 return 'info-icon';
             case 'error':
-                return 'cancel';
-            default:
-                return 'tick';
+                return 'info-icon';
+            case 'gray':
+                return 'info-icon';
+            case 'black':
+                return 'info-icon';
+        }
+    }
+    getIconColorByVariant() {
+        switch (this.variant) {
+            case 'success':
+                return 'var(--nile-toast-color-icon-color-success)';
+            case 'info':
+                return 'var(--nile-toast-color-icon-color-info)';
+            case 'warning':
+                return 'var(--nile-toast-color-icon-color-warning)';
+            case 'error':
+                return 'var(--nile-toast-color-icon-color-error)';
+            case 'gray':
+                return 'var(--nile-toast-color-icon-color-gray)';
+            case 'black':
+                return 'var(--nile-toast-color-icon-color-black)';
         }
     }
     handleSlotChange(e) {
@@ -206,6 +224,8 @@ let NileToast = class NileToast extends NileElement {
             'alert--info': this.variant === 'info',
             'alert--warning': this.variant === 'warning',
             'alert--error': this.variant === 'error',
+            'alert--gray': this.variant === 'gray',
+            'alert--black': this.variant === 'black',
         })}
         role="alert"
         aria-hidden=${this.open ? 'false' : 'true'}
@@ -222,17 +242,13 @@ let NileToast = class NileToast extends NileElement {
                   <nile-icon
                     name="${this.getIconNameByVariant()}"
                     size="15"
-                    color="white"
+                    color="${this.getIconColorByVariant()}"
                   ></nile-icon>
                 </div>
               `
-            : ``}
-
-          ${this.prefixImageUrl
-            ? html `
+            : html `
                 <img src="${this.prefixImageUrl}" class="alert__prefix-img" />
-              `
-            : ``}
+              `}
         </slot>
 
         <slot