@aquera/nile-elements 0.0.66 → 0.0.67

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.66",
+  "version": "0.0.67",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/index.ts

@@ -57,3 +57,5 @@ export { NileTableBody } from './nile-table-body';
 export { NileTableHeaderItem } from './nile-table-header-item';
 export { NileAvatar } from './nile-avatar';
 export { NilePageHeader } from './nile-page-header';
+export { NileEmptyState } from './nile-empty-state';
+export { NileHero } from './nile-hero';

package/src/nile-button/nile-button.ts

@@ -306,6 +306,18 @@ export class NileButton extends NileElement implements NileFormControl {
     const isLink = this.isLink();
     const tag = isLink ? literal`a` : literal`button`;
 
+    const variantCaretColors = {
+      primary: 'white',
+      secondary: 'black',
+      tertiary: 'black',
+      caution: 'white',
+      ghost: 'black',
+      destructive: 'white',
+      'secondary-grey': 'black',
+      'secondary-blue': 'black',
+      'tertiary-blue': 'black',
+    };
+
     /* eslint-disable lit/no-invalid-html */
     /* eslint-disable lit/binding-positions */
     return html`
@@ -364,7 +376,7 @@ export class NileButton extends NileElement implements NileFormControl {
                 <nile-icon
                   part="caret"
                   class="button__caret"
-                  color="white"
+                  color="${variantCaretColors[this.variant]}"
                   name="arrowdown"
                 ></nile-icon>
               `

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

@@ -0,0 +1 @@
+export { NileEmptyState } from './nile-empty-state';

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

@@ -0,0 +1,131 @@
+/**
+* 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-element';
+
+/**
+ * EmptyState CSS
+ */
+export const styles = css`
+  :host {
+    display:inline-flex;
+    min-width:300px;
+    max-width:512px;
+    width:100%;
+  }
+
+  .empty-state--sm {
+    --nile-es-text-size:16px;
+    --nile-es-subtext-size:14px;
+    --nile-es-icon-size:48px;
+    --es-flat-option-border-radius:5px;
+    --nile-es-img-height:118px;
+  }
+
+  .empty-state--md {
+    --nile-es-text-size:18px;
+    --nile-es-subtext-size:14px;
+    --nile-es-icon-size:48px;
+    --es-flat-option-border-radius:5px;
+    --nile-es-img-height:128px;
+  }
+
+  .empty-state--lg {
+    --nile-es-text-size:20px;
+    --nile-es-subtext-size:16px;
+    --nile-es-icon-size:56px;
+    --es-flat-option-border-radius:10px;
+    --nile-es-img-height:160px;
+  }
+
+  .empty-state {
+    padding:1rem;
+    min-width:300px;
+    max-width:512px;
+    width:100%;
+    height:max-content;
+    display:flex;
+    flex-direction:column;
+    row-gap:2rem;
+  }
+
+  .empty-state__body {
+    row-gap:5px;
+    display:flex;
+    flex-direction:column;
+    justify-content:space-between;
+    align-items:center;
+  }
+
+  .empty-state__body--content {
+    position:relative;
+  }
+
+  .empty-state__img__icon {
+    height: var(--nile-es-icon-size);
+    aspect-ratio:1 / 1;
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    background: #34405466;
+  }
+
+  .empty-state__img__icon--abs {
+    position:absolute;
+    left: calc(50% - calc(var(--nile-es-icon-size) / 2));
+    top:calc(50% - calc(var(--nile-es-icon-size) / 2));
+  }
+
+  .empty-state__body--tonal {
+    background: linear-gradient(180deg, #F9FAFB 0%, #EDF0F3 100%);
+    width: 100px;
+    height: 100px;
+    padding: 1rem;
+    border-radius: 50%;
+    display:flex;
+    justify-content:center;
+    align-items:center;
+  }
+
+  .empty-state__body--flat {
+    margin:2rem;
+  }
+
+  .nile-flat-type-icon {
+    height:var(--nile-es-icon-size);
+    aspect-ratio:1 / 1;
+    border-radius: var(--es-flat-option-border-radius);
+
+    background-color: white;
+    display: grid;
+    place-items: center;
+    border: 1px solid #EAECF0;
+  }
+
+  .empty-state__text {
+    font-size: var(--nile-es-text-size);
+    font-weight: 600;
+    line-height: 28px;
+    text-align: center;
+  }
+
+  .empty-state__subtext {
+    font-size: var(--nile-es-subtext-size);
+    font-weight: 400;
+    line-height: 20px;
+    text-align: center;
+    color:#475467;
+  }
+
+  .empty-state-actions {
+    display:flex;
+    justify-content:center;
+    gap:1rem;
+  }
+`;
+
+export default [styles];

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

@@ -0,0 +1,117 @@
+/**
+ * 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 { state, html, nothing, property, CSSResultArray, TemplateResult } from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './nile-empty-state.css';
+import { HasSlotController } from '../internal/slot';
+import NileElement from '../internal/nile-element';
+
+/**
+ * Nile empty-state component.
+ *
+ * @tag nile-empty-state
+ *
+ */
+@customElement('nile-empty-state')
+export class NileEmptyState extends NileElement {
+
+  /**
+   * The styles for nile-empty-state
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+  private readonly hasSlotController = new HasSlotController(
+    this,
+    'actions'
+  );
+
+  @property() size: 'sm' | 'md' | 'lg' = 'md';
+
+  @property() variant:
+    | 'flat'
+    | 'content'
+    | 'tonal' = 'tonal';
+
+  @property() icon: string = 'error';
+
+  @property() text: String = 'Empty State';
+  @property() subText: String = 'No Data';
+
+
+  /* #endregion */
+
+  /* #region Methods */
+
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+  public render(): TemplateResult {
+    const hasContentSlot = this.hasSlotController.test('content');
+    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">
+					<slot name="content"></slot>
+					${!this.icon ? nothing :
+          html`
+						<div class="${classMap({
+            'empty-state__img__icon': true,
+            'empty-state__img__icon--abs': hasContentSlot
+          })}">
+							<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 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">
+					<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>
+					</span>
+				</div>`: nothing
+      }
+				<div class="empty-state__text">${this.text}</div>
+				<div class="empty-state__subtext">${this.subText}</div>
+			</div>
+
+			<div class="empty-state-actions">
+				<slot></slot>
+			</div>
+		</div>
+		`;
+  }
+
+  /* #endregion */
+}
+
+export default NileEmptyState;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-empty-state': NileEmptyState;
+  }
+}

package/src/nile-form-help-text/nile-form-help-text.css.ts

@@ -17,7 +17,6 @@ export const styles = css`
   .nile-form-help-text {
     display: flex;
     align-items: center;
-    color: var(--nile-colors-dark-500);
     color: var(--nile-form-help-text-color);
     font-family: var(--nile-font-family-serif);
     font-size: var(--nile-form-help-text-font-size);

package/src/nile-hero/index.ts

@@ -0,0 +1 @@
+export { NileHero } from './nile-hero';

package/src/nile-hero/nile-hero.css.ts

@@ -0,0 +1,71 @@
+/**
+* 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-element';
+
+/**
+ * Hero CSS
+ */
+export const styles = css`
+
+	:host {
+		min-height:var(--nile-hero-height);
+		width:100%;
+		position:relative;
+		display:block;
+		border-bottom: 1px solid #EAECF0;
+		background: linear-gradient(180deg, var( --nile-hero-color-bg-from-gradient) 0%,  var( --nile-hero-color-bg-to-gradient) 100%);
+	}
+
+	.hero__body {
+		height:100%;
+	}
+
+	.hero__header {
+		display: flex;
+		align-items: center;
+		padding: var(--nile-hero-first-elements-padding);
+		gap: .75rem;
+	}
+
+	.icon__container {
+		height: 25px;
+		place-items: center;
+		display: grid;
+		aspect-ratio: 1 / 1;
+		border-radius: 8px;
+		border: 1px solid #EAECF0;
+		background: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);
+	}
+
+	.hero__text {
+		color: var(--nile-hero-text-color);
+		font-size: var(--nile-hero-text-font-size);
+		font-style: normal;
+		font-weight: var(--nile-hero-text-font-weight);
+	}
+
+	.hero__slot {
+		padding: var(--nile-hero-first-elements-padding);
+	}
+
+	.hero__img__container {
+		height:100%;
+		width:max-content;
+		position: absolute;
+		right: 0;
+		top:0;
+	}
+
+	.hero__img {
+		object-fit:cover;
+		height:100%;
+		width:auto;
+	}
+`;
+
+export default [styles];

package/src/nile-hero/nile-hero.ts

@@ -0,0 +1,70 @@
+/**
+ * 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 {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import {styles} from './nile-hero.css';
+import NileElement from '../internal/nile-element';
+
+
+/**
+ * Nile hero component.
+ *
+ * @tag nile-hero
+ *
+ */
+@customElement('nile-hero')
+export class NileHero extends NileElement {
+	@property({reflect:true}) icon:string='action'
+	@property({ reflect: true, attribute: 'img-src' }) imgSrc:string='';
+	@property({ reflect: true, attribute: 'hero-text' }) heroText:string='Nile Hero';
+
+	/**
+	 * The styles for nile-hero
+	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+	 */
+	public static get styles(): CSSResultArray {
+		return [styles];
+	}
+
+	/* #endregion */
+
+	/* #region Methods */
+
+	/**
+	 * Render method
+	 * @slot This is a slot test
+	 */
+	public render(): TemplateResult {
+		return html`
+			<div class="hero__body">
+				<div class="hero__header">
+					<span class="icon__container">
+						<nile-icon name="${this.icon}" ></nile-icon>
+					</span>
+					<span class="hero__text">${this.heroText}</span>
+				</div>
+				<div class="hero__slot">
+					<slot></slot>
+				</div>
+			</div>
+			<div class="hero__img__container">
+				<img src="${this.imgSrc}" class="hero__img">
+			</div>
+		`;
+	}
+
+	/* #endregion */
+}
+
+export default NileHero;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-hero': NileHero;
+  }
+}

package/src/nile-input/nile-input.css.ts

@@ -100,7 +100,7 @@ export const styles = css`
   .input--standard {
     background-color: var(--nile-input-standard-background-color);
     border: solid 1px var(--nile-input-standard-border-color);
-    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); /**for v2 */
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
 
   .input--standard:hover:not(.input--disabled) {
@@ -110,7 +110,9 @@ export const styles = css`
 
   .input--standard.input--focused:not(.input--disabled) {
     background-color: hsl(0, 0%, 100%);
-    border-color: #005ea6;
+    border-color: #85aad1;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+      0px 0px 0px 4px rgba(133, 170, 209, 0.24);
   }
 
   .input--standard.input--focused:not(.input--disabled) .input__control {
@@ -129,7 +131,6 @@ export const styles = css`
   }
 
   .input--standard.input--disabled .input__control::placeholder {
-    color: hsl(240 5.2% 33.9%);
     color: var(--nile-input-standard-disabled-placeholder-font-color);
   }
 
@@ -149,9 +150,14 @@ export const styles = css`
     border-color: #fda29b;
   }
 
-  .input--standard.input--destructive:focus {
+  .input--standard.input--focused.input--destructive:not(.input--disabled) {
+    border: 1px solid #fda29b;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+      0px 0px 0px 4px rgba(240, 68, 56, 0.24);
+  }
+
+  .input--destructive:active {
     border: 1px solid #fda29b;
-    /* Focus rings/ring-error-shadow-xs */
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
       0px 0px 0px 4px rgba(240, 68, 56, 0.24);
   }
@@ -247,8 +253,7 @@ export const styles = css`
   }
 
   .input__control::placeholder {
-    color: #7f7f7f;
-    color: #667085; /**for v2 */
+    color: #667085;
     user-select: none;
   }
 
@@ -283,9 +288,9 @@ export const styles = css`
 
   .input--standard:focus {
     border-radius: 4px;
-    border: 1px solid #85aad1; /**for v2 */
+    border: 1px solid #85aad1;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
-      0px 0px 0px 4px rgba(133, 170, 209, 0.24); /**for v2 */
+      0px 0px 0px 4px rgba(133, 170, 209, 0.24);
   }
 
   /*

package/src/nile-input/nile-input.ts

@@ -73,8 +73,7 @@ export class NileInput extends NileElement implements NileFormControl {
   /** The current value of the input, submitted as a name/value pair with form data. */
   @property() value = '';
 
-  @property({type: Boolean}) checkNonPrintableChar: boolean = false;
-
+  @property({ type: Boolean }) checkNonPrintableChar: boolean = false;
 
   /** The default value of the form control. Primarily used for resetting the form control. */
   @defaultValue() defaultValue = '';
@@ -94,7 +93,6 @@ export class NileInput extends NileElement implements NileFormControl {
   /** Sets the input to a success state, changing its visual appearance. */
   @property({ type: Boolean }) success = false;
 
-
   /** Sets the input to a Destructive state, changing its visual appearance. */
   @property({ type: Boolean }) destructive = false;
 
@@ -181,7 +179,7 @@ export class NileInput extends NileElement implements NileFormControl {
    * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
    * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
    */
-  @property() autocomplete: string = "off";
+  @property() autocomplete: string = 'off';
 
   /** Indicates that the input should receive focus on page load. */
   @property({ type: Boolean }) autofocus: boolean;
@@ -309,10 +307,9 @@ export class NileInput extends NileElement implements NileFormControl {
     this.hasFocus = true;
     this.emit('nile-focus', { value: this.value });
 
-    if(this.checkNonPrintableChar){
+    if (this.checkNonPrintableChar) {
       this.markNonPrintableCharacters();
     }
-
   }
 
   private handleInput() {
@@ -368,7 +365,7 @@ export class NileInput extends NileElement implements NileFormControl {
   async handleValueChange() {
     await this.updateComplete;
 
-    if(this.checkNonPrintableChar){
+    if (this.checkNonPrintableChar) {
       this.markNonPrintableCharacters();
     }
   }
@@ -382,7 +379,9 @@ export class NileInput extends NileElement implements NileFormControl {
         const charCode = this.value.charCodeAt(i);
 
         if (charCode > 127) {
-          markedValue += `<span class="input__srtiked-text">${this.value.charAt(i)}</span>`;
+          markedValue += `<span class="input__srtiked-text">${this.value.charAt(
+            i
+          )}</span>`;
           this.hasPrintableCharacters = true;
         } else {
           markedValue += this.value.charAt(i);
@@ -391,10 +390,12 @@ export class NileInput extends NileElement implements NileFormControl {
     }
 
     this.markedValue = markedValue;
-    this.emit('nile-value-marked', { value: this.markedValue, hasNonPrintableCharacters: this.hasPrintableCharacters });
+    this.emit('nile-value-marked', {
+      value: this.markedValue,
+      hasNonPrintableCharacters: this.hasPrintableCharacters,
+    });
   }
 
-
   /** Removes all non printable characters from the value. */
   removeAllNonPrintableCharacters() {
     let cleanedValue = '';
@@ -412,10 +413,8 @@ export class NileInput extends NileElement implements NileFormControl {
 
     this.value = cleanedValue;
     this.emit('nile-npchar-removed', { value: this.value });
-
   }
 
-
   /** Sets focus on the input. */
   focus(options?: FocusOptions) {
     this.input.focus(options);

package/src/nile-page-header/nile-page-header.css.ts

@@ -28,6 +28,7 @@ export const styles = css`
     display: block;
     color: var(--nile-page-header-heading-font-color);
     font-size: var(--nile-page-header-heading-font-size);
+    font-style: normal;
     font-weight: var(--nile-page-header-heading-font-weight);
     line-height: var(--nile-page-header-heading-line-height);
   }
@@ -36,17 +37,12 @@ export const styles = css`
     display: block;
     color: var(--nile-page-header-subheading-font-color);
     font-size: var(--nile-page-header-subheading-font-size);
+    font-style: normal;
     font-weight: var(--nile-page-header-subheading-font-weight);
     line-height: var(--nile-page-header-subheading-line-height);
     margin-top: 3px;
   }
 
-  .line {
-    border: none;
-    border-top: 1px solid var(--nile-page-header-line-border-color);
-    margin: 20px 0 0 0;
-  }
-
   [hidden] {
     display: none;
   }

package/src/nile-page-header/nile-page-header.ts

@@ -58,7 +58,6 @@ export class NilePageHeader extends NileElement {
       >
         ${this.subHeading}
       </slot>
-      <hr class="line" />
     </slot>`;
   }
 

package/src/nile-slide-toggle/nile-slide-toggle.css.ts

@@ -2,32 +2,41 @@ import { css } from 'lit';
 
 export default css`
   .nile-slide-toggle {
-    display: flex;
-    align-items: center;
+    display: inline-flex;
+    align-items: baseline;
   }
 
   .nile-slide-toggle__switch {
     flex: 0 0 auto;
     position: relative;
     display: inline-block;
-    width: 32px;
-    height: 16px;
+    width: 36px;
+    height: 20px;
     line-height: 22px;
     margin-right: 10px;
   }
 
   .nile-slide-toggle__label {
+    display: flex;
+    flex-direction: column;
     margin-right: 6px;
     font-size: 14px;
-    color: var(--nile-colors-dark-900);
+    color: var(--nile-colors-gray-light-mode-700);
     font-family: var(--nile-font-family-serif);
     font-size: 14px;
     font-style: normal;
-    font-weight: 400;
-    line-height: 14px;
+    font-weight: 500;
+    line-height: 20px;
     letter-spacing: 0.2px;
   }
 
+  .nile-slide-toggle__sublabel {
+    color: var(--nile-colors-gray-light-mode-600);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
+  }
+
   .nile-slide-toggle__switch input {
     opacity: 0;
     width: 0;
@@ -49,8 +58,8 @@ export default css`
   .nile-slide-toggle__slider:before {
     position: absolute;
     content: '';
-    height: 12px;
-    width: 12px;
+    height: 16px;
+    width: 16px;
     bottom: 2px;
     left: 2px;
     background-color: var(--nile-slide-toggle-color-indicator);