@aquera/nile-elements 0.0.68 → 0.0.70

package/src/nile-checkbox/nile-checkbox.test.ts

@@ -0,0 +1,188 @@
+import { fixture, html, expect, oneEvent } from '@open-wc/testing';
+import './nile-checkbox';
+import { NileCheckbox } from './nile-checkbox';
+
+describe('NileCheckbox', () => {
+  it('renders correctly with default properties', async () => {
+    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);
+    expect(el).shadowDom.to.equalSnapshot();
+  });
+
+  it('toggles checked state on click', async () => {
+    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);
+    const input = el.shadowRoot!.querySelector('input[type="checkbox"]')! as HTMLInputElement;
+
+    input.click();
+    expect(el.checked).to.be.true;
+    input.click();
+    expect(el.checked).to.be.false;
+  });
+
+  it('emits nile-change event on click', async () => {
+    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);
+    const input = el.shadowRoot!.querySelector('input[type="checkbox"]')! as HTMLInputElement;
+
+    setTimeout(() => input.click());
+    const event = await oneEvent(el, 'valueChange');
+    expect(event.detail.checked).to.be.true;
+  });
+
+  it('handles focus and blur events', async () => {
+    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);
+    const input = el.shadowRoot!.querySelector('input[type="checkbox"]')! as HTMLInputElement;
+
+    // Focus the input and wait for the focus event
+    setTimeout(() => input.focus());
+    const focusEvent = await oneEvent(el, 'focus');
+    expect(focusEvent).to.exist;
+
+    // Blur the input and wait for the blur event
+    setTimeout(() => input.blur());
+    const blurEvent = await oneEvent(el, 'blur');
+    expect(blurEvent).to.exist;
+  });
+
+  it('handles indeterminate state', async () => {
+    const el = await fixture<NileCheckbox>(html`<nile-checkbox indeterminate></nile-checkbox>`);
+    const input = el.shadowRoot!.querySelector('input[type="checkbox"]')! as HTMLInputElement;
+
+    expect(input.indeterminate).to.be.true;
+
+    el.checked = true;
+    el.indeterminate = false;
+    await el.updateComplete;
+    expect(input.indeterminate).to.be.false;
+    expect(input.checked).to.be.true;
+  });
+
+  it('reflects properties to attributes', async () => {
+    const el = await fixture<NileCheckbox>(html`
+      <nile-checkbox
+        name="test-name"
+        title="test-title"
+        disabled
+        required
+        label="test-label"
+        sub-label="test-sublabel"
+        help-text="test-help"
+        error-message="test-error"
+      ></nile-checkbox>
+    `);
+
+    expect(el.getAttribute('name')).to.equal('test-name');
+    expect(el.getAttribute('title')).to.equal('test-title');
+    expect(el.getAttribute('disabled')).to.equal('');
+    expect(el.getAttribute('required')).to.equal('');
+    expect(el.getAttribute('label')).to.equal('test-label');
+    expect(el.getAttribute('sub-label')).to.equal('test-sublabel');
+    expect(el.getAttribute('help-text')).to.equal('test-help');
+    expect(el.getAttribute('error-message')).to.equal('test-error');
+  });
+
+  it('displays help text when showHelpText is true', async () => {
+    const el = await fixture<NileCheckbox>(html`<nile-checkbox help-text="test-help"></nile-checkbox>`);
+    el.showHelpText = true;
+    await el.updateComplete;
+
+    const helpTextIcon = el.shadowRoot!.querySelector('.checkbox__helptext-icon');
+    expect(helpTextIcon).to.exist;
+  });
+
+  it('updates host class based on helpText', async () => {
+    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);
+    el.helpText = 'test-help';
+    await el.updateComplete;
+
+    expect(el.classList.contains('full-width')).to.be.true;
+
+    el.helpText = '';
+    await el.updateComplete;
+
+    expect(el.classList.contains('full-width')).to.be.false;
+  });
+
+  it('emits custom events on connected and disconnected', async () => {
+    const el = document.createElement('nile-checkbox');
+
+    // Wait for the connected event
+    const initEventPromise = oneEvent(el, 'nile-init');
+    document.body.appendChild(el);
+    const initEvent = await initEventPromise;
+    expect(initEvent).to.exist;
+
+    // Wait for the disconnected event
+    const destroyEventPromise = oneEvent(el, 'nile-destroy');
+    document.body.removeChild(el);
+    const destroyEvent = await destroyEventPromise;
+    expect(destroyEvent).to.exist;
+  });
+
+  it('handles required attribute', async () => {
+    const el = await fixture<NileCheckbox>(html`<nile-checkbox required></nile-checkbox>`);
+    const input = el.shadowRoot!.querySelector('input[type="checkbox"]')! as HTMLInputElement;
+
+    expect(input.required).to.be.true;
+  });
+
+  it('simulates click using click method', async () => {
+    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);
+    el.click();
+    expect(el.checked).to.be.true;
+  });
+
+  it('sets and removes focus using focus and blur methods', async () => {
+    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);
+
+    // Call the focus method and wait for the focus event
+    setTimeout(() => el.focus());
+    const focusEvent = await oneEvent(el, 'focus');
+    expect(focusEvent).to.exist;
+
+    // Call the blur method and wait for the blur event
+    setTimeout(() => el.blur());
+    const blurEvent = await oneEvent(el, 'blur');
+    expect(blurEvent).to.exist;
+  });
+
+  it('reflects checked attribute to property', async () => {
+    const el = await fixture<NileCheckbox>(html`<nile-checkbox checked></nile-checkbox>`);
+    expect(el.checked).to.be.true;
+  });
+
+  it('reflects indeterminate attribute to property', async () => {
+    const el = await fixture<NileCheckbox>(html`<nile-checkbox indeterminate></nile-checkbox>`);
+    expect(el.indeterminate).to.be.true;
+  });
+
+  it('associates form using form attribute', async () => {
+    const el = await fixture(html`
+      <div>
+        <form id="test-form"></form>
+        <nile-checkbox form="test-form"></nile-checkbox>
+      </div>
+    `);
+    const checkbox = el.querySelector('nile-checkbox') as NileCheckbox;
+    expect(checkbox).to.not.be.null;
+    expect(checkbox.getAttribute('form')).to.equal('test-form');
+  });
+
+  it('displays and hides help text correctly', async () => {
+    const el = await fixture<NileCheckbox>(html`<nile-checkbox help-text="test-help"></nile-checkbox>`);
+
+    // Initially, help text should not be shown
+    expect(el.showHelpText).to.be.false;
+
+    // Show the help text
+    el.showHelpText = true;
+    await el.updateComplete;
+    let helpTextIcon = el.shadowRoot!.querySelector('.checkbox__helptext-icon');
+    expect(helpTextIcon).to.exist;
+
+    // Hide the help text
+    el.showHelpText = false;
+    await el.updateComplete;
+    helpTextIcon = el.shadowRoot!.querySelector('.checkbox__helptext-icon');
+    expect(helpTextIcon).to.be.exist;
+  });
+});
+

package/src/nile-checkbox/nile-checkbox.ts

@@ -35,7 +35,6 @@ import type { CSSResultGroup } from 'lit';
  * @event nile-change - Emitted when the checked state changes.
  * @event nile-focus - Emitted when the checkbox gains focus.
  * @event nile-input - Emitted when the checkbox receives input.
- * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
  *
  * @csspart base - The component's base wrapper.
  * @csspart control - The square container that wraps the checkbox's checked state.
@@ -84,6 +83,10 @@ export class NileCheckbox extends NileElement {
   /** Label, declared this property for backward compatibility of old component  */
   @property({ type: String, reflect: true }) label = '';
 
+  /** Sublabel, declared this property for backward compatibility of old component  */
+  @property({ type: String, reflect: true, attribute: 'sub-label' }) subLabel =
+    '';
+
   /**
    * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
    * all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
@@ -99,7 +102,6 @@ export class NileCheckbox extends NileElement {
 
   @property({ type: Boolean }) showHelpText = false;
 
-
   /**
    * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
    * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
@@ -110,10 +112,6 @@ export class NileCheckbox extends NileElement {
   /** Makes the checkbox a required field. */
   @property({ type: Boolean, reflect: true }) required = false;
 
-  private toggleHelpText() {
-    this.showHelpText = !this.showHelpText;
-  }
-
   private handleClick() {
     this.checked = !this.checked;
     this.indeterminate = false;
@@ -259,7 +257,8 @@ export class NileCheckbox extends NileElement {
         </span>
 
         <div part="label" class="checkbox__label">
-          ${typeof this.label === 'boolean' ? '' : this.label}
+          ${this.label ? html`<span class="checkbox__label__text">${this.label}</span>` : ``}
+          ${this.label && this.subLabel ? html`<span class="checkbox__sublabel__text">${this.subLabel}</span>` : ``}
           <slot></slot>
         </div>
       </label>
@@ -274,7 +273,6 @@ export class NileCheckbox extends NileElement {
             </nile-tooltip>
           `
         : ``}
-
       ${hasErrorMessage
         ? html`
             <nile-form-error-message

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

@@ -13,57 +13,95 @@ import { css } from 'lit-element';
 export const styles = css`
   :host {
     display:inline-flex;
-    min-width:300px;
-    max-width:512px;
+    min-width:var(--nile-empty-state-max-width);
+    max-width:var(--nile-empty-state-min-width);
     width:100%;
   }
 
   .empty-state--sm {
     --nile-es-text-size:16px;
+    --nile-es-text-line-height:24px;
     --nile-es-subtext-size:14px;
+    --nile-es-subtext-line-height:20px;
+    
     --nile-es-icon-size:48px;
-    --es-flat-option-border-radius:5px;
+    --nile-es-flat-option-border-radius:5px;
     --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;
   }
 
   .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-icon-size:48px;
-    --es-flat-option-border-radius:5px;
+    --nile-es-flat-option-border-radius:5px;
     --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);
   }
 
   .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-icon-size:56px;
-    --es-flat-option-border-radius:10px;
+    --nile-es-flat-option-border-radius:10px;
     --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)
   }
 
   .empty-state {
-    padding:1rem;
     min-width:300px;
     max-width:512px;
     width:100%;
     height:max-content;
     display:flex;
     flex-direction:column;
-    row-gap:2rem;
+    row-gap:var(--nile-es-gap);
   }
 
   .empty-state__body {
-    row-gap:5px;
     display:flex;
     flex-direction:column;
     justify-content:space-between;
     align-items:center;
+    row-gap:var(--nile-es-body-gap)
   }
 
   .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);
@@ -72,19 +110,15 @@ export const styles = css`
     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));
+    top:calc(62.5% - 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;
+    width: 104px;
+    height: 104px;
     border-radius: 50%;
     display:flex;
     justify-content:center;
@@ -92,13 +126,12 @@ export const styles = css`
   }
 
   .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);
+    border-radius: var(--nile-es-flat-option-border-radius);
 
     background-color: white;
     display: grid;
@@ -106,25 +139,33 @@ export const styles = css`
     border: 1px solid #EAECF0;
   }
 
+  .empty__state__text-section {
+    display:flex;
+    flex-direction:column;
+    gap:var(--nile-es-text-gap);
+    max-width:80%;
+  }
+
   .empty-state__text {
     font-size: var(--nile-es-text-size);
     font-weight: 600;
-    line-height: 28px;
+    line-height: var(--nile-es-text-line-height);
     text-align: center;
+    font-style: normal;
   }
 
   .empty-state__subtext {
     font-size: var(--nile-es-subtext-size);
     font-weight: 400;
-    line-height: 20px;
+    line-height: var(--nile-es-subtext-line-height);
     text-align: center;
     color:#475467;
+    font-style: normal;
   }
 
   .empty-state-actions {
     display:flex;
     justify-content:center;
-    gap:1rem;
   }
 `;
 

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

@@ -9,7 +9,6 @@ import { state, html, nothing, property, CSSResultArray, TemplateResult } from '
 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';
 
 /**
@@ -28,10 +27,6 @@ export class NileEmptyState extends NileElement {
   public static get styles(): CSSResultArray {
     return [styles];
   }
-  private readonly hasSlotController = new HasSlotController(
-    this,
-    'actions'
-  );
 
   @property() size: 'sm' | 'md' | 'lg' = 'md';
 
@@ -41,6 +36,7 @@ export class NileEmptyState extends NileElement {
     | 'tonal' = 'tonal';
 
   @property() icon: string = 'error';
+  @property({type:Boolean}) grayscale: boolean = false;
 
   @property() text: String = 'Empty State';
   @property() subText: String = 'No Data';
@@ -55,7 +51,6 @@ export class NileEmptyState extends NileElement {
    * @slot This is a slot test
    */
   public render(): TemplateResult {
-    const hasContentSlot = this.hasSlotController.test('content');
     return html`
 		<div class="${classMap({
       'empty-state': true,
@@ -63,39 +58,38 @@ export class NileEmptyState extends NileElement {
       '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 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>`: nothing
         }
-				</div>`: nothing
-      }
 				
-			${this.variant == 'tonal' ? html`
+			  ${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`
+			  ${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 class="empty__state__text-section">
+          <div class="empty-state__text">${this.text}</div>
+          <div class="empty-state__subtext">${this.subText}</div>
+        </div>
 			</div>
 
 			<div class="empty-state-actions">

package/src/nile-format-date/index.ts

@@ -0,0 +1 @@
+export { NileFormatDate } from './nile-format-date';

package/src/nile-format-date/nile-format-date.css.ts

@@ -0,0 +1,19 @@
+/**
+* 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';
+
+/**
+ * FormatDate CSS
+ */
+export const styles = css`
+	:host {
+
+	}
+`;
+
+export default [styles];

package/src/nile-format-date/nile-format-date.ts

@@ -0,0 +1,133 @@
+/**
+ * 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-format-date.css';
+import NileElement from '../internal/nile-element';
+
+
+/**
+ * Nile format-date component.
+ *
+ * @tag nile-format-date
+ *
+ */
+@customElement('nile-format-date')
+export class NileFormatDate extends NileElement {
+  /**
+   * The styles for nile-format-date
+   * @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];
+  }
+
+  /**
+   * The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly
+   * recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format
+   * in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).
+   */
+  @property() date: Date | string = new Date();
+
+  /** The format for displaying the weekday. */
+  @property() weekday: 'narrow' | 'short' | 'long';
+
+  /** The format for displaying the era. */
+  @property() era: 'narrow' | 'short' | 'long';
+
+  /** The format for displaying the year. */
+  @property() year: 'numeric' | '2-digit';
+
+  /** The format for displaying the month. */
+  @property() month: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long';
+
+  /** The format for displaying the day. */
+  @property() day: 'numeric' | '2-digit';
+
+  /** The format for displaying the hour. */
+  @property() hour: 'numeric' | '2-digit';
+
+  /** The format for displaying the minute. */
+  @property() minute: 'numeric' | '2-digit';
+
+  /** The format for displaying the second. */
+  @property() second: 'numeric' | '2-digit';
+
+  /** The format for displaying the time. */
+  @property({ attribute: 'time-zone-name' }) timeZoneName: 'short' | 'long';
+
+  /** The time zone to express the time in. */
+  @property({ attribute: 'time-zone' }) timeZone: string;
+
+  /** The format for displaying the hour. */
+  @property({ attribute: 'hour-format' }) hourFormat: 'auto' | '12' | '24' =
+    'auto';
+
+  /** The separator for the date format. */
+  @property({ attribute: 'date-separator' }) dateSeparator: '-' | '/' = '-';
+
+  formatDate(dateToFormat: Date | string, options?: Intl.DateTimeFormatOptions): string {
+    dateToFormat = new Date(dateToFormat);
+    const formatter = new Intl.DateTimeFormat('en-GB', options);
+    const parts = formatter.formatToParts(dateToFormat);
+    const formattedDate = parts.map(({ type, value }) => {
+      if (type === 'day' || type === 'month' || type === 'year') {
+        return value;
+      }
+      if (type === 'literal' && value === '/') {
+        return this.dateSeparator;
+      }
+      return value;
+    }).join('');
+    return formattedDate;
+  }
+
+  // formatDate(dateToFormat: Date | string, options?: Intl.DateTimeFormatOptions): string {
+  //   dateToFormat = new Date(dateToFormat);
+  //   return new Intl.DateTimeFormat('en-GB', options).format(dateToFormat);
+  // }
+
+
+  render() {
+    const date = new Date(this.date);
+    const hour12 =
+      this.hourFormat === 'auto' ? undefined : this.hourFormat === '12';
+
+    // Check for an invalid date
+    if (isNaN(date.getMilliseconds())) {
+      return undefined;
+    }
+
+    return html`
+      <time datetime=${date.toISOString()}>
+        ${this.formatDate(date, {
+          weekday: this.weekday,
+          era: this.era,
+          year: this.year,
+          month: this.month,
+          day: this.day,
+          hour: this.hour,
+          minute: this.minute,
+          second: this.second,
+          timeZoneName: this.timeZoneName,
+          timeZone: this.timeZone,
+          hour12: hour12,
+        })}
+      </time>
+    `;
+  }
+}
+	/* #endregion */
+
+export default NileFormatDate;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-format-date': NileFormatDate;
+  }
+}