npm - @aquera/nile-elements - Versions diffs - 0.1.62 → 0.1.63-beta-1.1 - Mend

@aquera/nile-elements 0.1.62 → 0.1.63-beta-1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1638) hide show

package/dist/src/nile-empty-state/nile-empty-state.css.js CHANGED Viewed

@@ -11,57 +11,58 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     display:inline-flex;
-    min-width:var(--nile-empty-state-max-width);
-    max-width:var(--nile-empty-state-min-width);
     width:100%;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
   .empty-state--sm {
-    --nile-es-text-size:16px;
-    --nile-es-text-line-height:24px;
-    --nile-es-subtext-size:14px;
+    --nile-es-text-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+    --nile-es-text-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));
+    --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     --nile-es-subtext-line-height:20px;
-    --nile-es-icon-size:48px;
-    --nile-es-flat-option-border-radius:5px;
+    --nile-es-icon-size:var(--nile-height-48px, var(--ng-height-48px));
+    --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));
     --nile-es-img-height:118px;
     --nile-es-img-width:152px;
-    --nile-es-gap:var(--nile-spacing-spacing-3xl);
-    --nile-es-body-gap:var(--nile-spacing-spacing-xl);
-    --nile-es-text-gap:0px;
+    --nile-es-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));
+    --nile-es-body-gap:var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));
+    --nile-es-text-gap:var(--nile-spacing-none, var(--ng-spacing-xs));
   }
   .empty-state--md {
-    --nile-es-text-size:18px;
-    --nile-es-text-line-height:28px;
-    --nile-es-subtext-size:14px;
-    --nile-es-subtext-line-height:20px;
+    --nile-es-text-size: var(--nile-type-scale-5, var(--ng-font-size-text-lg));
+    --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-lg));
+    --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    --nile-es-subtext-line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
-    --nile-es-icon-size:48px;
-    --nile-es-flat-option-border-radius:5px;
+    --nile-es-icon-size: var(--nile-spacing-5-x, var(--ng-height-48px));
+    --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));
     --nile-es-img-height:128px;
     --nile-es-img-width:172px;
-    --nile-es-gap:var(--nile-spacing-spacing-4xl);
-    --nile-es-body-gap:var(--nile-spacing-spacing-2xl);
-    --nile-es-text-gap:var(--nile-spacing-spacing-md);
+    --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));
+    --nile-es-body-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-2xl));
+    --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));
   }
   .empty-state--lg {
-    --nile-es-text-size:20px;
-    --nile-es-text-line-height:30px;
-    --nile-es-subtext-size:16px;
-    --nile-es-subtext-line-height:24px;
+    --nile-es-text-size: var(--nile-spacing-2xl, var(--ng-font-size-text-xl));
+    --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-xl));
+    --nile-es-subtext-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+    --nile-es-subtext-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));
-    --nile-es-icon-size:56px;
-    --nile-es-flat-option-border-radius:10px;
+    --nile-es-icon-size:var(--nile-height-60px, var(--ng-height-60px));
+    --nile-es-flat-option-border-radius: var(--nile-border-size-10, var(--ng-radius-lg));
     --nile-es-img-height:160px;
     --nile-es-img-width:220px;
-    --nile-es-gap:var(--nile-spacing-spacing-4xl);
-    --nile-es-body-gap:var(--nile-spacing-spacing-3xl);
-    --nile-es-text-gap:var(--nile-spacing-spacing-md)
+    --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));
+    --nile-es-body-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-2xl));
+    --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));
   }
   .empty-state {
@@ -85,47 +86,23 @@ export const styles = css `
   .empty-state__body--content {
     position:relative;
   }
-  .empty-state__image {
-    background:var(--nile-empty-state-image);
-    background-size: var(--nile-es-img-width) var(--nile-es-img-height);
-    height: var(--nile-es-img-height);
-    width: var(--nile-es-img-width);
-    max-width: 100%;
-  }
-  .empty-state__image--grayscale {
-    -webkit-filter: grayscale(100%);
-    -moz-filter: grayscale(100%);
-    -o-filter: grayscale(100%);
-    -ms-filter: grayscale(100%);
-    filter: grayscale(100%);
-  }
   .empty-state__img__icon {
-    height: var(--nile-es-icon-size);
-    aspect-ratio:1 / 1;
-    border-radius: 50%;
-    display: grid;
-    place-items: center;
-    background: var(--nile-colors-neutral-500);
-    position:absolute;
-    left: calc(50% - calc(var(--nile-es-icon-size) / 2));
-    top:calc(62.5% - calc(var(--nile-es-icon-size) / 2));
+    display: var(--ng-display-flex);
+    justify-content: center;
+    align-items: center;
   }
   .empty-state__body--tonal {
-    background: linear-gradient(180deg, var(--nile-colors-neutral-100) 0%, var(--nile-colors-neutral-400) 100%);
+    background:  var(--nile-gradient-1, var(--ng-white-gradient-6));
     width: 104px;
     height: 104px;
-    border-radius: 50%;
+    border-radius: var(--nile-radius-full, var(--ng-radius-full));
     display:flex;
     justify-content:center;
     align-items:center;
   }
-  .empty-state__body--flat {
-  }
   .nile-flat-type-icon {
     height:var(--nile-es-icon-size);
     aspect-ratio:1 / 1;
@@ -134,7 +111,7 @@ export const styles = css `
     background-color: white;
     display: grid;
     place-items: center;
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
   .empty__state__text-section {
@@ -146,7 +123,8 @@ export const styles = css `
   .empty-state__text {
     font-size: var(--nile-es-text-size);
-    font-weight: 600;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));
     line-height: var(--nile-es-text-line-height);
     text-align: center;
     font-style: normal;
@@ -154,10 +132,11 @@ export const styles = css `
   .empty-state__subtext {
     font-size: var(--nile-es-subtext-size);
-    font-weight: 400;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     line-height: var(--nile-es-subtext-line-height);
     text-align: center;
-    color:var(--nile-colors-dark-500);
+    color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
     font-style: normal;
   }

package/dist/src/nile-empty-state/nile-empty-state.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-empty-state.css.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6JxB~~,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 EmptyState CSS\n */\nexport const styles = css`\n :host {\n display:inline-flex;\n ~~min-~~width:var(--nile-~~empty~~-~~state~~-~~max~~-~~width~~);\n ~~max~~-~~width~~:var(--nile-~~empty~~-~~state~~-~~min~~-~~width~~);\n ~~width~~:~~100%;\~~n }\n\n .empty-state--sm {\n --nile-es-text-size:~~16px~~;\n --nile-es-text-line-height:~~24px~~;\n --nile-es-subtext-size:~~14px~~;\n --nile-es-subtext-line-height:20px;\n \n --nile-es-icon-size:48px;\n --nile-es-flat-option-border-radius:~~5px~~;\n --nile-es-img-height:118px;\n --nile-es-img-width:152px;\n\n --nile-es-gap:var(--nile-spacing-spacing-3xl);\n --nile-es-body-gap:var(--nile-spacing-spacing-xl);\n --nile-es-text-gap:~~0px~~;\n }\n\n .empty-state--md {\n --nile-es-text-size:~~18px~~;\n --nile-es-text-line-height:~~28px~~;\n --nile-es-subtext-size:~~14px~~;\n --nile-es-subtext-line-height:~~20px~~;\n\n --nile-es-icon-size:48px;\n --nile-es-flat-option-border-radius:~~5px~~;\n --nile-es-img-height:128px;\n --nile-es-img-width:172px;\n\n --nile-es-gap:var(--nile-spacing-spacing-4xl);\n --nile-es-body-gap:var(--nile-spacing-spacing-2xl);\n --nile-es-text-gap:var(--nile-spacing-spacing-md);\n }\n\n .empty-state--lg {\n --nile-es-text-size:~~20px~~;\n --nile-es-text-line-height:~~30px~~;\n --nile-es-subtext-size:~~16px~~;\n --nile-es-subtext-line-height:~~24px~~;\n\n --nile-es-icon-size:~~56px~~;\n --nile-es-flat-option-border-radius:~~10px~~;\n --nile-es-img-height:160px;\n --nile-es-img-width:220px;\n\n --nile-es-gap:var(--nile-spacing-spacing-4xl);\n --nile-es-body-gap:var(--nile-spacing-spacing-3xl);\n --nile-es-text-gap:var(--nile-spacing-spacing-md)\n }\n\n .empty-state {\n min-width:300px;\n max-width:512px;\n width:100%;\n height:max-content;\n display:flex;\n flex-direction:column;\n row-gap:var(--nile-es-gap);\n }\n\n .empty-state__body {\n display:flex;\n flex-direction:column;\n justify-content:space-between;\n align-items:center;\n row-gap:var(--nile-es-body-gap)\n }\n\n .empty-state__body--content {\n position:relative;\n }\n .empty-~~state__image~~ { \n ~~background~~:var(--~~nile~~-~~empty~~-~~state-image~~);\n ~~background~~-~~size~~: ~~var(--nile-es-img-width) var(--nile-es-img-height)~~;\n ~~height: var(--nile~~-~~es-img-height);\n width~~: ~~var(--nile-es-img-width)~~;\n ~~max-width: 100%;\n~~ }\n\n .empty-~~state__image~~--~~grayscale~~ {\n ~~-webkit-filter~~: ~~grayscale(100%);\n -moz-filter: grayscale(100%);\n -o-filter: grayscale(100%);\n -ms-filter: grayscale(100%);\n filter: grayscale(100%);\n~~ ~~}\n\n .empty-state__img__icon {\n height:~~ var(--nile-es-~~icon-size);\n aspect-ratio:~~1 ~~/ 1;\n border-radius: 50%;\n display: grid;\n place-items: center;\n background:~~ var(--~~nile~~-~~colors~~-~~neutral~~-~~500~~);\n ~~position~~:~~absolute~~;\n ~~left~~: ~~calc(50% - calc(var(--nile-es-icon-size) / 2))~~;\n ~~top~~:~~calc(62.5%~~ ~~- calc(~~var(--nile-es-~~icon-size) / 2));\n }\n\n .empty-state__body--tonal {\n background: linear-gradient(180deg~~, var(--~~nile~~-~~colors~~-~~neutral-100~~) ~~0%, var(--nile-colors-neutral-400~~) ~~100%)~~;\n ~~width: 104px;\n height: 104px;\n border-radius: 50%;\n~~ display:flex;\n justify-content:center;\n align-items:center;\n }\n\n .~~empty-state__body--flat {\n }\n\n .~~nile-flat-type-icon {\n height:var(--nile-es-icon-size);\n aspect-ratio:1 / 1;\n border-radius: var(--nile-es-flat-option-border-radius);\n\n background-color: white;\n display: grid;\n place-items: center;\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .empty__state__text-section {\n display:flex;\n flex-direction:column;\n gap:var(--nile-es-text-gap);\n max-width:80%;\n }\n\n .empty-state__text {\n font-size: var(--nile-es-text-size);\n font-weight: ~~600~~;\n line-height: var(--nile-es-text-line-height);\n text-align: center;\n font-style: normal;\n }\n\n .empty-state__subtext {\n font-size: var(--nile-es-subtext-size);\n font-weight: ~~400~~;\n line-height: var(--nile-es-subtext-line-height);\n text-align: center;\n color:var(--nile-colors-dark-500);\n font-style: normal;\n }\n\n .empty-state-actions {\n display:flex;\n justify-content:center;\n }\n`;\n\nexport default [styles];"]}
1	+ {"version":3,"file":"nile-empty-state.css.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIxB,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 EmptyState CSS\n */\nexport const styles = css`\n :host {\n display:inline-flex;\n width:100%;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .empty-state--sm {\n --nile-es-text-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n --nile-es-text-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n --nile-es-subtext-line-height:20px;\n \n --nile-es-icon-size:var(--nile-height-48px, var(--ng-height-48px));\n --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));\n --nile-es-img-height:118px;\n --nile-es-img-width:152px;\n\n --nile-es-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));\n --nile-es-body-gap:var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));\n --nile-es-text-gap:var(--nile-spacing-none, var(--ng-spacing-xs));\n }\n\n .empty-state--md {\n --nile-es-text-size: var(--nile-type-scale-5, var(--ng-font-size-text-lg));\n --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-lg));\n --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n --nile-es-subtext-line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n\n --nile-es-icon-size: var(--nile-spacing-5-x, var(--ng-height-48px));\n --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));\n --nile-es-img-height:128px;\n --nile-es-img-width:172px;\n\n --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));\n --nile-es-body-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-2xl));\n --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n }\n\n .empty-state--lg {\n --nile-es-text-size: var(--nile-spacing-2xl, var(--ng-font-size-text-xl));\n --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-xl));\n --nile-es-subtext-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n --nile-es-subtext-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n\n --nile-es-icon-size:var(--nile-height-60px, var(--ng-height-60px));\n --nile-es-flat-option-border-radius: var(--nile-border-size-10, var(--ng-radius-lg));\n --nile-es-img-height:160px;\n --nile-es-img-width:220px;\n\n --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));\n --nile-es-body-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-2xl));\n --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n }\n\n .empty-state {\n min-width:300px;\n max-width:512px;\n width:100%;\n height:max-content;\n display:flex;\n flex-direction:column;\n row-gap:var(--nile-es-gap);\n }\n\n .empty-state__body {\n display:flex;\n flex-direction:column;\n justify-content:space-between;\n align-items:center;\n row-gap:var(--nile-es-body-gap)\n }\n\n .empty-state__body--content {\n position:relative;\n }\n\n .empty-state__img__icon {\n display: var(--ng-display-flex);\n justify-content: center;\n align-items: center;\n }\n\n .empty-state__body--tonal {\n background: var(--nile-gradient-1, var(--ng-white-gradient-6));\n width: 104px;\n height: 104px;\n border-radius: var(--nile-radius-full, var(--ng-radius-full));\n display:flex;\n justify-content:center;\n align-items:center;\n }\n\n .nile-flat-type-icon {\n height:var(--nile-es-icon-size);\n aspect-ratio:1 / 1;\n border-radius: var(--nile-es-flat-option-border-radius);\n\n background-color: white;\n display: grid;\n place-items: center;\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .empty__state__text-section {\n display:flex;\n flex-direction:column;\n gap:var(--nile-es-text-gap);\n max-width:80%;\n }\n\n .empty-state__text {\n font-size: var(--nile-es-text-size);\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n line-height: var(--nile-es-text-line-height);\n text-align: center;\n font-style: normal;\n }\n\n .empty-state__subtext {\n font-size: var(--nile-es-subtext-size);\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n line-height: var(--nile-es-subtext-line-height);\n text-align: center;\n color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n font-style: normal;\n }\n\n .empty-state-actions {\n display:flex;\n justify-content:center;\n }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-empty-state/nile-empty-state.d.ts CHANGED Viewed

@@ -24,6 +24,9 @@ export declare class NileEmptyState extends NileElement {
     grayscale: boolean;
     text: String;
     subText: String;
+    svgIconUrl: string;
+    svgIconSize: number;
+    svgIconColor: string;
     /**
      * Render method
      * @slot This is a slot test

package/dist/src/nile-empty-state/nile-empty-state.js CHANGED Viewed

@@ -10,6 +10,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './nile-empty-state.css';
 import NileElement from '../internal/nile-element';
+import { ifDefined } from 'lit/directives/if-defined.js';
 /**
  * Nile empty-state component.
  *
@@ -25,6 +26,7 @@ let NileEmptyState = class NileEmptyState extends NileElement {
         this.grayscale = false;
         this.text = 'Empty State';
         this.subText = 'No Data';
+        this.svgIconSize = 40;
         /* #endregion */
     }
     /**
@@ -42,47 +44,58 @@ let NileEmptyState = class NileEmptyState extends NileElement {
      */
     render() {
         return html `
-		<div part="container" class="${classMap({
+      <div part="container" class="${classMap({
             'empty-state': true,
             'empty-state--sm': this.size == 'sm',
             'empty-state--md': this.size == 'md',
             'empty-state--lg': this.size == 'lg'
         })}">
-      <div  part="body" class="${classMap({ 'empty-state__body': true })}">
+        <div part="body" class="${classMap({ 'empty-state__body': true })}">
-        ${this.variant == 'content' ? html `
-        <div part="content-image" class="empty-state__body--content">
-          <div part="image" src="" class="${classMap({ 'empty-state__image': true, 'empty-state__image--grayscale': this.grayscale })}"></div>
-          ${!this.icon ? nothing : html `
-          <div part="icon-wrapper" class="empty-state__img__icon">
-            <nile-icon name="${this.icon}" color="white" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}"></nile-icon>
-          </div>`}
-        </div>` : nothing}
-			  ${this.variant == 'tonal' ? html `
-				<div part="tonal-body" class="empty-state__body--tonal">
-					<nile-icon name="${this.icon}" size="40"></nile-icon>
-				</div>` : nothing}
+          ${this.variant == 'content' ? html `
+            <div part="content-image"  class="empty-state__body--content">
+              ${!this.icon && !this.svgIconUrl ? nothing : html `
+                <div part="icon-wrapper" class="empty-state__img__icon">
+                  ${this.svgIconUrl ? html `
+                    <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
+                    <!-- <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${this.svgIconColor ? this.svgIconColor : '#ddd'}"></nile-icon> -->
+                  ` : html `
+                    <nile-icon name="${this.icon}" color="white" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}"></nile-icon>
+                  `}
+                </div>`}
+            </div>` : nothing}
-			  ${this.variant == 'flat' ? html `
-				<div part="flat-body" class="empty-state__body--flat">
+          ${this.variant == 'tonal' ? html `
+            <div part="tonal-body" class="empty-state__body--tonal">
+              ${this.svgIconUrl ? html `
+                <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
+              ` : html `
+                <nile-icon name="${this.icon}" size="40"></nile-icon>
+              `}
+            </div>` : nothing}
+          ${this.variant == 'flat' ? html `
+            <div part="flat-body" class="empty-state__body--flat">
 					<span class="nile-flat-type-icon">
-						<nile-icon name="${this.icon}" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}" variant="secondary"></nile-icon>
+						${this.svgIconUrl ? html `
+              <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" variant="secondary" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
+            ` : html `
+              <nile-icon name="${this.icon}" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}" variant="secondary"></nile-icon>
+            `}
 					</span>
-				</div>` : nothing}
-        <div part="text-section" class="empty__state__text-section">
-          <div part="text" class="empty-state__text">${this.text}</div>
-          <div part="subtitle" class="empty-state__subtext">${this.subText}</div>
+            </div>` : nothing}
+          <div part="text-section" class="empty__state__text-section">
+            <div part="text" class="empty-state__text">${this.text}</div>
+            <div part="subtitle" class="empty-state__subtext">${this.subText}</div>
+          </div>
         </div>
-			</div>
-			<div part="actions" class="empty-state-actions">
-				<slot></slot>
-			</div>
-		</div>
-		`;
+        <div part="actions" class="empty-state-actions">
+          <slot></slot>
+        </div>
+      </div>
+    `;
     }
 };
 __decorate([
@@ -103,6 +116,15 @@ __decorate([
 __decorate([
     property({ attribute: 'sub-text' })
 ], NileEmptyState.prototype, "subText", void 0);
+__decorate([
+    property()
+], NileEmptyState.prototype, "svgIconUrl", void 0);
+__decorate([
+    property({ type: Number })
+], NileEmptyState.prototype, "svgIconSize", void 0);
+__decorate([
+    property({ type: String })
+], NileEmptyState.prototype, "svgIconColor", void 0);
 NileEmptyState = __decorate([
     customElement('nile-empty-state')
 ], NileEmptyState);

package/dist/src/nile-empty-state/nile-empty-state.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-empty-state.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkC,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,WAAW,MAAM,0BAA0B,CAAC;~~AAEnD~~;;;;;GAKG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,WAAW;IAAxC;;QAUO,SAAI,~~GAAuB~~,IAAI,CAAC;~~QAEhC~~,YAAO,GAGL,OAAO,CAAC;QAEV,SAAI,GAAW,OAAO,CAAC;QACT,cAAS,GAAY,KAAK,CAAC;QAEzC,SAAI,GAAW,aAAa,CAAC;QACP,YAAO,GAAW,SAAS,CAAC;~~QA4D9D~~,gBAAgB;IAClB,CAAC;~~IAhFC~~;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;~~IAgBD~~,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACX,OAAO,IAAI,CAAA;~~iCACkB~~,QAAQ,CAAC;~~YACpC~~,aAAa,EAAE,IAAI;YACnB,iBAAiB,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI;YACpC,iBAAiB,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI;YACpC,iBAAiB,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI;SACrC,CAAC;~~iCAC2B~~,QAAQ,CAAC,EAAE,mBAAmB,EAAE,IAAI,EAAE,CAAC;;~~UAE9D~~,IAAI,CAAC,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA~~;;;4CAGE~~,~~QAAQ~~,CAAC,~~EAAE~~,~~oBAAoB~~,~~EAAE~~,IAAI,~~EAAE,+BAA+B~~,~~EAAC~~,IAAI,CAAC,SAAS,~~EAAG~~,CAAC;~~YACzH~~,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,~~OAAO~~,CAAC,CAAC,CAAC,IAAI,CAAA~~;;+BAER~~,IAAI,CAAC,IAAI,yBAAyB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;~~iBAE3G~~;~~eACK~~,CAAA,CAAC,CAAC,~~OACT~~;;~~OAED~~,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;;~~wBAEb~~,IAAI,CAAC,IAAI;~~WACtB~~,CAAA,CAAC,CAAC,~~OACL~~;;~~OAED~~,IAAI,CAAC,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;;;~~yBAGX~~,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;;~~WAEtF~~,CAAA,CAAC,CAAC,~~OACL~~;;;~~uDAG~~+C,IAAI,CAAC,IAAI;~~8DACF~~,IAAI,CAAC,OAAO;;;;;;;;~~GAQvE~~,CAAC;~~IACF~~,CAAC;CAGF,CAAA;~~AAxEa~~;IAAX,QAAQ,EAAE;~~4CAAiC~~;~~AAEhC~~;IAAX,QAAQ,EAAE;+CAGW;AAEV;IAAX,QAAQ,EAAE;4CAAwB;AACT;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAC,OAAO,EAAC,CAAC;iDAA4B;AAEzC;IAAX,QAAQ,EAAE;4CAA8B;AACP;IAAjC,QAAQ,CAAC,EAAC,SAAS,EAAC,UAAU,EAAC,CAAC;+CAA6B;~~AArBnD~~,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,~~CAkF1B~~;;AAED,eAAe,cAAc,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { html, nothing, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-empty-state.css';\nimport NileElement from '../internal/nile-element';\n\n/\n Nile empty-state component.\n \n @tag nile-empty-state\n \n /\n@customElement('nile-empty-state')\nexport class NileEmptyState extends NileElement {\n\n /*\n The styles for nile-empty-state\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 @property() size: 'sm' \| 'md' \| 'lg' = 'md';\n\n @property() variant:\n \| 'flat'\n \| 'content'\n \| 'tonal' = 'tonal';\n\n @property() icon: string = 'error';\n @property({type:Boolean}) grayscale: boolean = false;\n\n @property() text: String = 'Empty State';\n @property({attribute:'sub-text'}) subText: String = 'No Data';\n\n\n / #endregion /\n\n / #region Methods /\n\n /\n Render method\n * @slot This is a slot test\n /\n public render(): TemplateResult {\n return html`\n~~\t\t~~<div part=\"container\" class=\"${classMap({\n 'empty-state': true,\n 'empty-state--sm': this.size == 'sm',\n 'empty-state--md': this.size == 'md',\n 'empty-state--lg': this.size == 'lg'\n })}\">\n <div part=\"body\" class=\"${classMap({ 'empty-state__body': true })}\">\n\n ${this.variant == 'content' ? html`\n <div part=\"content-image\" class=\"empty-state__body--content\">\n \n <div part=\"~~image~~\" ~~src~~=\"\" ~~class~~=\"${~~classMap(~~{ ~~'empty-state__image': true, 'empty-state__image--grayscale':~~this.~~grayscale }~~)}\"></~~div~~>\n ${!this.~~icon~~ ~~? nothing : html`\n <div part~~=\"~~icon-wrapper~~\" ~~class~~=\"~~empty-state__img__icon~~\">\n <nile-icon name=\"${this.icon}\" color=\"white\" size=\"${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}\"></nile-icon>\n </div>`\n }\n </div>`: nothing\n }\n\~~t\t\t\t\~~n~~\t\t\t~~ ${this.variant == 'tonal' ? html`\n~~\t\t\t\t~~<div part=\"tonal-body\" class=\"empty-state__body--tonal\">\n\t\t\~~t\t\t~~<nile-icon name=\"${this.icon}\" size=\"40\"></nile-icon>\n\~~t\t\t\t~~</div>`: nothing\n }\n\n~~\t\t\t~~ ${this.variant == 'flat' ? html`\n~~\t\t\t\t~~<div part=\"flat-body\" class=\"empty-state__body--flat\">\n\t\t\t\t\t<span class=\"nile-flat-type-icon\">\n\t\t\t\t\t\t<nile-icon name=\"${this.icon}\" size=\"${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}\" variant=\"secondary\"></nile-icon>\n\t\t\t\t\t</span>\n~~\t\t\t\t~~</div>`: nothing\n }\n \n <div part=\"text-section\" class=\"empty__state__text-section\">\n <div part=\"text\" class=\"empty-state__text\">${this.text}</div>\n <div part=\"subtitle\" class=\"empty-state__subtext\">${this.subText}</div>\n </div>\n~~\t\t\t~~</div>\n\n~~\t\t\t~~<div part=\"actions\" class=\"empty-state-actions\">\n~~\t\t\t\t~~<slot></slot>\n~~\t\t\t~~</div>\n~~\t\t~~</div>\n~~\t\t~~`;\n }\n\n / #endregion */\n}\n\nexport default NileEmptyState;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-empty-state': NileEmptyState;\n }\n}"]}
1	+ {"version":3,"file":"nile-empty-state.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.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 { html, nothing, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-empty-state.css';\nimport NileElement from '../internal/nile-element';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n/\n Nile empty-state component.\n \n @tag nile-empty-state\n \n /\n@customElement('nile-empty-state')\nexport class NileEmptyState extends NileElement {\n\n /*\n The styles for nile-empty-state\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 @property() size: 'sm' \| 'md' \| 'lg' = 'md';\n\n @property() variant:\n \| 'flat'\n \| 'content'\n \| 'tonal' = 'tonal';\n\n @property() icon: string = 'error';\n @property({type:Boolean}) grayscale: boolean = false;\n\n @property() text: String = 'Empty State';\n @property({attribute:'sub-text'}) subText: String = 'No Data';\n @property() svgIconUrl: string;\n @property({type: Number}) svgIconSize: number = 40;\n @property({type: String}) svgIconColor: string;\n\n / #endregion /\n\n / #region Methods /\n\n /\n Render method\n * @slot This is a slot test\n /\n public render(): TemplateResult {\n return html`\n <div part=\"container\" class=\"${classMap({\n 'empty-state': true,\n 'empty-state--sm': this.size == 'sm',\n 'empty-state--md': this.size == 'md',\n 'empty-state--lg': this.size == 'lg'\n })}\">\n <div part=\"body\" class=\"${classMap({ 'empty-state__body': true })}\">\n\n ${this.variant == 'content' ? html`\n <div part=\"content-image\" class=\"empty-state__body--content\">\n ${!this.icon && !this.svgIconUrl ? nothing : html`\n <div part=\"icon-wrapper\" class=\"empty-state__img__icon\">\n ${this.svgIconUrl ? html`\n <nile-icon customSvgPath=\"${this.svgIconUrl}\" size=\"${this.svgIconSize}\" color=\"${ifDefined(this.svgIconColor)}\" noFill></nile-icon>\n <!-- <nile-icon customSvgPath=\"${this.svgIconUrl}\" size=\"${this.svgIconSize}\" color=\"${this.svgIconColor ? this.svgIconColor : '#ddd'}\"></nile-icon> -->\n ` : html`\n <nile-icon name=\"${this.icon}\" color=\"white\" size=\"${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}\"></nile-icon>\n `}\n </div>`\n }\n </div>`: nothing\n }\n\n ${this.variant == 'tonal' ? html`\n <div part=\"tonal-body\" class=\"empty-state__body--tonal\">\n ${this.svgIconUrl ? html`\n <nile-icon customSvgPath=\"${this.svgIconUrl}\" size=\"${this.svgIconSize}\" color=\"${ifDefined(this.svgIconColor)}\" noFill></nile-icon>\n ` : html`\n <nile-icon name=\"${this.icon}\" size=\"40\"></nile-icon>\n `}\n </div>`: nothing\n }\n\n ${this.variant == 'flat' ? html`\n <div part=\"flat-body\" class=\"empty-state__body--flat\">\n\t\t\t\t\t<span class=\"nile-flat-type-icon\">\n\t\t\t\t\t\t${this.svgIconUrl ? html`\n <nile-icon customSvgPath=\"${this.svgIconUrl}\" size=\"${this.svgIconSize}\" variant=\"secondary\" color=\"${ifDefined(this.svgIconColor)}\" noFill></nile-icon>\n ` : html`\n <nile-icon name=\"${this.icon}\" size=\"${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}\" variant=\"secondary\"></nile-icon>\n `}\n\t\t\t\t\t</span>\n </div>`: nothing\n }\n\n <div part=\"text-section\" class=\"empty__state__text-section\">\n <div part=\"text\" class=\"empty-state__text\">${this.text}</div>\n <div part=\"subtitle\" class=\"empty-state__subtext\">${this.subText}</div>\n </div>\n </div>\n\n <div part=\"actions\" class=\"empty-state-actions\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n / #endregion */\n}\n\nexport default NileEmptyState;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-empty-state': NileEmptyState;\n }\n}\n"]}

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

@@ -10,62 +10,61 @@ import { css } from 'lit';
  */
 export const styles = css `
   :host {
+    --ng-error-expanded-padding: var(--ng-spacing-md) var(--ng-spacing-lg);
+    --ng-private-error-max-width: var(--nile-width-535px, var(--ng-width-120));
+    --ng-private-error-max-height: var(--nile-height-48px, var(--ng-height-48px));
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
   .nile-error-message {
     width: 100%;
-    word-break: break-all;
-    font-size: var(--nile-font-size-small);
+    font-size: var(--nile-font-size-small, var(--ng-font-size-text-xs));
     letter-spacing: 0.2px;
-    font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-font-size-small);
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    line-height: var(--nile-font-size-small, var(--ng-line-height-text-xs));
+    max-width: var(--nile-error-max-width, var(--ng-private-error-max-width));
   }
   .nile-error-message__error {
-    color: var(--nile-colors-red-700);
+    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
     word-break: break-word;
   }
   .nile-error-message__response {
-    color: var(--nile-colors-dark-500);
-    margin-top:6px;
-    line-height: 16px;
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));
+    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));
+    max-height: var(--nile-error-max-height, var(--ng-private-error-max-height));
+    overflow-x: auto;
   }
   .nile-error-message__icon {
     vertical-align: middle;
-    margin-right:2px;
+    margin-right: var(--nile-spacing-xxs, var(--ng-spacing-xxs));
   }
   .nile-error-message__more-button {
-    color: var(--nile-colors-primary-600);
+    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
     cursor: pointer;
     white-space: nowrap;
     display: inline-flex;
-    gap: 4px;
+    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
     align-items: center
   }
   .nile-error-message__response-expanded {
-    line-height: 18px;
+    line-height: var(--nile-line-height-small);
     height: auto;
-    border: 1px solid var(--nile-colors-red-500);
-    border-left: 6px solid var(--nile-colors-red-500);
-    border-radius: 4px;
-    margin-top: 12px;
-    padding: 12px;
-    background: var(--nile-colors-neutral-100);
-  }
-  .nile-error-message__response-expanded {
     max-height: 100px;
     overflow-y: auto;
-    border: 1px solid var(--nile-colors-red-500);
-    border-left: 6px solid var(--nile-colors-red-500);
-    border-radius: 4px;
-    margin-top: 12px;
-    padding: 12px;
-    background: var(--nile-colors-neutral-100);
+    border: 1px solid var(--nile-colors-red-500, var(--ng-colors-border-error));
+    border-left: var(--nile-border-size-6, var(--ng-border-width-4)) solid var(--nile-colors-red-500, var(--ng-colors-border-error));
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    margin-top: var(--nile-spacing-lg, var(--ng-spacing-md));
+    padding: var(--nile-spacing-lg, var(--ng-spacing-md));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-fg-white));
     transition: max-height 0.3s ease-in-out;
     flex-shrink: 0;
   }
@@ -75,14 +74,14 @@ export const styles = css `
     overflow: hidden;
     transition: max-height 0.3s ease-in-out;
     visibility: hidden;
-    padding: 0 12px;
+    padding: var(--nile-spacing-none) var(--nile-spacing-none);
   }
   .nile-error-message__response-expanded.expanded {
-    max-height: 100px;
+    max-height: var(--nile-error-max-dialog-height, var(--ng-private-error-max-height));
     transition: max-height 0.3s ease-in-out;
     visibility: visible;
-    padding: 12px;
+    padding: var(--nile-spacing-lg, var(--ng-error-expanded-padding));
   }
 `;
 export default [styles];

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-error-message.css.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4ExB~~,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\n/\n ErrorMessage CSS\n */\nexport const styles = css`\n :host {\n }\n\n .nile-error-message {\n width: 100%;\n ~~word~~-~~break~~: ~~break~~-~~all;\n~~ font-size: var(--~~nile~~-font-size-~~small~~);\n letter-spacing: 0.2px;\n font-weight: var(--nile-font-weight-regular);\n line-height: var(--nile-font-size-small);\n }\n\n .nile-error-message__error {\n color: var(--nile-colors-red-700);\n word-break: break-word;\n }\n\n .nile-error-message__response {\n color: var(--nile-colors-dark-500);\n margin-top:~~6px~~;\n line-height: ~~16px~~;\n }\n\n .nile-error-message__icon {\n vertical-align: middle;\n margin-right:~~2px~~;\n }\n\n .nile-error-message__more-button {\n color: var(--nile-colors-primary-600);\n cursor: pointer;\n white-space: nowrap;\n display: inline-flex;\n gap: ~~4px~~;\n align-items: center\n }\n\n .nile-error-message__response-expanded {\n line-height: ~~18px~~;\n height: auto;\n border: 1px solid var(--nile-colors-red-500~~);\n border-left:~~ ~~6px solid~~ var(--~~nile~~-colors-~~red~~-~~500~~);\n border-~~radius~~: ~~4px;\n margin-top: 12px;\n padding: 12px;\n background:~~ var(--nile-~~colors~~-~~neutral~~-~~100);\n }\n\n .nile~~-~~error~~-~~message__response~~-~~expanded~~ ~~{\n max-height: 100px;\n overflow-y: auto;\n border: 1px~~ solid var(--nile-colors-red-500);\n border-~~left~~: ~~6px solid~~ var(--nile-~~colors~~-~~red~~-~~500);\n border~~-radius~~: 4px~~;\n margin-top: ~~12px~~;\n padding: ~~12px~~;\n background: var(--nile-colors-neutral-100);\n transition: max-height 0.3s ease-in-out;\n flex-shrink: 0;\n }\n\n .nile-error-message__response-expanded.collapsed {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease-in-out;\n visibility: hidden;\n padding: 0 ~~12px~~;\n }\n\n .nile-error-message__response-expanded.expanded {\n max-height: ~~100px~~;\n transition: max-height 0.3s ease-in-out;\n visibility: visible;\n padding: ~~12px~~;\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-error-message.css.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2ExB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\n/\n ErrorMessage CSS\n */\nexport const styles = css`\n :host {\n --ng-error-expanded-padding: var(--ng-spacing-md) var(--ng-spacing-lg);\n --ng-private-error-max-width: var(--nile-width-535px, var(--ng-width-120));\n --ng-private-error-max-height: var(--nile-height-48px, var(--ng-height-48px));\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .nile-error-message {\n width: 100%;\n font-size: var(--nile-font-size-small, var(--ng-font-size-text-xs));\n letter-spacing: 0.2px;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n line-height: var(--nile-font-size-small, var(--ng-line-height-text-xs));\n max-width: var(--nile-error-max-width, var(--ng-private-error-max-width)); \n }\n\n .nile-error-message__error {\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n word-break: break-word;\n }\n\n .nile-error-message__response {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));\n margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));\n max-height: var(--nile-error-max-height, var(--ng-private-error-max-height));\n overflow-x: auto;\n }\n\n .nile-error-message__icon {\n vertical-align: middle;\n margin-right: var(--nile-spacing-xxs, var(--ng-spacing-xxs));\n }\n\n .nile-error-message__more-button {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n cursor: pointer;\n white-space: nowrap;\n display: inline-flex;\n gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n align-items: center\n }\n\n .nile-error-message__response-expanded {\n line-height: var(--nile-line-height-small);\n height: auto;\n max-height: 100px;\n overflow-y: auto;\n border: 1px solid var(--nile-colors-red-500, var(--ng-colors-border-error));\n border-left: var(--nile-border-size-6, var(--ng-border-width-4)) solid var(--nile-colors-red-500, var(--ng-colors-border-error));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n margin-top: var(--nile-spacing-lg, var(--ng-spacing-md));\n padding: var(--nile-spacing-lg, var(--ng-spacing-md));\n background: var(--nile-colors-neutral-100, var(--ng-colors-fg-white));\n transition: max-height 0.3s ease-in-out;\n flex-shrink: 0;\n }\n\n .nile-error-message__response-expanded.collapsed {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease-in-out;\n visibility: hidden;\n padding: var(--nile-spacing-none) var(--nile-spacing-none);\n }\n\n .nile-error-message__response-expanded.expanded {\n max-height: var(--nile-error-max-dialog-height, var(--ng-private-error-max-height));\n transition: max-height 0.3s ease-in-out;\n visibility: visible;\n padding: var(--nile-spacing-lg, var(--ng-error-expanded-padding));\n }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-error-message/nile-error-message.d.ts CHANGED Viewed

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

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

@@ -28,6 +28,17 @@ 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.
      */
@@ -43,7 +54,7 @@ let NileErrorMessage = class NileErrorMessage extends LitElement {
           size="14"
           class="nile-error-message__icon"
           part="icon"
-          color="var(--nile-colors-red-700)"
+          color="var(--nile-colors-red-700, var(--ng-colors-fg-error-primary))"
         ></nile-icon>
         <span class="nile-error-message__error">${this.errorMessage}</span>
@@ -58,7 +69,7 @@ let NileErrorMessage = class NileErrorMessage extends LitElement {
               class="nile-error-message__more-button"
               @click=${this.toggleExpanded}
               >${this.isExpanded ? 'View Less' : 'View More'}
-              <nile-icon color="var(--nile-colors-primary-600)" part="icon" size="14" name="${iconName}"></nile-icon>
+              <nile-icon color="var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600))" part="icon" size="14" name="${iconName}"></nile-icon>
               </span
             > ` : ``}
             </div>
@@ -88,6 +99,15 @@ __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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"]}
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, var(--ng-colors-fg-error-primary))\"\n ></nile-icon>\n <span class=\"nile-error-message__error\">${this.errorMessage}</span>\n\n\n ${this.errorResponse\n ? html`\n <div class=\"nile-error-message__response\">\n ${this.errorResponse}\n ${this.errorResponseLong\n ? html`\n <span\n class=\"nile-error-message__more-button\"\n @click=${this.toggleExpanded}\n >${this.isExpanded ? 'View Less' : 'View More'}\n <nile-icon color=\"var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600))\" part=\"icon\" size=\"14\" name=\"${iconName}\"></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"]}