@aquera/nile-elements 0.1.36-beta-1.2 → 0.1.36-beta-1.4

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-filter-chip/nile-filter-chip.css.js

@@ -20,30 +20,26 @@ export const styles = css `
   .chip {
     display: inline-flex;
     align-items: center;
-    height: 30px;
-    padding: 8px;
+    padding: 4px 8px;
     border: 1px solid var(--nile-filter-chip-chip-border-color-stroke);
-    border-radius: 4px;
-    font-size: 14px;
+    border-radius: var(--nile-radius-radius-xs);
+    font-size: var(--nile-type-scale-3);
     background-color: var(--nile-filter-chip-background-default);
     color: var(--nile-filter-chip-text-default);
     transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
     cursor: pointer;
-    box-sizing: border-box;
+    gap: 6px;
+    margin-right: 6px;
   }
 
   .chip:hover {
     background-color: var(--nile-filter-chip-hover-background);
   }
- .chip:active {
-  background-color: var(--nile-filter-chip-active-background);
-  border-color: var(--nile-filter-chip-active-border-color-stroke);
-}
-:host([active]) .chip {
-  background-color: var(--nile-filter-chip-active-background);
-  border-color: var(--nile-filter-chip-active-border-color-stroke);
-}
 
+  .chip:active {
+    background-color: var(--nile-filter-chip-active-background);
+    border-color: var(--nile-filter-chip-active-border-color-stroke);
+  }
 
   .icon {
     color: var(--nile-filter-chip-icon-color-default);
@@ -87,22 +83,20 @@ export const styles = css `
   }
 
 
- .value {
-  color: var(--nile-filter-chip-values-color-default);
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 140px;
-  vertical-align: bottom;
-}
-
+  .value {
+    color: var(--nile-filter-chip-values-color-default);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 140px;
+  }
 
   .close-icon {
     color: var(--nile-filter-chip-close-icon-color-default);
     cursor: pointer;
     display: flex;
     align-items: center;
+    padding: 2px;
     border-radius: 50%;
     transition: background-color 0.2s;
   }
@@ -111,23 +105,6 @@ export const styles = css `
     background-color: var(--nile-filter-chip-close-icon-hover-background);
     color: var(--nile-filter-chip-close-icon-hover-color);
   }
-
-.label-wrapper {
-  margin-right: 4px;
-}
-
-::slotted([slot="icon"]) {
-  margin-right: 6px;
-}
-
-.value-wrapper {
-  margin-right: 4px; 
-}
-
-.badge-wrapper {
-  margin-right: 12px;  
-}
-
 `;
 export default [styles];
 //# sourceMappingURL=nile-filter-chip.css.js.map

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwHxB,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    height: 30px;\n    padding: 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    box-sizing: border-box;\n  }\n\n  .chip:hover {\n    background-color: var(--nile-filter-chip-hover-background);\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:host([active]) .chip {\n  background-color: var(--nile-filter-chip-active-background);\n  border-color: var(--nile-filter-chip-active-border-color-stroke);\n}\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  display: inline-block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 140px;\n  vertical-align: bottom;\n}\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    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.label-wrapper {\n  margin-right: 4px;\n}\n\n::slotted([slot=\"icon\"]) {\n  margin-right: 6px;\n}\n\n.value-wrapper {\n  margin-right: 4px; \n}\n\n.badge-wrapper {\n  margin-right: 12px;  \n}\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: var(--nile-radius-radius-xs);\n    font-size: var(--nile-type-scale-3);\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 "]}

package/dist/src/nile-filter-chip/nile-filter-chip.d.ts

@@ -8,12 +8,11 @@ import NileElement from '../internal/nile-element';
 export declare class NileFilterChip extends NileElement {
     label: string;
     text: string;
-    viewMoreCount: number;
+    extraCount: number;
     editable: boolean;
     closable: boolean;
     icon: string;
     removeIcon: string;
-    active: boolean;
     private static activeChips;
     static get styles(): CSSResultArray;
     connectedCallback(): void;
@@ -24,7 +23,7 @@ export declare class NileFilterChip extends NileElement {
     private handleClick;
     private getLabelSlot;
     private getValueSlot;
-    private getviewMoreCountSlot;
+    private getExtraCountSlot;
     private getCloseIconSlot;
     render(): TemplateResult;
 }

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

@@ -14,12 +14,11 @@ let NileFilterChip = NileFilterChip_1 = class NileFilterChip extends NileElement
         super(...arguments);
         this.label = '';
         this.text = '';
-        this.viewMoreCount = 0;
+        this.extraCount = 0;
         this.editable = false;
         this.closable = false;
         this.icon = '';
         this.removeIcon = '';
-        this.active = false;
     }
     static get styles() {
         return [styles];
@@ -40,43 +39,34 @@ let NileFilterChip = NileFilterChip_1 = class NileFilterChip extends NileElement
     }
     handleClose(event) {
         event.stopPropagation();
-        this.dispatchEvent(new CustomEvent('nile-close', { detail: { text: this.text, viewMoreCount: this.viewMoreCount } }));
+        this.dispatchEvent(new CustomEvent('nile-close', { detail: { text: this.text, extraCount: this.extraCount } }));
         this.remove();
     }
     handleClick() {
-        this.dispatchEvent(new CustomEvent('nile-click', { detail: { text: this.text, viewMoreCount: this.viewMoreCount } }));
+        this.dispatchEvent(new CustomEvent('nile-click', { detail: { text: this.text, extraCount: this.extraCount } }));
     }
     getLabelSlot() {
         return html `
-    <span class="label-wrapper">
       <slot name="label">
-        <span class="label" part="label">${this.label}:</span>
+        <span class="label">${this.label}:</span>
       </slot>
-    </span>
-
     `;
     }
     getValueSlot() {
         return html `
-    <span class="value-wrapper">
       <slot name="value">
-        <span class="value" part="value">${this.text}</span>
+        <span class="value">${this.text}</span>
       </slot>
-    </span>
-
     `;
     }
-    getviewMoreCountSlot() {
+    getExtraCountSlot() {
         return html `
       <slot name="suffix">
-        ${this.viewMoreCount
+        ${this.extraCount
             ? html `
-          <span class="badge-wrapper">
               <nile-badge variant="primary" pilltype="pill-color">
-                +${this.viewMoreCount}
+                +${this.extraCount}
               </nile-badge>
-          </span>
-
             `
             : html ``}
       </slot>
@@ -102,7 +92,7 @@ let NileFilterChip = NileFilterChip_1 = class NileFilterChip extends NileElement
         ${this.getLabelSlot()}
         <slot name="content"></slot>
         ${this.getValueSlot()}
-        ${this.getviewMoreCountSlot()}
+        ${this.getExtraCountSlot()}
         ${this.getCloseIconSlot()}
       </div>
     `;
@@ -117,7 +107,7 @@ __decorate([
 ], NileFilterChip.prototype, "text", void 0);
 __decorate([
     property({ type: Number })
-], NileFilterChip.prototype, "viewMoreCount", void 0);
+], NileFilterChip.prototype, "extraCount", void 0);
 __decorate([
     property({ type: Boolean })
 ], NileFilterChip.prototype, "editable", void 0);
@@ -130,9 +120,6 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NileFilterChip.prototype, "removeIcon", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], NileFilterChip.prototype, "active", void 0);
 NileFilterChip = NileFilterChip_1 = __decorate([
     customElement('nile-filter-chip')
 ], NileFilterChip);

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

@@ -1 +1 @@
-{"version":3,"file":"nile-filter-chip.js","sourceRoot":"","sources":["../../../src/nile-filter-chip/nile-filter-chip.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport { styles } from './nile-filter-chip.css';\n\n/**\n * Nile filter-chip component.\n *\n * @tag nile-filter-chip\n */\n@customElement('nile-filter-chip')\nexport class NileFilterChip extends NileElement {\n  @property({ type: String }) label = '';\n  @property({ type: String }) text = '';\n  @property({ type: Number }) viewMoreCount: number = 0;\n  @property({ type: Boolean }) editable = false;\n  @property({ type: Boolean }) closable = false;\n  @property({ type: String }) icon = '';\n  @property({ type: String }) removeIcon = '';\n  @property({ type: Boolean, reflect: true }) active = false;\n\n\n  private static activeChips: NileFilterChip[] = [];\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.registerChip();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.unregisterChip();\n  }\n\n  private registerChip() {\n    NileFilterChip.activeChips.push(this);\n  }\n\n  private unregisterChip() {\n    NileFilterChip.activeChips = NileFilterChip.activeChips.filter(\n      (chip) => chip !== this\n    );\n  }\n\n  private handleClose(event: Event) {\n    event.stopPropagation();\n    this.dispatchEvent(\n      new CustomEvent('nile-close', { detail: { text: this.text, viewMoreCount: this.viewMoreCount } })\n    );\n    this.remove();\n  }\n\n  private handleClick() {\n    this.dispatchEvent(\n      new CustomEvent('nile-click', { detail: { text: this.text, viewMoreCount: this.viewMoreCount } })\n    );\n  }\n\n  private getLabelSlot(): TemplateResult {\n    return html`\n    <span class=\"label-wrapper\">\n      <slot name=\"label\">\n        <span class=\"label\" part=\"label\">${this.label}:</span>\n      </slot>\n    </span>\n\n    `;\n  }\n\n  private getValueSlot(): TemplateResult {\n    return html`\n    <span class=\"value-wrapper\">\n      <slot name=\"value\">\n        <span class=\"value\" part=\"value\">${this.text}</span>\n      </slot>\n    </span>\n\n    `;\n  }\n\n  private getviewMoreCountSlot(): TemplateResult {\n    return html`\n      <slot name=\"suffix\">\n        ${this.viewMoreCount\n          ? html`\n          <span class=\"badge-wrapper\">\n              <nile-badge variant=\"primary\" pilltype=\"pill-color\">\n                +${this.viewMoreCount}\n              </nile-badge>\n          </span>\n\n            `\n          : html``}\n      </slot>\n    `;\n  }\n\n  private getCloseIconSlot(): TemplateResult {\n    return html`\n      ${this.closable\n        ? html`\n            <span class=\"close-icon\" @click=\"${this.handleClose}\">\n              <nile-icon name=\"${this.removeIcon || 'close'}\" size=\"12\"></nile-icon>\n            </span>\n          `\n        : html``}\n    `;\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"chip\" @click=\"${this.handleClick}\">\n        <slot name=\"icon\">\n          ${this.icon ? html`<span class=\"icon\">${this.icon}</span>` : html``}\n        </slot>\n        ${this.getLabelSlot()}\n        <slot name=\"content\"></slot>\n        ${this.getValueSlot()}\n        ${this.getviewMoreCountSlot()}\n        ${this.getCloseIconSlot()}\n      </div>\n    `;\n  }\n}\n\nexport default NileFilterChip;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-filter-chip': NileFilterChip;\n  }\n}\n"]}
+{"version":3,"file":"nile-filter-chip.js","sourceRoot":"","sources":["../../../src/nile-filter-chip/nile-filter-chip.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport { styles } from './nile-filter-chip.css';\n\n/**\n * Nile filter-chip component.\n *\n * @tag nile-filter-chip\n */\n@customElement('nile-filter-chip')\nexport class NileFilterChip extends NileElement {\n  @property({ type: String }) label = '';\n  @property({ type: String }) text = '';\n  @property({ type: Number }) extraCount: number = 0;\n  @property({ type: Boolean }) editable = false;\n  @property({ type: Boolean }) closable = false;\n  @property({ type: String }) icon = '';\n  @property({ type: String }) removeIcon = '';\n\n  private static activeChips: NileFilterChip[] = [];\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.registerChip();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.unregisterChip();\n  }\n\n  private registerChip() {\n    NileFilterChip.activeChips.push(this);\n  }\n\n  private unregisterChip() {\n    NileFilterChip.activeChips = NileFilterChip.activeChips.filter(\n      (chip) => chip !== this\n    );\n  }\n\n  private handleClose(event: Event) {\n    event.stopPropagation();\n    this.dispatchEvent(\n      new CustomEvent('nile-close', { detail: { text: this.text, extraCount: this.extraCount } })\n    );\n    this.remove();\n  }\n\n  private handleClick() {\n    this.dispatchEvent(\n      new CustomEvent('nile-click', { detail: { text: this.text, extraCount: this.extraCount } })\n    );\n  }\n\n  private getLabelSlot(): TemplateResult {\n    return html`\n      <slot name=\"label\">\n        <span class=\"label\">${this.label}:</span>\n      </slot>\n    `;\n  }\n\n  private getValueSlot(): TemplateResult {\n    return html`\n      <slot name=\"value\">\n        <span class=\"value\">${this.text}</span>\n      </slot>\n    `;\n  }\n\n  private getExtraCountSlot(): TemplateResult {\n    return html`\n      <slot name=\"suffix\">\n        ${this.extraCount\n          ? html`\n              <nile-badge variant=\"primary\" pilltype=\"pill-color\">\n                +${this.extraCount}\n              </nile-badge>\n            `\n          : html``}\n      </slot>\n    `;\n  }\n\n  private getCloseIconSlot(): TemplateResult {\n    return html`\n      ${this.closable\n        ? html`\n            <span class=\"close-icon\" @click=\"${this.handleClose}\">\n              <nile-icon name=\"${this.removeIcon || 'close'}\" size=\"12\"></nile-icon>\n            </span>\n          `\n        : html``}\n    `;\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"chip\" @click=\"${this.handleClick}\">\n        <slot name=\"icon\">\n          ${this.icon ? html`<span class=\"icon\">${this.icon}</span>` : html``}\n        </slot>\n        ${this.getLabelSlot()}\n        <slot name=\"content\"></slot>\n        ${this.getValueSlot()}\n        ${this.getExtraCountSlot()}\n        ${this.getCloseIconSlot()}\n      </div>\n    `;\n  }\n}\n\nexport default NileFilterChip;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-filter-chip': NileFilterChip;\n  }\n}\n"]}

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

@@ -43,15 +43,15 @@ describe('<nile-filter-chip>', () => {
         expect(iconSpan).to.exist;
         expect(iconSpan.textContent).to.equal('★');
     });
-    it('does not render a badge when viewMoreCount is zero', async () => {
+    it('does not render a badge when extraCount is zero', async () => {
         const el = await fixture(html `
-      <nile-filter-chip viewMoreCount="0" label="L" text="T"></nile-filter-chip>
+      <nile-filter-chip extraCount="0" label="L" text="T"></nile-filter-chip>
     `);
         expect(el.shadowRoot.querySelector('nile-badge')).to.be.null;
     });
-    it('renders a +badge when viewMoreCount > 0', async () => {
+    it('renders a +badge when extraCount > 0', async () => {
         const el = await fixture(html `
-      <nile-filter-chip viewMoreCount="5" label="L" text="T"></nile-filter-chip>
+      <nile-filter-chip extraCount="5" label="L" text="T"></nile-filter-chip>
     `);
         const badge = el.shadowRoot.querySelector('nile-badge');
         expect(badge).to.exist;
@@ -64,16 +64,16 @@ describe('<nile-filter-chip>', () => {
         const chip = el.shadowRoot.querySelector('.chip');
         setTimeout(() => chip.click());
         const ev = await oneEvent(el, 'nile-click');
-        expect(ev.detail).to.deep.equal({ text: 'T', viewMoreCount: 0 });
+        expect(ev.detail).to.deep.equal({ text: 'T', extraCount: 0 });
     });
     it('dispatches `nile-close` on close icon click and removes itself', async () => {
         const el = await fixture(html `
-      <nile-filter-chip closable viewMoreCount="2" text="TT"></nile-filter-chip>
+      <nile-filter-chip closable extraCount="2" text="TT"></nile-filter-chip>
     `);
         const closeIcon = el.shadowRoot.querySelector('.close-icon');
         setTimeout(() => closeIcon.click());
         const ev = await oneEvent(el, 'nile-close');
-        expect(ev.detail).to.deep.equal({ text: 'TT', viewMoreCount: 2 });
+        expect(ev.detail).to.deep.equal({ text: 'TT', extraCount: 2 });
         expect(document.body.contains(el)).to.be.false;
     });
 });

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

@@ -1 +1 @@
-{"version":3,"file":"nile-filter-chip.test.js","sourceRoot":"","sources":["../../../src/nile-filter-chip/nile-filter-chip.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, expect, html, oneEvent } from '@open-wc/testing';\nimport './nile-filter-chip';\nimport { NileFilterChip } from './nile-filter-chip';\n\ndescribe('<nile-filter-chip>', () => {\n  afterEach(() => {\n    (NileFilterChip as any).activeChips = [];\n  });\n\n  it('registers and unregisters itself in activeChips', async () => {\n    const el = await fixture<NileFilterChip>(html`\n      <nile-filter-chip label=\"L\" text=\"T\"></nile-filter-chip>\n    `);\n    expect((NileFilterChip as any).activeChips).to.include(el);\n    el.remove();\n    await el.updateComplete;\n    expect((NileFilterChip as any).activeChips).to.not.include(el);\n  });\n\n  it('renders fallback label and text', async () => {\n    const el = await fixture<NileFilterChip>(html`\n      <nile-filter-chip label=\"MyLabel\" text=\"MyText\"></nile-filter-chip>\n    `);\n    const label = el.shadowRoot!.querySelector('.label')! as HTMLElement;\n    const value = el.shadowRoot!.querySelector('.value')! as HTMLElement;\n    expect(label.textContent).to.equal('MyLabel:');\n    expect(value.textContent!.trim()).to.equal('MyText');\n  });\n\n  it('renders slotted label and value over fallback', async () => {\n    const el = await fixture<NileFilterChip>(html`\n      <nile-filter-chip>\n        <span slot=\"label\">SLOT-LBL</span>\n        <span slot=\"value\">SLOT-VAL</span>\n      </nile-filter-chip>\n    `);\n    const slottedLabel = el.querySelector('[slot=\"label\"]')! as HTMLElement;\n    const slottedValue = el.querySelector('[slot=\"value\"]')! as HTMLElement;\n    expect(slottedLabel.textContent).to.equal('SLOT-LBL');\n    expect(slottedValue.textContent).to.equal('SLOT-VAL');\n  });\n\n  it('renders an icon when the `icon` property is set', async () => {\n    const el = await fixture<NileFilterChip>(html`\n      <nile-filter-chip icon=\"★\" label=\"L\" text=\"T\"></nile-filter-chip>\n    `);\n    const iconSpan = el.shadowRoot!.querySelector('.icon')! as HTMLElement;\n    expect(iconSpan).to.exist;\n    expect(iconSpan.textContent).to.equal('★');\n  });\n\n  it('does not render a badge when viewMoreCount is zero', async () => {\n    const el = await fixture<NileFilterChip>(html`\n      <nile-filter-chip viewMoreCount=\"0\" label=\"L\" text=\"T\"></nile-filter-chip>\n    `);\n    expect(el.shadowRoot!.querySelector('nile-badge')).to.be.null;\n  });\n\n  it('renders a +badge when viewMoreCount > 0', async () => {\n    const el = await fixture<NileFilterChip>(html`\n      <nile-filter-chip viewMoreCount=\"5\" label=\"L\" text=\"T\"></nile-filter-chip>\n    `);\n    const badge = el.shadowRoot!.querySelector('nile-badge')! as HTMLElement;\n    expect(badge).to.exist;\n    expect(badge.textContent).to.contain('+5');\n  });\n\n\n\n  it('dispatches `nile-click` on chip click', async () => {\n    const el = await fixture<NileFilterChip>(html`\n      <nile-filter-chip label=\"L\" text=\"T\"></nile-filter-chip>\n    `);\n    const chip = el.shadowRoot!.querySelector('.chip')! as HTMLElement;\n    setTimeout(() => chip.click());\n    const ev = await oneEvent(el, 'nile-click');\n    expect(ev.detail).to.deep.equal({ text: 'T', viewMoreCount: 0 });\n  });\n\n  it('dispatches `nile-close` on close icon click and removes itself', async () => {\n    const el = await fixture<NileFilterChip>(html`\n      <nile-filter-chip closable viewMoreCount=\"2\" text=\"TT\"></nile-filter-chip>\n    `);\n    const closeIcon = el.shadowRoot!.querySelector('.close-icon')! as HTMLElement;\n    setTimeout(() => closeIcon.click());\n    const ev = await oneEvent(el, 'nile-close');\n    expect(ev.detail).to.deep.equal({ text: 'TT', viewMoreCount: 2 });\n    expect(document.body.contains(el)).to.be.false;\n  });\n\n \n});\n"]}
+{"version":3,"file":"nile-filter-chip.test.js","sourceRoot":"","sources":["../../../src/nile-filter-chip/nile-filter-chip.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, expect, html, oneEvent } from '@open-wc/testing';\nimport './nile-filter-chip';\nimport { NileFilterChip } from './nile-filter-chip';\n\ndescribe('<nile-filter-chip>', () => {\n  afterEach(() => {\n    (NileFilterChip as any).activeChips = [];\n  });\n\n  it('registers and unregisters itself in activeChips', async () => {\n    const el = await fixture<NileFilterChip>(html`\n      <nile-filter-chip label=\"L\" text=\"T\"></nile-filter-chip>\n    `);\n    expect((NileFilterChip as any).activeChips).to.include(el);\n    el.remove();\n    await el.updateComplete;\n    expect((NileFilterChip as any).activeChips).to.not.include(el);\n  });\n\n  it('renders fallback label and text', async () => {\n    const el = await fixture<NileFilterChip>(html`\n      <nile-filter-chip label=\"MyLabel\" text=\"MyText\"></nile-filter-chip>\n    `);\n    const label = el.shadowRoot!.querySelector('.label')! as HTMLElement;\n    const value = el.shadowRoot!.querySelector('.value')! as HTMLElement;\n    expect(label.textContent).to.equal('MyLabel:');\n    expect(value.textContent!.trim()).to.equal('MyText');\n  });\n\n  it('renders slotted label and value over fallback', async () => {\n    const el = await fixture<NileFilterChip>(html`\n      <nile-filter-chip>\n        <span slot=\"label\">SLOT-LBL</span>\n        <span slot=\"value\">SLOT-VAL</span>\n      </nile-filter-chip>\n    `);\n    const slottedLabel = el.querySelector('[slot=\"label\"]')! as HTMLElement;\n    const slottedValue = el.querySelector('[slot=\"value\"]')! as HTMLElement;\n    expect(slottedLabel.textContent).to.equal('SLOT-LBL');\n    expect(slottedValue.textContent).to.equal('SLOT-VAL');\n  });\n\n  it('renders an icon when the `icon` property is set', async () => {\n    const el = await fixture<NileFilterChip>(html`\n      <nile-filter-chip icon=\"★\" label=\"L\" text=\"T\"></nile-filter-chip>\n    `);\n    const iconSpan = el.shadowRoot!.querySelector('.icon')! as HTMLElement;\n    expect(iconSpan).to.exist;\n    expect(iconSpan.textContent).to.equal('★');\n  });\n\n  it('does not render a badge when extraCount is zero', async () => {\n    const el = await fixture<NileFilterChip>(html`\n      <nile-filter-chip extraCount=\"0\" label=\"L\" text=\"T\"></nile-filter-chip>\n    `);\n    expect(el.shadowRoot!.querySelector('nile-badge')).to.be.null;\n  });\n\n  it('renders a +badge when extraCount > 0', async () => {\n    const el = await fixture<NileFilterChip>(html`\n      <nile-filter-chip extraCount=\"5\" label=\"L\" text=\"T\"></nile-filter-chip>\n    `);\n    const badge = el.shadowRoot!.querySelector('nile-badge')! as HTMLElement;\n    expect(badge).to.exist;\n    expect(badge.textContent).to.contain('+5');\n  });\n\n\n\n  it('dispatches `nile-click` on chip click', async () => {\n    const el = await fixture<NileFilterChip>(html`\n      <nile-filter-chip label=\"L\" text=\"T\"></nile-filter-chip>\n    `);\n    const chip = el.shadowRoot!.querySelector('.chip')! as HTMLElement;\n    setTimeout(() => chip.click());\n    const ev = await oneEvent(el, 'nile-click');\n    expect(ev.detail).to.deep.equal({ text: 'T', extraCount: 0 });\n  });\n\n  it('dispatches `nile-close` on close icon click and removes itself', async () => {\n    const el = await fixture<NileFilterChip>(html`\n      <nile-filter-chip closable extraCount=\"2\" text=\"TT\"></nile-filter-chip>\n    `);\n    const closeIcon = el.shadowRoot!.querySelector('.close-icon')! as HTMLElement;\n    setTimeout(() => closeIcon.click());\n    const ev = await oneEvent(el, 'nile-close');\n    expect(ev.detail).to.deep.equal({ text: 'TT', extraCount: 2 });\n    expect(document.body.contains(el)).to.be.false;\n  });\n\n \n});\n"]}

package/dist/src/nile-icon/icons/svg/accessreview.d.ts

@@ -1,5 +1,5 @@
 /**
  * Do not edit directly
  */
-declare const _default: "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGNpcmNsZSBjeD0iNSIgY3k9IjgiIHI9IjEiLz48cGF0aCBkPSJNNSwxMGEyLDIsMCwwLDEsMiwySDNBMiwyLDAsMCwxLDUsMTBaIi8+PHJlY3QgeD0iOCIgeT0iOCIgd2lkdGg9IjMuNSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iOC42IiB5PSIxMSIgd2lkdGg9IjIuOSIgaGVpZ2h0PSIxIi8+PHBhdGggZD0iTTEzLjUsMTQuNUguNVYzLjVoMTNabS0xMi0xaDExdi05SDEuNVoiLz48cG9seWdvbiBwb2ludHM9IjE1LjUgMTIgMTQuNSAxMiAxNC41IDIuNSAzIDIuNSAzIDEuNSAxNS41IDEuNSAxNS41IDEyIi8+PC9zdmc+";
+declare const _default: "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIuMiAxMC4ySDEzVjEuNzk5OTlIM1YyLjU5OTk5SDEyLjJWMTAuMloiIGZpbGw9ImJsYWNrIi8+PHBhdGggZD0iTTUuNCA2Ljk5OTk5QzUuNCA3LjQ0MTgyIDUuMDQxODMgNy43OTk5OSA0LjYgNy43OTk5OUM0LjE1ODE3IDcuNzk5OTkgMy44IDcuNDQxODIgMy44IDYuOTk5OTlDMy44IDYuNTU4MTYgNC4xNTgxNyA2LjE5OTk5IDQuNiA2LjE5OTk5QzUuMDQxODMgNi4xOTk5OSA1LjQgNi41NTgxNiA1LjQgNi45OTk5OVoiIGZpbGw9ImJsYWNrIi8+PHBhdGggZD0iTTUuNzMxMzcgOS4wNjg2MkM1LjQzMTMxIDguNzY4NTYgNS4wMjQzNSA4LjU5OTk5IDQuNiA4LjU5OTk5QzQuMTc1NjUgOC41OTk5OSAzLjc2ODY5IDguNzY4NTYgMy40Njg2MyA5LjA2ODYyQzMuMTY4NTcgOS4zNjg2NyAzIDkuNzc1NjQgMyAxMC4ySDYuMkM2LjIgOS43NzU2NCA2LjAzMTQzIDkuMzY4NjcgNS43MzEzNyA5LjA2ODYyWiIgZmlsbD0iYmxhY2siLz48cGF0aCBkPSJNOS44IDYuOTk5OTlIN1Y3Ljc5OTk5SDkuOFY2Ljk5OTk5WiIgZmlsbD0iYmxhY2siLz48cGF0aCBkPSJNNy41MDQwMiA5LjM5OTk5SDkuODA4MDJWMTAuMkg3LjUwNDAyVjkuMzk5OTlaIiBmaWxsPSJibGFjayIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNCAxMi4ySDFWMy4zOTk5OUgxMS40VjEyLjJaTTEuOCAxMS40SDEwLjZWNC4xOTk5OUgxLjhWMTEuNFoiIGZpbGw9ImJsYWNrIi8+PC9zdmc+";
 export default _default;

package/dist/src/nile-icon/icons/svg/accessreview.js

@@ -1,5 +1,5 @@
 /**
  * Do not edit directly
  */
-export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGNpcmNsZSBjeD0iNSIgY3k9IjgiIHI9IjEiLz48cGF0aCBkPSJNNSwxMGEyLDIsMCwwLDEsMiwySDNBMiwyLDAsMCwxLDUsMTBaIi8+PHJlY3QgeD0iOCIgeT0iOCIgd2lkdGg9IjMuNSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iOC42IiB5PSIxMSIgd2lkdGg9IjIuOSIgaGVpZ2h0PSIxIi8+PHBhdGggZD0iTTEzLjUsMTQuNUguNVYzLjVoMTNabS0xMi0xaDExdi05SDEuNVoiLz48cG9seWdvbiBwb2ludHM9IjE1LjUgMTIgMTQuNSAxMiAxNC41IDIuNSAzIDIuNSAzIDEuNSAxNS41IDEuNSAxNS41IDEyIi8+PC9zdmc+";
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIuMiAxMC4ySDEzVjEuNzk5OTlIM1YyLjU5OTk5SDEyLjJWMTAuMloiIGZpbGw9ImJsYWNrIi8+PHBhdGggZD0iTTUuNCA2Ljk5OTk5QzUuNCA3LjQ0MTgyIDUuMDQxODMgNy43OTk5OSA0LjYgNy43OTk5OUM0LjE1ODE3IDcuNzk5OTkgMy44IDcuNDQxODIgMy44IDYuOTk5OTlDMy44IDYuNTU4MTYgNC4xNTgxNyA2LjE5OTk5IDQuNiA2LjE5OTk5QzUuMDQxODMgNi4xOTk5OSA1LjQgNi41NTgxNiA1LjQgNi45OTk5OVoiIGZpbGw9ImJsYWNrIi8+PHBhdGggZD0iTTUuNzMxMzcgOS4wNjg2MkM1LjQzMTMxIDguNzY4NTYgNS4wMjQzNSA4LjU5OTk5IDQuNiA4LjU5OTk5QzQuMTc1NjUgOC41OTk5OSAzLjc2ODY5IDguNzY4NTYgMy40Njg2MyA5LjA2ODYyQzMuMTY4NTcgOS4zNjg2NyAzIDkuNzc1NjQgMyAxMC4ySDYuMkM2LjIgOS43NzU2NCA2LjAzMTQzIDkuMzY4NjcgNS43MzEzNyA5LjA2ODYyWiIgZmlsbD0iYmxhY2siLz48cGF0aCBkPSJNOS44IDYuOTk5OTlIN1Y3Ljc5OTk5SDkuOFY2Ljk5OTk5WiIgZmlsbD0iYmxhY2siLz48cGF0aCBkPSJNNy41MDQwMiA5LjM5OTk5SDkuODA4MDJWMTAuMkg3LjUwNDAyVjkuMzk5OTlaIiBmaWxsPSJibGFjayIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNCAxMi4ySDFWMy4zOTk5OUgxMS40VjEyLjJaTTEuOCAxMS40SDEwLjZWNC4xOTk5OUgxLjhWMTEuNFoiIGZpbGw9ImJsYWNrIi8+PC9zdmc+";
 //# sourceMappingURL=accessreview.js.map

package/dist/src/nile-icon/icons/svg/accessreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"accessreview.js","sourceRoot":"","sources":["../../../../../src/nile-icon/icons/svg/accessreview.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAe,0dAA0d,CAAC","sourcesContent":["/**\n * Do not edit directly\n */\n\nexport default \"PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGNpcmNsZSBjeD0iNSIgY3k9IjgiIHI9IjEiLz48cGF0aCBkPSJNNSwxMGEyLDIsMCwwLDEsMiwySDNBMiwyLDAsMCwxLDUsMTBaIi8+PHJlY3QgeD0iOCIgeT0iOCIgd2lkdGg9IjMuNSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iOC42IiB5PSIxMSIgd2lkdGg9IjIuOSIgaGVpZ2h0PSIxIi8+PHBhdGggZD0iTTEzLjUsMTQuNUguNVYzLjVoMTNabS0xMi0xaDExdi05SDEuNVoiLz48cG9seWdvbiBwb2ludHM9IjE1LjUgMTIgMTQuNSAxMiAxNC41IDIuNSAzIDIuNSAzIDEuNSAxNS41IDEuNSAxNS41IDEyIi8+PC9zdmc+\";"]}
+{"version":3,"file":"accessreview.js","sourceRoot":"","sources":["../../../../../src/nile-icon/icons/svg/accessreview.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAe,kmCAAkmC,CAAC","sourcesContent":["/**\n * Do not edit directly\n */\n\nexport default \"PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIuMiAxMC4ySDEzVjEuNzk5OTlIM1YyLjU5OTk5SDEyLjJWMTAuMloiIGZpbGw9ImJsYWNrIi8+PHBhdGggZD0iTTUuNCA2Ljk5OTk5QzUuNCA3LjQ0MTgyIDUuMDQxODMgNy43OTk5OSA0LjYgNy43OTk5OUM0LjE1ODE3IDcuNzk5OTkgMy44IDcuNDQxODIgMy44IDYuOTk5OTlDMy44IDYuNTU4MTYgNC4xNTgxNyA2LjE5OTk5IDQuNiA2LjE5OTk5QzUuMDQxODMgNi4xOTk5OSA1LjQgNi41NTgxNiA1LjQgNi45OTk5OVoiIGZpbGw9ImJsYWNrIi8+PHBhdGggZD0iTTUuNzMxMzcgOS4wNjg2MkM1LjQzMTMxIDguNzY4NTYgNS4wMjQzNSA4LjU5OTk5IDQuNiA4LjU5OTk5QzQuMTc1NjUgOC41OTk5OSAzLjc2ODY5IDguNzY4NTYgMy40Njg2MyA5LjA2ODYyQzMuMTY4NTcgOS4zNjg2NyAzIDkuNzc1NjQgMyAxMC4ySDYuMkM2LjIgOS43NzU2NCA2LjAzMTQzIDkuMzY4NjcgNS43MzEzNyA5LjA2ODYyWiIgZmlsbD0iYmxhY2siLz48cGF0aCBkPSJNOS44IDYuOTk5OTlIN1Y3Ljc5OTk5SDkuOFY2Ljk5OTk5WiIgZmlsbD0iYmxhY2siLz48cGF0aCBkPSJNNy41MDQwMiA5LjM5OTk5SDkuODA4MDJWMTAuMkg3LjUwNDAyVjkuMzk5OTlaIiBmaWxsPSJibGFjayIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNCAxMi4ySDFWMy4zOTk5OUgxMS40VjEyLjJaTTEuOCAxMS40SDEwLjZWNC4xOTk5OUgxLjhWMTEuNFoiIGZpbGw9ImJsYWNrIi8+PC9zdmc+\";"]}

package/dist/src/nile-new-error/index.d.ts

@@ -0,0 +1 @@
+export { NileNewError } from './nile-new-error';

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

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

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

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

package/dist/src/nile-new-error/nile-new-error.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.
+*/
+/**
+ * NewError CSS
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

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

@@ -0,0 +1,38 @@
+/**
+* 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';
+/**
+ * NewError CSS
+ */
+export const styles = css `
+	  :host {
+    --indication-color: var(--nile-colors-red-500);
+  }
+
+  .nile-error-notification {
+    font-family: var(--nile-font-family-serif);
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 12px;
+    letter-spacing: 0.2px;
+    border: 1px solid var(--indication-color);
+    border-left: 6px solid var(--indication-color);
+    border-radius: 4px;
+    padding: 8px;
+    background: var(--nile-colors-neutral-100);
+    color: var(--indication-color);
+    box-sizing: border-box;
+  }
+
+  .nile-error-notification__icon {
+    vertical-align: middle;
+    margin-right: 4px;
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-new-error.css.js.map

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

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

@@ -0,0 +1,36 @@
+/**
+ * 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, PropertyValues } from 'lit';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile new-error component.
+ *
+ * @tag nile-new-error
+ *
+ */
+export declare class NileNewError extends NileElement {
+    errorMessage: string;
+    newProp: string;
+    color: string;
+    protected updated(_changedProperties: PropertyValues): void;
+    /**
+     * The styles for nile-new-error
+     * @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 NileNewError;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-new-error': NileNewError;
+    }
+}

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

@@ -0,0 +1,74 @@
+/**
+ * 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, property } from 'lit/decorators.js';
+import { styles } from './nile-new-error.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile new-error component.
+ *
+ * @tag nile-new-error
+ *
+ */
+let NileNewError = class NileNewError extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.errorMessage = '';
+        this.newProp = '';
+        this.color = '';
+        /* #endregion */
+    }
+    updated(_changedProperties) {
+        if (_changedProperties.has('color')) {
+            this.style.setProperty('--indication-color', this.color);
+        }
+    }
+    /**
+     * The styles for nile-new-error
+     * @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 `
+			${this.newProp}
+			     <div class="nile-error-notification">
+        <nile-icon
+          name="info2"
+          size="24"
+          class="nile-error-notification__icon"
+          part="icon"
+          color="var(--indication-color)"
+        ></nile-icon>
+        ${this.errorMessage}
+      </div>
+			`;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], NileNewError.prototype, "errorMessage", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileNewError.prototype, "newProp", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileNewError.prototype, "color", void 0);
+NileNewError = __decorate([
+    customElement('nile-new-error')
+], NileNewError);
+export { NileNewError };
+export default NileNewError;
+//# sourceMappingURL=nile-new-error.js.map