@aquera/nile-elements 0.0.69 → 0.0.71

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.69",
+  "version": "0.0.71",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -23,7 +23,8 @@
     "storybook": "tsc && yarn analyze -- --exclude dist && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds -c .storybook/server.mjs\"",
     "storybook:build": "tsc && yarn analyze -- --exclude dist && build-storybook",
     "build:vscode-schema": "wca src --format vscode --outFile vscode-html-custom-data.json",
-    "clean": "rimraf dist/*"
+    "clean": "rimraf dist/*",
+    "postinstall": "node postinstall.js"
   },
   "dependencies": {
     "@aquera/nile": "latest",
@@ -36,7 +37,9 @@
     "@floating-ui/dom": "^1.2.1",
     "composed-offset-position": "^0.0.4",
     "@codemirror/lang-javascript": "6.2.1",
-    "codemirror": "6.0.1"
+    "codemirror": "6.0.1",
+    "chalk": "5.3.0",
+    "figlet": "1.7.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",

package/postinstall.js

@@ -0,0 +1,40 @@
+import figlet from 'figlet';
+import chalk from 'chalk';
+
+const fonts = [
+    'Standard', 'Big', 'Slant', 'Banner', 'Block', 'Bubble',
+    'Digital', 'Doom', 'Lean', 'Mini', 'Script', 'Shadow',
+    'Small', 'Star Wars'
+];
+
+const colorfulText = (text) => {
+    const colors = [
+        chalk.red,
+        chalk.green,
+        chalk.yellow,
+        chalk.blue,
+        chalk.magenta,
+        chalk.cyan,
+    ];
+    return text.split('').map((char, i) => colors[i % colors.length](char)).join('');
+};
+
+const chosenFont = fonts[Math.floor(Math.random() * fonts.length)];
+
+figlet.text('Nile Elements', {
+    font: chosenFont,
+    horizontalLayout: 'default',
+    verticalLayout: 'default',
+    width: 80,
+    whitespaceBreak: true
+}, (err, data) => {
+    if (err) {
+        console.error('Something went wrong...');
+        console.error(err);
+        return;
+    }
+
+    const coloredData = data.split('\n').map(line => colorfulText(line)).join('\n');
+    console.log(coloredData);
+    console.log(chalk.green('Whoooohooooo! Nile has been installed!'));
+});

package/src/index.ts

@@ -61,4 +61,6 @@ export { NileEmptyState } from './nile-empty-state';
 export { NileHero } from './nile-hero';
 export { NileStepperItem } from './nile-stepper-item';
 export { NileStepper } from './nile-stepper';
-export { NileHeroHeader } from './nile-hero-header';
+export { NileHeroHeader } from './nile-hero-header';
+export { NileVerticalStepperItem } from './nile-vertical-stepper-item';
+export { NileFormatDate } from './nile-format-date';

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

@@ -27,16 +27,15 @@ export const styles = css`
     justify-content: center;
     align-items: center;
     box-sizing: border-box;
-    border: 0.5px solid;
-    border-color: rgba(0, 0, 0, 0.08);
   }
 
   .avatar {
     box-sizing: border-box;
-    border: 1px solid var(--nile-colors-neutral-500);
+    border: 0.5px solid var(--nile-colors-neutral-500);
     background-position: 50% 50%;
     background-size: cover;
     background-repeat: no-repeat;
+    overflow: hidden;
   }
 
   .avatar__small {

package/src/nile-avatar/nile-avatar.ts

@@ -42,7 +42,8 @@ export class NileAvatar extends NileElement {
   @property({ type: String, reflect: true }) name = '';
 
   /** Gives the default bg color  to the Avatar */
-  @property({ type: String, reflect: true,attribute: 'bg-color' }) bgColor = '';
+  @property({ type: String, reflect: true, attribute: 'bg-color' }) bgColor =
+    '';
 
   /** Gives the default text color  to the Avatar */
   @property({ type: String, reflect: true, attribute: 'text-color' })
@@ -57,7 +58,8 @@ export class NileAvatar extends NileElement {
     | 'small'
     | 'medium'
     | 'large'
-    | 'extralarge'|'2xl' = 'medium';
+    | 'extralarge'
+    | '2xl' = 'medium';
 
   /** Gives a border radius of 50% to the Avatar */
   @property({ type: Boolean, reflect: true }) isRounded = false;
@@ -93,6 +95,23 @@ export class NileAvatar extends NileElement {
     return multifactor % 5;
   }
 
+  private getDefaultIconSize() {
+    switch (this.size) {
+      case 'small':
+        return '10';
+      case 'medium':
+        return '16';
+      case 'large':
+        return '20';
+      case 'extralarge':
+        return '24';
+      case '2xl':
+        return '28';
+      default:
+        return '16';
+    }
+  }
+
   private handleImageError(event: Event): void {
     const defaultInitials = this.generateInitials(this.name);
     const variant__code = this.generateVariantCode(defaultInitials);
@@ -113,11 +132,17 @@ export class NileAvatar extends NileElement {
         variant__green: variant__code === 4 && !this.bgColor,
       })}
       style="background-color: ${this.bgColor};color:${this
-        .textColor};border-color:${this.borderColor}"
+        .textColor};border: 0.5px solid ${this.borderColor};
+        border-color:${defaultInitials ? 'rgba(0, 0, 0, 0.08)' : '#C7CED4'}"
     >
       ${defaultInitials
         ? defaultInitials
-        : html`<nile-icon name="user" color="grey" size="14"></nile-icon>`}
+        : html`<nile-icon
+            name="user"
+            color="grey"
+            part="error__icon"
+            size="${this.getDefaultIconSize()}"
+          ></nile-icon>`}
     </div>`;
 
     this.isDefaultAvatar = false;
@@ -135,6 +160,7 @@ export class NileAvatar extends NileElement {
               avatar__medium: this.size === 'medium',
               avatar__large: this.size === 'large',
               avatar__extralarge: this.size === 'extralarge',
+              avatar__2xl: this.size === '2xl',
               avatar__rounded: this.isRounded,
             })}
             style="	background-image: url(${this

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

@@ -28,7 +28,7 @@ export const styles = css`
   :host {
     --border-color: var(--nile-card-color-border);
     --border-radius: 8px;
-    --border-width: 1px;
+    --border-width: 0.5px;
     --padding: 18px;
     display: inline-block;
   }
@@ -36,11 +36,24 @@ export const styles = css`
   .card {
     display: flex;
     flex-direction: column;
+    justify-items: strecth;
     background-color: var(--nile-colors-white-base);
     border: solid var(--border-width) var(--border-color);
     border-radius: var(--border-radius);
-    box-shadow: var(--nile-card-box-shadow) rgba(16, 24, 40, 0.05);
-    padding: var(--nile-type-scale-4);
+    min-width: 273px;
+    max-width: 350px;
+    overflow: hidden;
+  }
+
+  .body__wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px 16px 0 16px;
+  }
+
+  .card__header {
+    display: block;
   }
 
   .card__body {
@@ -48,8 +61,14 @@ export const styles = css`
   }
 
   .card__footer {
+    margin-top: 12px;
     display: block;
-    margin-top: var(--nile-type-scale-4);
+    box-sizing: border-box;
+    align-content: center;
+    align-items: center;
+    padding: 8px 16px;
+    background-color: #f9fafb;
+    height: 40px;
   }
 
   .card:not(.card--has-footer) .card__footer {

package/src/nile-card/nile-card.ts

@@ -5,15 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
+import {
+  LitElement,
+  html,
+  property,
+  CSSResultArray,
+  TemplateResult,
+} from 'lit-element';
 import { customElement } from 'lit/decorators.js';
-import {styles} from './nile-card.css';
+import { styles } from './nile-card.css';
 import { classMap } from 'lit/directives/class-map.js';
 import { HasSlotController } from '../internal/slot';
 import NileElements from '../internal/nile-element';
 import { CSSResultGroup } from 'lit';
 
-
 /**
  * Nile icon component.
  *
@@ -22,7 +27,6 @@ import { CSSResultGroup } from 'lit';
  */
 @customElement('nile-card')
 export class NileCard extends NileElements {
-
   static styles: CSSResultGroup = styles;
 
   private readonly hasSlotController = new HasSlotController(this, 'footer');
@@ -36,15 +40,22 @@ export class NileCard extends NileElements {
           'card--has-footer': this.hasSlotController.test('footer'),
         })}
       >
-        <slot part="body" class="card__body"></slot>
-        <slot name="footer" part="footer" ?hidden="${!this.hasSlotController.test('footer')}"  class="card__footer"></slot>
+        <div class="body__wrapper" part="body__wrapper">
+          <slot name="header" part="header" class="card__header"></slot>
+          <slot part="body" class="card__body"></slot>
+        </div>
+
+        <slot
+          name="footer"
+          part="footer"
+          ?hidden="${!this.hasSlotController.test('footer')}"
+          class="card__footer"
+        ></slot>
       </div>
-      
     `;
   }
 }
 
-
 export default NileCard;
 
 declare global {

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

@@ -29,10 +29,8 @@ export const styles = css`
     cursor: pointer;
   }
 
-  .checkbox--medium {
-    padding-top: 2px;
-    --toggle-size: var(--nile-type-scale-3);
-    font-size: var(--nile-type-scale-3);
+  .checkbox--only__subtitle{
+    align-items: center;
   }
 
   .checkbox__control {

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

@@ -72,7 +72,7 @@ describe('NileCheckbox', () => {
     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('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');
@@ -143,4 +143,46 @@ describe('NileCheckbox', () => {
     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

@@ -9,6 +9,7 @@ import {
   LitElement,
   html,
   property,
+  nothing,
   CSSResultArray,
   TemplateResult,
 } from 'lit-element';
@@ -35,7 +36,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.
@@ -85,8 +85,7 @@ export class NileCheckbox extends NileElement {
   @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 =
-    '';
+  @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
@@ -113,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;
@@ -204,30 +199,9 @@ export class NileCheckbox extends NileElement {
           'checkbox--checked': this.checked,
           'checkbox--disabled': this.disabled,
           'checkbox--focused': this.hasFocus,
-          'checkbox--indeterminate': this.indeterminate,
-          'checkbox--medium': this.size === 'medium',
+          'checkbox--indeterminate': this.indeterminate
         })}
       >
-        <input
-          class="checkbox__input"
-          type="checkbox"
-          title=${
-            this
-              .title /* An empty title prevents browser validation tooltips from appearing on hover */
-          }
-          name=${this.name}
-          value=${ifDefined(this.value)}
-          .indeterminate=${live(this.indeterminate)}
-          .checked=${live(this.checked)}
-          .disabled=${this.disabled}
-          .required=${this.required}
-          aria-checked=${this.checked ? 'true' : 'false'}
-          @click=${this.handleClick}
-          @input=${this.handleInput}
-          @blur=${this.handleBlur}
-          @focus=${this.handleFocus}
-        />
-
         <span
           part="control${this.checked ? ' control--checked' : ''}${this
             .indeterminate
@@ -235,6 +209,23 @@ export class NileCheckbox extends NileElement {
             : ''}"
           class="checkbox__control"
         >
+          <!-- An empty title prevents browser validation tooltips from appearing on hover -->
+          <input
+            class="checkbox__input"
+            type="checkbox"
+            title=${ this.title }
+            name=${this.name}
+            value=${ifDefined(this.value)}
+            .indeterminate=${live(this.indeterminate)}
+            .checked=${live(this.checked)}
+            .disabled=${this.disabled}
+            .required=${this.required}
+            aria-checked=${this.checked ? 'true' : 'false'}
+            @click=${this.handleClick}
+            @input=${this.handleInput}
+            @blur=${this.handleBlur}
+            @focus=${this.handleFocus}
+          />
           ${this.checked
             ? html`
                 <nile-icon
@@ -261,9 +252,9 @@ export class NileCheckbox extends NileElement {
             : ''}
         </span>
 
-        <div part="label" class="checkbox__label">
+        <div part="label" class="checkbox__label" style="${!this.label && !this.subLabel?'margin-left:0;':''}">
           ${this.label ? html`<span class="checkbox__label__text">${this.label}</span>` : ``}
-          ${this.label && this.subLabel ? html`<span class="checkbox__sublabel__text">${this.subLabel}</span>` : ``}
+          ${this.subLabel ? html`<span class="checkbox__sublabel__text">${this.subLabel}</span>` : ``}
           <slot></slot>
         </div>
       </label>
@@ -277,14 +268,10 @@ export class NileCheckbox extends NileElement {
               ></nile-icon>
             </nile-tooltip>
           `
-        : ``}
+        : nothing}
       ${hasErrorMessage
-        ? html`
-            <nile-form-error-message
-              >${this.errorMessage}</nile-form-error-message
-            >
-          `
-        : ``}
+        ? html`<nile-form-error-message>${this.errorMessage}</nile-form-error-message>`
+        : nothing}
     `;
   }
 }

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;
+  }
+}