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

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-loader/nile-loader.css.ts

@@ -9,7 +9,6 @@ export default css`
     box-shadow: 0 1px 1px -1px var(--nile-colors-blue-500);
     box-sizing: border-box;
     animation: rotation 0.5s linear infinite;
-    padding: 30px;
   }
 
   @keyframes rotation {

package/src/nile-loader/nile-loader.ts

@@ -6,8 +6,8 @@ import styles from './nile-loader.css';
 @customElement('nile-loader')
 export class NileLoader extends LitElement {
 
-  @property({ type: String }) height = '50';
-  @property({ type: String }) width = '50';
+  @property({ type: String }) height = '80';
+  @property({ type: String }) width = '80';
   @property({ type: String }) position = 'absolute';
   @property({ type: String }) margin = '';
 

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

@@ -29,11 +29,15 @@ export const styles = css`
     line-height: 1.8;
     letter-spacing: normal;
     color: hsl(240 5.3% 26.1%);
-    padding: 0.5rem 1rem 0.5rem 0.5rem;
+    padding: 6px 0;
     transition: 150ms fill;
     cursor: pointer;
   }
 
+  .option--single-select {
+    padding: 9px 12px;
+  }
+
   .option--hover:not(.option--current):not(.option--disabled) {
     background-color: rgba(0, 94, 166, 0.1);
     color: hsl(0, 0%, 0%);
@@ -86,6 +90,12 @@ export const styles = css`
     margin-inline-start: 0.5rem;
   }
 
+  .option--checkbox{
+    pointer-events: none;
+    margin-left: 12px;
+    margin-right: 12px;
+  }
+
   @media (forced-colors: active) {
     :host(:hover:not([aria-disabled='true'])) .option {
       outline: dashed 1px SelectedItem;

package/src/nile-option/nile-option.ts

@@ -14,6 +14,7 @@ import { html } from 'lit';
 import { watch } from '../internal/watch';
 import type { CSSResultGroup } from 'lit';
 import NileElement from '../internal/nile-element';
+import '../nile-checkbox';
 
 /**
  * Nile icon component.
@@ -51,6 +52,7 @@ export class NileOption extends NileElement {
   @state() selected = false; // the option is selected and has aria-selected="true"
   @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging
   @state() hidden = false; // the option is hidden
+  @state() isMultipleSelect = false;
 
   /**
    * The option's value. When selected, the containing form control will receive this value. The value must be unique
@@ -66,6 +68,20 @@ export class NileOption extends NileElement {
     super.connectedCallback();
     this.setAttribute('role', 'option');
     this.setAttribute('aria-selected', 'false');
+
+    // Find the closest parent 'nile-select' element
+    const parentSelect = this.closest('nile-select');
+
+    // Check if the parent has the 'multiple' attribute
+    if (parentSelect && parentSelect.hasAttribute('multiple')) {
+      let multipleValue = parentSelect.getAttribute('multiple');
+      if (multipleValue !== 'false') {
+        if(multipleValue === ''){
+          multipleValue = 'true';
+        }
+        this.isMultipleSelect = Boolean(multipleValue);
+      }
+    }
   }
 
   private handleDefaultSlotChange() {
@@ -135,21 +151,18 @@ export class NileOption extends NileElement {
             part="base"
             class=${classMap({
               option: true,
-              'option--current': this.current,
+              'option--single-select': !this.isMultipleSelect,
+              'option--current': this.selected && !this.isMultipleSelect,
               'option--disabled': this.disabled,
-              'option--selected': this.selected,
+              'option--selected': this.selected && !this.isMultipleSelect,
               'option--hover': this.hasHover,
             })}
             @mouseenter=${this.handleMouseEnter}
             @mouseleave=${this.handleMouseLeave}
           >
-            <nile-icon
-              part="checked-icon"
-              class="option__check"
-              name="tick"
-              color=${this.current ? '#005EA6' : ''}
-              aria-hidden="true"
-            ></nile-icon>
+
+          ${this.isMultipleSelect ? html`<nile-checkbox class="option--checkbox" .checked=${this.selected}></nile-checkbox>` : ''}
+
             <slot part="prefix" name="prefix" class="option__prefix"></slot>
             <slot
               part="label"

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 {

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

@@ -34,7 +34,7 @@ export class NileRadioGroup extends NileElement {
   @query('slot:not([name])') defaultSlot: HTMLSlotElement;
 
   @state() private hasButtonGroup = false;
-  @state() private errorMessage = '';
+
   @state() defaultValue = '';
 
   /**
@@ -43,9 +43,6 @@ export class NileRadioGroup extends NileElement {
    */
   @property() label = '';
 
-  /** The radio groups's help text. If you need to display HTML, use the `help-text` slot instead. */
-  @property({ attribute: 'help-text' }) helpText = '';
-
   /** The name of the radio group, submitted as a name/value pair with form data. */
   @property() name = 'option';
 
@@ -69,6 +66,10 @@ export class NileRadioGroup extends NileElement {
   /** Used to disabled or not */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
+  @property({ attribute: 'help-text' }) helpText = '';
+
+  @property({ attribute: 'error-message' }) errorMessage = '';
+
   connectedCallback() {
     super.connectedCallback();
     this.defaultValue = this.value;
@@ -203,7 +204,8 @@ export class NileRadioGroup extends NileElement {
     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 defaultSlot = html`
       <slot
@@ -241,7 +243,6 @@ export class NileRadioGroup extends NileElement {
 
         <div part="form-control-input" class="form-control-input">
           <div class="visually-hidden">
-            <div id="error-message" aria-live="assertive">${this.errorMessage}</div>
             <label class="radio-group__validation">
               <input
                 type="text"
@@ -261,15 +262,24 @@ export class NileRadioGroup extends NileElement {
             <div class="${this.labelInline ? `form-control--inline-radio`:``}"> ${defaultSlot}</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`
+                <nile-form-error-message
+                  >${this.errorMessage}</nile-form-error-message
+                >
+              `
+            : ``
+        }
+
       </fieldset>
     `;
   }

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

@@ -36,16 +36,20 @@ export const styles = css`
   /* Label */
   .form-control--has-label .form-control__label {
     display: inline-block;
-    color: #333333;
-    margin-bottom: 0.75rem;
+    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;
+    font-size: 14px;
   }
 
-
   :host([required]) .form-control--has-label .form-control__label::after {
     content: '*';
     margin-inline-start: -2px;
@@ -63,7 +67,6 @@ export const styles = css`
     font-size: 0.875rem;
   }
 
-
   .form-control--has-help-text.form-control--radio-group
     .form-control__help-text {
     margin-top: 0.25rem;
@@ -127,6 +130,11 @@ export const styles = css`
     padding: 0;
     margin: 0;
     -webkit-appearance: none;
+    font-family: var(--nile-font-family-serif);
+  }
+
+  .select__display-input::placeholder {
+    font-family: var(--nile-font-family-serif);
   }
 
   .select:not(.select--disabled):hover .select__display-input {
@@ -171,11 +179,14 @@ export const styles = css`
   }
 
   .select__tags-count {
-    position: absolute;
-    right: 0;
-    border: 1px solid rgb(169, 218, 218);
-    border-radius: 0.25rem;
-    margin-right: 30px;
+    color: #005ea6;
+    font-family: Colfax-regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+    margin: 6px;
   }
 
   .select__tags-count-clearable {
@@ -197,6 +208,11 @@ export const styles = css`
     border: solid 1px #cccccc;
   }
 
+  .select--standard .select__combobox:hover {
+    border: 1px solid #000;
+    background: #fff;
+  }
+
   .select--standard.select--disabled .select__combobox {
     background-color: #f4f4f4;
     border-color: #cccccc;
@@ -209,8 +225,18 @@ export const styles = css`
   .select--standard:not(.select--disabled).select--open .select__combobox,
   .select--standard:not(.select--disabled).select--focused .select__combobox {
     background-color: #f4f4f4;
-    border-color: #0059ff;
-    box-shadow: 0 0 0 3px rgba(0, 89, 255, 0.4);
+  }
+
+  .select--warning .select__combobox {
+    border-color: var(--nile-colors-yellow-500);
+  }
+
+  .select--error .select__combobox {
+    border-color: #e5434d;
+  }
+
+  .select--success {
+    border-color: #43e5c0;
   }
 
   /* Filled selects */
@@ -284,7 +310,7 @@ export const styles = css`
     align-items: center;
     justify-content: center;
     font-size: inherit;
-    color: #005EA6;
+    color: #005ea6;
     border: none;
     background: none;
     padding: 0;
@@ -320,7 +346,6 @@ export const styles = css`
     position: relative;
     font-size: 1rem;
     font-weight: 400;
-    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
     background: #ffffff;
     border: solid 1px #cccccc;
     border-radius: 0.25rem;
@@ -333,13 +358,11 @@ export const styles = css`
     max-height: var(--auto-size-available-height);
   }
 
-  .select__options{
+  .select__options {
     padding-top: 10px;
   }
 
-  .select__options{
-    padding: 5px;
-    margin: 4px;
+  .select__options {
     font-size: 14px;
     color: rgb(133, 129, 129);
   }
@@ -377,10 +400,40 @@ export const styles = css`
     display: flex;
     flex-direction: row;
     align-items: flex-start;
-    padding: 8px 8px 16px;
+    padding: 8px 12px 16px;
     gap: 12px;
     justify-content: space-between;
   }
+
+  .tag__prefix[slot='prefix'] {
+    height: 14px;
+    display: inline-block;
+    overflow: hidden;
+  }
+
+  .tag__prefix[slot='prefix'] img {
+    max-height: 100%;
+  }
+
+  .select__loader {
+    width: 100%;
+    text-align: center;
+    display: block;
+  }
+
+  .select__loader--icon {
+    margin-top: 20px;
+    animation: spin 0.6s linear infinite;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 `;
 
 export default [styles];