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

package/src/nile-empty-state/nile-empty-state.css.ts

@@ -13,57 +13,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 {
@@ -87,47 +88,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;
@@ -136,7 +113,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 {
@@ -148,7 +125,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;
@@ -156,10 +134,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;
   }
 
@@ -169,4 +148,4 @@ export const styles = css`
   }
 `;
 
-export default [styles];
+export default [styles];

package/src/nile-empty-state/nile-empty-state.ts

@@ -10,7 +10,7 @@ import { customElement, property, state } 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.
  *
@@ -28,7 +28,7 @@ export class NileEmptyState extends NileElement {
     return [styles];
   }
 
-  @property() size: 'sm' | 'md' | 'lg' = 'md';
+  @property() size: 'sm' | 'md' | 'lg'  = 'md';
 
   @property() variant:
     | 'flat'
@@ -40,7 +40,9 @@ export class NileEmptyState extends NileElement {
 
   @property() text: String = 'Empty State';
   @property({attribute:'sub-text'}) subText: String = 'No Data';
-
+  @property() svgIconUrl: string;
+  @property({type: Number}) svgIconSize: number = 40;
+  @property({type: String}) svgIconColor: string;
 
   /* #endregion */
 
@@ -52,51 +54,62 @@ export class NileEmptyState extends NileElement {
    */
   public render(): TemplateResult {
     return html`
-		<div class="${classMap({
-      'empty-state': true,
-      'empty-state--sm': this.size == 'sm',
-      'empty-state--md': this.size == 'md',
-      'empty-state--lg': this.size == 'lg'
-    })}">
-      <div class="${classMap({ 'empty-state__body': true })}">
-
-        ${this.variant == 'content' ? html`
-        <div class="empty-state__body--content">
-          
-          <div src="" class="${classMap({ 'empty-state__image': true, 'empty-state__image--grayscale':this.grayscale  })}"></div>
-          ${!this.icon ? nothing : html`
-          <div 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 class="${classMap({
+        'empty-state': true,
+        'empty-state--sm': this.size == 'sm',
+        'empty-state--md': this.size == 'md',
+        'empty-state--lg': this.size == 'lg'
+      })}">
+        <div class="${classMap({ 'empty-state__body': true })}">
+
+          ${this.variant == 'content' ? html`
+            <div class="empty-state__body--content">
+              ${!this.icon && !this.svgIconUrl ? nothing : html`
+                <div 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
           }
-        </div>`: nothing
-        }
-				
-			  ${this.variant == 'tonal' ? html`
-				<div class="empty-state__body--tonal">
-					<nile-icon name="${this.icon}" size="40"></nile-icon>
-				</div>`: nothing
-        }
-
-			  ${this.variant == 'flat' ? html`
-				<div class="empty-state__body--flat">
+
+          ${this.variant == 'tonal' ? html`
+            <div 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 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 class="empty__state__text-section">
-          <div class="empty-state__text">${this.text}</div>
-          <div class="empty-state__subtext">${this.subText}</div>
+            </div>`: nothing
+          }
+
+          <div class="empty__state__text-section">
+            <div class="empty-state__text">${this.text}</div>
+            <div class="empty-state__subtext">${this.subText}</div>
+          </div>
         </div>
-			</div>
 
-			<div class="empty-state-actions">
-				<slot></slot>
-			</div>
-		</div>
-		`;
+        <div class="empty-state-actions">
+          <slot></slot>
+        </div>
+      </div>
+    `;
   }
 
   /* #endregion */
@@ -108,4 +121,4 @@ declare global {
   interface HTMLElementTagNameMap {
     'nile-empty-state': NileEmptyState;
   }
-}
+}

package/src/nile-error-message/nile-error-message.css.ts

@@ -12,62 +12,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;
   }
@@ -77,14 +76,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));
   }
 `;
 

package/src/nile-error-message/nile-error-message.ts

@@ -32,6 +32,12 @@ export class NileErrorMessage extends LitElement {
   @property({ type: Boolean })
   isExpanded: boolean = false;
 
+  @property({ type: String }) maxWidth: string;
+
+  @property({ type: String }) maxHeight: string;
+
+  @property({ type: String }) maxDialogHeight: string;
+
   // The maximum length before truncation.
   private readonly MAX_LENGTH: number = 100;
 
@@ -46,6 +52,18 @@ export class NileErrorMessage extends LitElement {
     return this.errorResponse;
   }
 
+  updated(changedProperties: Map<string, any>) {
+    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.
    */
@@ -63,7 +81,7 @@ export 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>
 
@@ -78,7 +96,7 @@ export 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>

package/src/nile-error-notification/nile-error-notification.css.ts

@@ -12,28 +12,31 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    --indication-color: var(--nile-colors-red-500);
+    --indication-color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .nile-error-notification {
-    font-family: var(--nile-font-family-serif);
-    font-size: 12px;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
     font-style: normal;
-    font-weight: 400;
-    line-height: 12px;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));
     letter-spacing: 0.2px;
     border: 1px solid var(--indication-color);
-    border-left: 6px solid var(--indication-color);
-    border-radius: 4px;
-    padding: 8px;
-    background: var(--nile-colors-neutral-100);
+    border-left: var(--nile-border-size-6, var(--ng-border-width-4)) solid var(--indication-color);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    padding: var(--nile-spacing-md, var(--ng-spacing-md));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-fg-white));
     color: var(--indication-color);
     box-sizing: border-box;
   }
 
   .nile-error-notification__icon {
     vertical-align: middle;
-    margin-right: 4px;
+    margin-right: var(--nile-spacing-xs, var(--ng-spacing-xxs));
   }
 `;
 

package/src/nile-error-notification/nile-error-notification.ts

@@ -35,7 +35,6 @@ export class NileErrorNotification extends LitElement {
   @property({ type: String, reflect: true  }) errorMessage: string = '';
 
   @property({ type: String, reflect: true  }) color: string = '';
-  
   protected updated(_changedProperties: PropertyValues): void {
     if(_changedProperties.has('color')){
       this.style.setProperty('--indication-color',this.color)
@@ -52,7 +51,7 @@ export class NileErrorNotification extends LitElement {
    */
   public render(): TemplateResult {
     return html`
-      <div class="nile-error-notification">
+      <div class="nile-error-notification" part="container">
         <nile-icon
           name="info2"
           size="14"
@@ -60,7 +59,9 @@ export class NileErrorNotification extends LitElement {
           part="icon"
           color="var(--indication-color)"
         ></nile-icon>
-        ${this.errorMessage}
+        <span part="message">
+          ${this.errorMessage}
+        </span>
       </div>
     `;
   }

package/src/nile-file-preview/index.ts

@@ -0,0 +1 @@
+export { NileFilePreview } from './nile-file-preview';