@aquera/nile-elements 0.0.3-1 → 0.0.3-2

package/package.json

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

package/src/index.ts

@@ -26,3 +26,5 @@ export { NileChip } from './nile-chip';
 export { NileTextarea } from './nile-textarea';
 export { NileDatePicker } from './nile-date-picker';
 export { NileErrorMessage } from './nile-error-message';
+export { NileFormErrorMessage } from './nile-form-error-message';
+export { NileFormHelpText } from './nile-form-help-text';

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

@@ -100,12 +100,16 @@ export const styles = css`
 
   .checkbox__label {
     display: inline-block;
-    color: var(--nile-type-scale-3);
     line-height: 14px;
     font-size: 14px;
     margin-inline-start: 0.5em;
     user-select: none;
     margin-top: 2px;
+    color: var(--nile-colors-dark-900);
+    font-family: Colfax-regular;
+    font-style: normal;
+    font-weight: 400;
+    letter-spacing: 0.2px;
   }
 
   :host([required]) .checkbox__label::after {

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

@@ -82,7 +82,7 @@ export class NileCheckbox extends NileElement {
   @property({ type: Boolean, reflect: true }) checked = false;
 
   /** Label, declared this property for backward compatibility of old component  */
-  @property({ type: Boolean, reflect: true }) label = '';
+  @property({ type: String, reflect: true }) label = '';
 
   /**
    * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
@@ -93,6 +93,10 @@ export class NileCheckbox extends NileElement {
   /** The default value of the form control. Primarily used for resetting the form control. */
   @defaultValue('checked') defaultChecked = false;
 
+  @property({ attribute: 'help-text' }) helpText = '';
+
+  @property({ attribute: 'error-message' }) errorMessage = '';
+
   /**
    * 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
@@ -154,6 +158,9 @@ export class NileCheckbox extends NileElement {
 
 
   render() {
+    const hasHelpText = this.helpText ? true : false;
+    const hasErrorMessage = this.errorMessage ? true : false;
+
     return html`
       <label
         part="base"
@@ -224,6 +231,24 @@ export class NileCheckbox extends NileElement {
           <slot></slot>
         </div>
       </label>
+
+      ${
+          hasHelpText
+            ? html`
+                <nile-form-help-text>${this.helpText}</nile-form-help-text>
+              `
+            : ``
+        }
+
+        ${
+          hasErrorMessage
+            ? html`
+                <nile-form-error-message
+                  >${this.errorMessage}</nile-form-error-message
+                >
+              `
+            : ``
+        }
     `;
   }
 }

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

@@ -37,19 +37,18 @@ export const styles = css`
   .form-control--has-label .form-control__label {
     display: inline-block;
     color: inherit;
-    margin-bottom: 0.125rem;
-  }
-
-  .form-control--has-label.form-control--small .form-control__label {
-    font-size: 0.875rem;
+    margin-bottom: 12px;
+    color: var(--nile-colors-dark-900);
+    font-family: Colfax-regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 14px;
+    letter-spacing: 0.2px;
   }
 
   .form-control--has-label.form-control--medium .form-control__label {
-    font-size: 1rem;
-  }
-
-  .form-control--has-label.form-control--large .form-control__label {
-    font-size: 1.25rem;
+    font-size: 14px;
   }
 
   :host([required]) .form-control--has-label .form-control__label::after {
@@ -92,7 +91,6 @@ export const styles = css`
     background-color: #fff;
     border-radius: 0.25rem;
     border: solid 1px #c7ced4;
-    padding: 5px 10px;
     display: flex;
     flex-wrap: wrap;
     width: 100%;

package/src/nile-chip/nile-chip.ts

@@ -73,9 +73,6 @@ export class NileChip extends NileElement {
   /** Disables the input. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
-  /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
-  @property({ attribute: 'help-text' }) helpText = '';
-
   // Auto-complete options
   @property({ type: Array }) autoCompleteOptions: any[] = [];
 
@@ -85,6 +82,13 @@ export class NileChip extends NileElement {
 
   @property({ type: Boolean }) noWrap: boolean = false;
 
+  @property({ type: Array }) errorIndexes: number[] = [];
+
+  @property({ attribute: 'help-text' }) helpText = '';
+
+  @property({ attribute: 'error-message' }) errorMessage = '';
+
+
   @watch('autoCompleteOptions')
   onAutoCompleteOptionsChanged() {
     this.filteredAutoCompleteOptions = [...this.autoCompleteOptions];
@@ -186,7 +190,9 @@ export class NileChip extends NileElement {
 
     // Check if label and help text are present
     const hasLabel = this.label ? true : !!hasLabelSlot;
-    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+
+    const hasHelpText = this.helpText ? true : false;
+    const hasErrorMessage = this.errorMessage ? true : false;
 
     return html`
       <div
@@ -218,9 +224,12 @@ export class NileChip extends NileElement {
           })}
         >
           ${this.tags.map(
-            tag => html`
+            (tag, index) => html`
               <nile-tag
-                class="nile-chip__tags"
+                class=${classMap({
+                  'nile-chip__tags': true,
+                })}
+                .variant=${this.errorIndexes.includes(index) ? 'error' : 'normal'}
                 @nile-remove=${() => this.handleRemove(tag)}
                 removable
                 pill
@@ -253,6 +262,23 @@ export class NileChip extends NileElement {
             ${this.helpText}
           </slot>
         </div>
+        ${
+          hasHelpText
+            ? html`
+                <nile-form-help-text>${this.helpText}</nile-form-help-text>
+              `
+            : ``
+        }
+
+        ${
+          hasErrorMessage
+            ? html`
+                <nile-form-error-message
+                  >${this.errorMessage}</nile-form-error-message
+                >
+              `
+            : ``
+        }
       </div>
     `;
   }

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

@@ -0,0 +1 @@
+export { NileFormErrorMessage } from './nile-form-error-message';

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

@@ -0,0 +1,35 @@
+/**
+ * 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';
+
+/**
+ * FormErrorMessage CSS
+ */
+export const styles = css`
+  :host {
+  }
+
+  .nile-form-error-message {
+    display: flex;
+    align-items: center;
+    color: var(--nile-colors-red-700);
+    font-family: Colfax-regular;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 12px;
+    letter-spacing: 0.2px;
+    margin-top: 6px;
+  }
+
+  .nile-form-error-message__icon {
+    margin-right: 6px;
+  }
+`;
+
+export default [styles];

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

@@ -0,0 +1,54 @@
+/**
+ * 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-form-error-message.css';
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-form-error-message
+ *
+ */
+@customElement('nile-form-error-message')
+export class NileFormErrorMessage extends LitElement {
+
+	/**
+	 * The styles for FormErrorMessage
+	 * @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="nile-form-error-message">
+       <nile-icon name="info2" size="14" class="nile-form-error-message__icon" color="#A4121C"> </nile-icon> <slot> </slot>
+        </div>
+			`;
+	}
+
+	/* #endregion */
+}
+
+export default NileFormErrorMessage;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-form-error-message': NileFormErrorMessage;
+  }
+}

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

@@ -0,0 +1 @@
+export { NileFormHelpText } from './nile-form-help-text';

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

@@ -0,0 +1,33 @@
+/**
+* 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';
+
+/**
+ * FormHelpText CSS
+ */
+export const styles = css`
+	:host {
+
+	}
+
+  .nile-form-help-text {
+    display: flex;
+    align-items: center;
+    color: var(--nile-colors-dark-500);
+    font-family: Colfax-regular;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 12px;
+    letter-spacing: 0.2px;
+    margin-top: 6px;
+  }
+
+`;
+
+export default [styles];

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

@@ -0,0 +1,54 @@
+/**
+ * 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-form-help-text.css';
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-form-help-text
+ *
+ */
+@customElement('nile-form-help-text')
+export class NileFormHelpText extends LitElement {
+
+	/**
+	 * The styles for FormHelpText
+	 * @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="nile-form-help-text">
+         <slot> </slot>
+        </div>
+			`;
+	}
+
+	/* #endregion */
+}
+
+export default NileFormHelpText;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-form-help-text': NileFormHelpText;
+  }
+}

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

@@ -138,6 +138,7 @@ export class NileIconButton extends NileElement {
           library=${ifDefined(this.library)}
           src=${ifDefined(this.src)}
           aria-hidden="true"
+          size="14"
         ></nile-icon>
       </${tag}>
     `;

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

@@ -28,6 +28,13 @@ export const styles = css`
     display: inline-block;
     color: inherit;
     margin-bottom: 12px;
+    color: var(--nile-colors-dark-900);
+    font-family: Colfax-regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 14px;
+    letter-spacing: 0.2px;
   }
 
   .form-control--has-label.form-control--medium .form-control__label {

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

@@ -5,12 +5,18 @@
  * 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-input.css';
-import '../nile-icon'
+import { styles } from './nile-input.css';
+import '../nile-icon';
 import { classMap } from 'lit/directives/class-map.js';
-import {  query, state } from 'lit/decorators.js';
+import { query, state } from 'lit/decorators.js';
 import { defaultValue } from '../internal/default-value';
 import { FormControlController } from '../internal/form';
 import { HasSlotController } from '../internal/slot';
@@ -20,7 +26,6 @@ import { watch } from '../internal/watch';
 import type { CSSResultGroup } from 'lit';
 import NileElement, { NileFormControl } from '../internal/nile-element';
 
-
 /**
  * Nile icon component.
  *
@@ -32,9 +37,13 @@ export class NileInput extends NileElement implements NileFormControl {
   static styles: CSSResultGroup = styles;
 
   private readonly formControlController = new FormControlController(this, {
-    assumeInteractionOn: ['nile-blur', 'nile-input']
+    assumeInteractionOn: ['nile-blur', 'nile-input'],
   });
-  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
+  private readonly hasSlotController = new HasSlotController(
+    this,
+    'help-text',
+    'label'
+  );
 
   @query('.input__control') input: HTMLInputElement;
 
@@ -81,7 +90,6 @@ export class NileInput extends NileElement implements NileFormControl {
   /** Sets the input to a success state, changing its visual appearance. */
   @property({ type: Boolean }) success = false;
 
-
   /** Draws a pill-style input with rounded edges. */
   @property({ type: Boolean, reflect: true }) pill = false;
 
@@ -107,13 +115,16 @@ export class NileInput extends NileElement implements NileFormControl {
   @property({ type: Boolean, reflect: true }) readonly = false;
 
   /** Adds a button to toggle the password's visibility. Only applies to password types. */
-  @property({ attribute: 'password-toggle', type: Boolean }) passwordToggle = false;
+  @property({ attribute: 'password-toggle', type: Boolean }) passwordToggle =
+    false;
 
   /** Determines whether or not the password is currently visible. Only applies to password input types. */
-  @property({ attribute: 'password-visible', type: Boolean }) passwordVisible = false;
+  @property({ attribute: 'password-visible', type: Boolean }) passwordVisible =
+    false;
 
   /** Hides the browser's built-in increment/decrement spin buttons for number inputs. */
-  @property({ attribute: 'no-spin-buttons', type: Boolean }) noSpinButtons = false;
+  @property({ attribute: 'no-spin-buttons', type: Boolean }) noSpinButtons =
+    false;
 
   /**
    * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
@@ -147,7 +158,13 @@ export class NileInput extends NileElement implements NileFormControl {
   @property() step: number | 'any';
 
   /** Controls whether and how text input is automatically capitalized as it is entered by the user. */
-  @property() autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
+  @property() autocapitalize:
+    | 'off'
+    | 'none'
+    | 'on'
+    | 'sentences'
+    | 'words'
+    | 'characters';
 
   /** Indicates whether the browser's autocorrect feature is on or off. */
   @property() autocorrect: 'off' | 'on';
@@ -162,7 +179,14 @@ export class NileInput extends NileElement implements NileFormControl {
   @property({ type: Boolean }) autofocus: boolean;
 
   /** Used to customize the label or icon of the Enter key on virtual keyboards. */
-  @property() enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+  @property() enterkeyhint:
+    | 'enter'
+    | 'done'
+    | 'go'
+    | 'next'
+    | 'previous'
+    | 'search'
+    | 'send';
 
   /** Enables spell checking on the input. */
   @property({
@@ -170,8 +194,8 @@ export class NileInput extends NileElement implements NileFormControl {
     converter: {
       // Allow "true|false" attribute values but keep the property boolean
       fromAttribute: value => (!value || value === 'false' ? false : true),
-      toAttribute: value => (value ? 'true' : 'false')
-    }
+      toAttribute: value => (value ? 'true' : 'false'),
+    },
   })
   spellcheck = true;
 
@@ -179,7 +203,15 @@ export class NileInput extends NileElement implements NileFormControl {
    * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
    * keyboard on supportive devices.
    */
-  @property() inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+  @property() inputmode:
+    | 'none'
+    | 'text'
+    | 'decimal'
+    | 'numeric'
+    | 'tel'
+    | 'search'
+    | 'email'
+    | 'url';
 
   //
   // NOTE: We use an in-memory input for these getters/setters instead of the one in the template because the properties
@@ -267,7 +299,8 @@ export class NileInput extends NileElement implements NileFormControl {
   }
 
   private handleKeyDown(event: KeyboardEvent) {
-    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+    const hasModifier =
+      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
 
     // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before
     // submitting to allow users to cancel the keydown event if they need to
@@ -331,7 +364,11 @@ export class NileInput extends NileElement implements NileFormControl {
     selectionEnd: number,
     selectionDirection: 'forward' | 'backward' | 'none' = 'none'
   ) {
-    this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
+    this.input.setSelectionRange(
+      selectionStart,
+      selectionEnd,
+      selectionDirection
+    );
   }
 
   /** Replaces a range of text with a new string. */
@@ -397,10 +434,13 @@ export class NileInput extends NileElement implements NileFormControl {
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
     const hasLabel = this.label ? true : !!hasLabelSlot;
-    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    const hasHelpText = this.helpText ? true : false;
     const hasErrorMessage = this.errorMessage ? true : false;
     const hasClearIcon =
-      this.clearable && !this.disabled && !this.readonly && (typeof this.value === 'number' || this.value.length > 0);
+      this.clearable &&
+      !this.disabled &&
+      !this.readonly &&
+      (typeof this.value === 'number' || this.value.length > 0);
 
     return html`
       <div
@@ -411,7 +451,7 @@ export class NileInput extends NileElement implements NileFormControl {
           'form-control--medium': this.size === 'medium',
           'form-control--large': this.size === 'large',
           'form-control--has-label': hasLabel,
-          'form-control--has-help-text': hasHelpText
+          'form-control--has-help-text': hasHelpText,
         })}
       >
         <label
@@ -546,27 +586,20 @@ export class NileInput extends NileElement implements NileFormControl {
           </div>
         </div>
 
-        <slot
-          name="help-text"
-          part="form-control-help-text"
-          id="help-text"
-          class="form-control__help-text"
-          aria-hidden=${hasHelpText ? 'false' : 'true'}
-        >
-          ${this.helpText}
-        </slot>
+        ${
+          hasHelpText
+            ? html`
+                <nile-form-help-text>${this.helpText}</nile-form-help-text>
+              `
+            : ``
+        }
+
         ${
           hasErrorMessage
             ? html`
-                <slot
-                  name="error-message"
-                  part="form-control-error-message"
-                  id="error-message"
-                  class="form-control__error-message"
-                  aria-hidden=${hasErrorMessage ? 'false' : 'true'}
+                <nile-form-error-message
+                  >${this.errorMessage}</nile-form-error-message
                 >
-                  ${this.errorMessage}
-                </slot>
               `
             : ``
         }

package/src/nile-radio-group/nile-radio-group.css.ts

@@ -19,6 +19,14 @@ export default css`
 
   .form-control__label {
     padding: 0;
+    font-size: 14px;
+    color: var(--nile-colors-dark-900);
+    font-family: Colfax-regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 14px;
+    letter-spacing: 0.2px;
   }
 
   .radio-group--required .radio-group__label::after {