@aquera/nile-elements 0.0.30 → 0.0.31

package/package.json

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

package/src/index.ts

@@ -39,3 +39,4 @@ export { NileErrorNotification } from './nile-error-notification';
 export { NileTabGroup } from './nile-tab-group';
 export { NileTab } from './nile-tab';
 export { NileTabPanel } from './nile-tab-panel';
+export { NileToast } from './nile-toast';

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

@@ -121,7 +121,7 @@ export const styles = css`
 
   .button--standard.button--primary:active:not(.button--disabled) {
     background-color: var(--nile-colors-button-primary-pressed);
-    border-color: var(--nile-colors-button-primary-pressed);
+    border-color: var(--nile-colors-button-primary-pressed-border);
     color: var(--nile-colors-button-primary-text);
   }
 
@@ -184,7 +184,7 @@ export const styles = css`
 
   .button--standard.button--caution:active:not(.button--disabled) {
     background-color: var(--nile-colors-button-caution-pressed);
-    border-color: var(--nile-colors-button-caution-pressed);
+    border-color: var(--nile-colors-button-caution-pressed-border);
     color: var(--nile-colors-button-caution-text);
   }
 

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

@@ -31,6 +31,14 @@ export const styles = css`
     gap: 10px;
   }
 
+  .nile-button-toggle:hover {
+    background: var(--nile-colors-neutral-100);
+  }
+
+  .nile-button-toggle:active {
+    background: #E5E9EB;
+  }
+
   .nile-button-toggle__initial {
     border-radius: 4px 0 0 4px;
   }
@@ -50,6 +58,10 @@ export const styles = css`
     background-color: #c7ced4;
   }
 
+  .nile-button-toggle__active:hover {
+    background-color: #c7ced4;
+  }
+
   .nile-button-toggle__disabled {
     cursor: not-allowed;
   }

package/src/nile-calendar/nile-calendar.ts

@@ -660,11 +660,7 @@ export class NileCalendar extends NileElement {
               @nile-change=${this.handleTimeZoneChange}
             >
               <nile-option value="local">Local Time Zone</nile-option>
-              ${timeZones.map(
-                timeZone => html`
-                  <nile-option value="${timeZone}">${timeZone}</nile-option>
-                `
-              )}
+              <nile-option value="UTC">UTC</nile-option>
             </nile-select>
           </div>
         </div>

package/src/nile-dialog/nile-dialog.ts

@@ -139,12 +139,6 @@ export class NileDialog extends NileElement {
       document.head.insertAdjacentHTML('beforeend', this.drawerStyle);
       lockBodyScrolling(this);
 
-      // When the dialog is shown, Safari will attempt to set focus on whatever element has autofocus. This can cause
-      // the dialogs's animation to jitter (if it starts offscreen), so we'll temporarily remove the attribute, call
-      // `focus({ preventScroll: true })` ourselves, and add the attribute back afterwards.
-      //
-      // Related: https://github.com/shoelace-style/shoelace/issues/693
-      //
       const autoFocusTarget = this.querySelector('[autofocus]');
       if (autoFocusTarget) {
         autoFocusTarget.removeAttribute('autofocus');

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

@@ -31,6 +31,7 @@ export const styles = css`
   .nile-error-message__response {
     color: var(--nile-colors-dark-500);
     margin-top:6px;
+    line-height: 16px;
   }
 
   .nile-error-message__icon {
@@ -42,9 +43,13 @@ export const styles = css`
     color: var(--nile-colors-primary-600);
     cursor: pointer;
     white-space: nowrap;
+    display: inline-flex;
+    gap: 4px;
+    align-items: center
   }
 
   .nile-error-message__response-expanded {
+    line-height: 18px;
     height: auto;
     border: 1px solid var(--nile-colors-red-500);
     border-left: 6px solid var(--nile-colors-red-500);

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

@@ -55,6 +55,8 @@ export class NileErrorMessage extends LitElement {
   }
 
   public render(): TemplateResult {
+    const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';
+
     return html`
       <div class="nile-error-message" part="base">
         <nile-icon
@@ -76,8 +78,10 @@ export class NileErrorMessage extends LitElement {
               <span
               class="nile-error-message__more-button"
               @click=${this.toggleExpanded}
-              >${this.isExpanded ? 'View Less' : 'View More'}</span
-            >`:``}
+              >${this.isExpanded ? 'View Less' : 'View More'}
+              <nile-icon color="#005EA6" part="icon" size="14" name="${iconName}"></nile-icon>
+              </span
+            > `:``}
             </div>
             `
         : ``}

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

@@ -5,9 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {LitElement, property, CSSResultArray, TemplateResult} from 'lit-element';
+import {
+  LitElement,
+  property,
+  CSSResultArray,
+  TemplateResult,
+} from 'lit-element';
 import { customElement } from 'lit/decorators.js';
-import {styles} from './nile-icon-button.css';
+import { styles } from './nile-icon-button.css';
 
 import '../nile-icon';
 import { classMap } from 'lit/directives/class-map.js';
@@ -73,6 +78,9 @@ export class NileIconButton extends NileElement {
   /** Disables the button. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
+  /**Default color to icon */
+  @property({ type: String, reflect: true }) color = '#7F7F7F';
+
   private handleBlur() {
     this.hasFocus = false;
     this.emit('nile-blur');
@@ -105,6 +113,13 @@ export class NileIconButton extends NileElement {
     this.button.blur();
   }
 
+  private handleMouseOver(e: any) {
+    this.color = 'black';
+  }
+  private handleMouseLeave() {
+    this.color = '#7F7F7F';
+  }
+
   render(): TemplateResult {
     const isLink = this.href ? true : false;
     const tag = isLink ? literal`a` : literal`button`;
@@ -116,14 +131,16 @@ export class NileIconButton extends NileElement {
         class=${classMap({
           'icon-button': true,
           'icon-button--disabled': !isLink && this.disabled,
-          'icon-button--focused': this.hasFocus
+          'icon-button--focused': this.hasFocus,
         })}
         ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
         type=${ifDefined(isLink ? undefined : 'button')}
         href=${ifDefined(isLink ? this.href : undefined)}
         target=${ifDefined(isLink ? this.target : undefined)}
         download=${ifDefined(isLink ? this.download : undefined)}
-        rel=${ifDefined(isLink && this.target ? 'noreferrer noopener' : undefined)}
+        rel=${ifDefined(
+          isLink && this.target ? 'noreferrer noopener' : undefined
+        )}
         role=${ifDefined(isLink ? undefined : 'button')}
         aria-disabled=${this.disabled ? 'true' : 'false'}
         aria-label="${this.label}"
@@ -131,12 +148,15 @@ export class NileIconButton extends NileElement {
         @blur=${this.handleBlur}
         @focus=${this.handleFocus}
         @click=${this.handleClick}
+        @mouseover=${this.handleMouseOver}
+        @mouseleave=${this.handleMouseLeave}
       >
         <nile-icon
           class="icon-button__icon"
           name=${ifDefined(this.name)}
           library=${ifDefined(this.library)}
           src=${ifDefined(this.src)}
+          color=${ifDefined(this.color)}
           aria-hidden="true"
           size="14"
         ></nile-icon>
@@ -145,7 +165,6 @@ export class NileIconButton extends NileElement {
   }
 }
 
-
 export default NileIconButton;
 
 declare global {

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

@@ -444,6 +444,10 @@ export const styles = css`
     border: none;
     box-shadow: 0 0 0 0;
   }
+
+  .input__password {
+    font-family: 'disc';
+  }
 `;
 
 export default [styles];

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

@@ -505,12 +505,12 @@ export class NileInput extends NileElement implements NileFormControl {
             <input
               part="input"
               id="input"
-              class="input__control"
-              type=${
-                this.type === 'password' && this.passwordVisible
-                  ? 'text'
-                  : this.type
-              }
+              class="input__control ${
+                this.type === 'password' && !this.passwordVisible
+                  ? 'input__password'
+                  : ''
+              }"
+              type=${this.type === 'password' ? 'text' : this.type}
               title=${
                 this
                   .title /* An empty title prevents browser validation tooltips from appearing on hover */

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

@@ -148,6 +148,8 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   @property({ type: Boolean, reflect: true }) searchEnabled = false;
 
+  @property({ type: Boolean, reflect: true }) blockValueChange = false;
+
   @property({ type: Boolean, reflect: true }) optionsLoading = false;
 
   /** Allows more than one option to be selected. */
@@ -525,6 +527,13 @@ export class NileSelect extends NileElement implements NileFormControl {
   private handleOptionClick(event: MouseEvent) {
     const target = event.target as HTMLElement;
     const option = target.closest('nile-option');
+
+    if(this.blockValueChange){
+      this.emit('nile-block-change', { value: option?.value, name: this.name });
+      this.hide();
+      return;
+    }
+
     const oldValue = this.value;
     this.oldValue = oldValue;
 

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

@@ -35,6 +35,7 @@ export const styles = css`
     font-weight: 500;
     line-height: 16px;
     letter-spacing: 0.2px;
+    gap: 4px;
   }
 
   .tab:hover:not(.tab--disabled) {

package/src/nile-tab/nile-tab.ts

@@ -100,6 +100,7 @@ export class NileTab extends NileElement {
         })}
         tabindex=${this.disabled ? '-1' : '0'}
       >
+      <slot name="prefix"></slot>
         <slot></slot>
         ${this.closable
           ? html`

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

@@ -80,6 +80,7 @@ export const styles = css`
     border-radius: var(--nile-radius-base-standard);
     transition: 0.3s color, 0.3s border, 0.3s box-shadow, 0.3s background-color;
     cursor: text;
+    min-height:12px;
   }
 
   /* Standard textareas */
@@ -181,16 +182,18 @@ export const styles = css`
   /* Resize types */
   .textarea--resize-none .textarea__control {
     resize: none;
+    min-height:12px;
   }
 
   .textarea--resize-vertical .textarea__control {
     resize: vertical;
+    min-height:12px;
   }
 
   .textarea--resize-auto .textarea__control {
-    height: auto;
     resize: none;
     overflow-y: hidden;
+    min-height:12px;
   }
 
   .textarea--standard.textarea--warning {

package/src/nile-textarea/nile-textarea.ts

@@ -160,12 +160,15 @@ export class NileTextarea extends NileElement  {
       this.resizeObserver.observe(this.input);
     });
 
+
     if(this.fullHeight){
     requestAnimationFrame(() => {
       let parentHeight = this.parentElement?.getBoundingClientRect().height;
-
       if (parentHeight) {
         parentHeight = parentHeight - 65;
+        if (parentHeight<12) {
+          parentHeight=12;
+        }
         this.shadowRoot?.querySelector('textarea')?.style.setProperty('height', `${parentHeight}px`);
       }
     });
@@ -351,6 +354,8 @@ export class NileTextarea extends NileElement  {
               @input=${this.handleInput}
               @focus=${this.handleFocus}
               @blur=${this.handleBlur}
+
+              
             ></textarea>
           </div>
         </div>

package/src/nile-toast/index.ts

@@ -0,0 +1 @@
+export { NileToast } from './nile-toast';

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

@@ -0,0 +1,176 @@
+/**
+ * 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';
+
+/**
+ * Toast CSS
+ */
+export const styles = css`
+  :host {
+    display: contents;
+
+    /* For better DX, we'll reset the margin here so the base part can inherit it */
+    margin: 0;
+  }
+
+  [hidden] {
+    display: none;
+  }
+
+  .alert {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    border: solid 2px 2px;
+    border-radius: var(--nile-radius-base-standard);
+    margin: inherit;
+    padding: 12px;
+    gap: 10px;
+  }
+
+  .alert:not(.alert--has-icon) .alert__icon,
+  .alert:not(.alert--closable) .alert__close-button {
+    display: none;
+  }
+
+  .alert__prefix-icon-container {
+    height: 26px;
+    width: 26px;
+    border-radius: 4px;
+    padding: 6px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .alert__icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    font-size: 10px;
+  }
+
+  .alert--success {
+    border: 1px solid var(--nile-colors-green-500);
+    background: var(--nile-colors-green-100);
+    box-shadow: 0px 14px 28px 0px rgba(119, 125, 130, 0.15);
+  }
+
+  .alert--success .alert__prefix-icon-container {
+    background: var(--nile-colors-green-500);
+  }
+
+  .alert--info {
+    border: 1px solid var(--nile-colors-blue-500);
+    background: var(--nile-colors-blue-100);
+    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
+  }
+
+  .alert--info .alert__prefix-icon-container {
+    background: var(--nile-colors-blue-500);
+  }
+
+  .alert--warning {
+    border: 1px solid var(--nile-colors-yellow-500);
+    background: var(--nile-colors-yellow-100);
+    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
+  }
+
+  .alert--warning .alert__prefix-icon-container {
+    background: var(--nile-colors-yellow-500);
+  }
+
+  .alert--error {
+    border: 1px solid var(--nile-colors-red-500);
+    background: var(--nile-colors-red-100);
+    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
+  }
+
+  .alert--error .alert__prefix-icon-container {
+    border: 1px solid var(--nile-colors-red-500);
+    background: var(--nile-colors-red-500);
+  }
+
+  .alert__message {
+    flex: 1 1 auto;
+    display: block;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    align-items: flex-start;
+    font-family: Colfax-regular;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 14px;
+    color: black;
+  }
+
+  .alert__message--title {
+    font-weight: 600;
+  }
+
+  .alert__message--content {
+    line-height: 21px;
+  }
+
+  .alert__message--content-only {
+    margin-top: 3px;
+  }
+
+  .alert__close-button {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .alert__tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 4px;
+  }
+
+  .alert__tag {
+    height: 24px;
+    display: flex;
+    border-radius: 4px;
+    border: 1px solid #e5e9eb;
+    background: var(--nile-colors-white-base);
+  }
+
+  .alert__tag-content {
+    border-left: 1px solid #e5e9eb;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 6px;
+
+    color: var(--nile-colors-dark-900);
+    font-family: Colfax-regular;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 12px;
+    letter-spacing: 0.2px;
+  }
+
+  .alert__tag-image {
+    height: 24px;
+    width: 24px;
+    border-radius: 4px 0 0 4px;
+  }
+
+  .alert__prefix-img{
+    height: 24px;
+    border-radius: 4px;
+  }
+`;
+
+export default [styles];