@aquera/nile-elements 0.0.31 → 0.0.33

package/src/nile-icon/icons/svg/arrowright.ts

@@ -2,4 +2,4 @@
  * Do not edit directly
  */
 
-export default "PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiMxMTE7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5JY29uPC90aXRsZT48cG9seWdvbiBjbGFzcz0iY2xzLTEiIHBvaW50cz0iNSAxNC43MSA0LjI5IDE0IDEwLjI5IDggNC4yOSAyIDUgMS4yOSAxMS43MSA4IDUgMTQuNzEiLz48L3N2Zz4=";
+export default "PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNiAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTQuOTk5OTggMTUuMjFMNC4yODk5OCAxNC41TDEwLjI5IDguNDk5OThMNC4yODk5OCAyLjQ5OTk4TDQuOTk5OTggMS43ODk5OEwxMS43MSA4LjQ5OTk4TDQuOTk5OTggMTUuMjFaIiBmaWxsPSIjN0Y3RjdGIi8+PC9zdmc+";

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

@@ -79,7 +79,9 @@ export class NileIconButton extends NileElement {
   @property({ type: Boolean, reflect: true }) disabled = false;
 
   /**Default color to icon */
-  @property({ type: String, reflect: true }) color = '#7F7F7F';
+  @property({ type: String, reflect: true }) color?: string;
+
+  @property({ type: Boolean, reflect: true }) ishovered: boolean = false;
 
   private handleBlur() {
     this.hasFocus = false;
@@ -114,16 +116,16 @@ export class NileIconButton extends NileElement {
   }
 
   private handleMouseOver(e: any) {
-    this.color = 'black';
+    this.ishovered = true;
   }
-  private handleMouseLeave() {
-    this.color = '#7F7F7F';
+  private handleMouseLeave(e: any) {
+    this.ishovered = false;
   }
 
+
   render(): TemplateResult {
     const isLink = this.href ? true : false;
     const tag = isLink ? literal`a` : literal`button`;
-
     /* eslint-disable lit/binding-positions, lit/no-invalid-html */
     return html`
       <${tag}
@@ -151,12 +153,13 @@ export class NileIconButton extends NileElement {
         @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)}
+          color=${this.ishovered? 'black': ifDefined(this.color) }
           aria-hidden="true"
           size="14"
         ></nile-icon>

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

@@ -63,6 +63,17 @@ export const styles = css`
     padding-right: 10px;
   }
 
+  nile-code-editor {
+    overflow: hidden;
+    padding-top: 2px;
+    border-radius: 5px;
+    border: 1px solid rgb(204, 204, 204);
+  }
+
+  .code-editor__no-border {
+    border: none;
+  }
+
   .switcher-object-mapper::part(input) {
     color: var(--nile-colors-primary-600);
     cursor: pointer;

package/src/nile-switcher/nile-switcher.ts

@@ -13,6 +13,7 @@ import { CSSResultGroup } from 'lit';
 import { choose } from 'lit/directives/choose.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
+import { watch } from '../internal/watch';
 
 /**
  * @summary Allows you to switch between nile elements
@@ -32,7 +33,6 @@ export interface switchconfig {
   toggleSwitch: boolean;
   disable?: boolean;
   confirmation?: boolean;
-  current: number;
   align: 'block' | 'inline';
   inputs: switchInputType[];
 }
@@ -45,11 +45,11 @@ export interface switchInputType {
     | INPUT_TYPE_NAMES.TEXTAREA
     | INPUT_TYPE_NAMES.RADIO
     | INPUT_TYPE_NAMES.CONTENTEDITOR
-    | INPUT_TYPE_NAMES.OBJECT_MAPPER;
+    | INPUT_TYPE_NAMES.OBJECT_MAPPER
+    | INPUT_TYPE_NAMES.CODE_EDITOR;
   value?: String | boolean;
   label?: String;
   readonly?: boolean;
-  order: number;
   type?: string;
   icon: string;
   mode?: string;
@@ -62,6 +62,8 @@ export interface switchInputType {
   helperText?: string;
   multiple?: boolean;
   noborder?: boolean;
+  multiLine?: boolean;
+  expand?: boolean;
 }
 
 export enum POSITIONS {
@@ -82,6 +84,7 @@ export enum INPUT_TYPE_NAMES {
   RADIO = 'radio',
   CONTENTEDITOR = 'content-editor',
   OBJECT_MAPPER = 'object-mapper',
+  CODE_EDITOR = 'code-editor',
 }
 
 export enum MODE {
@@ -98,14 +101,31 @@ export class NileSwitcher extends NileElement {
   static styles: CSSResultGroup = styles;
 
   @property({ type: Object }) nileSwitchConfig: switchconfig;
-  @property() currentInput: switchInputType;
+
+  @property({ type: Number }) current: Number = 0;
+
+  @property({ type: Object }) currentInput: switchInputType;
 
   connectedCallback() {
-    this.currentInput = this.nileSwitchConfig.inputs[0];
     super.connectedCallback();
+    this.setCurrentInput();
     this.emit('nile-init');
   }
 
+  @watch(['current'], { waitUntilFirstUpdate: true })
+  handleSwitcherChange() {
+    this.setCurrentInput();
+  }
+
+  setCurrentInput() {
+    if (this.nileSwitchConfig?.inputs) {
+      this.currentInput = this.nileSwitchConfig.inputs.filter(
+        (input: switchInputType, index: Number) => {
+          return index === this.current;
+        }
+      )[0];
+    }
+  }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.emit('nile-destroy');
@@ -276,6 +296,39 @@ export class NileSwitcher extends NileElement {
     </nile-input>`;
   }
 
+  renderCodeEditor(Input: switchInputType) {
+    const {
+      value,
+      multiLine,
+      options,
+      disabled,
+      readonly,
+      errorMessage,
+      error,
+      inputType,
+      noborder,
+    } = Input;
+    return html`<nile-code-editor
+      class=${classMap({
+        'code-editor': true,
+        'code-editor__no-border': !!noborder,
+      })}
+      @nile-expand="${(e: CustomEvent) =>
+        this.handleExpand(e, INPUT_TYPE_NAMES.CODE_EDITOR)}"
+      @nile-change="${(e: CustomEvent) =>
+        this.handleChange(e, INPUT_TYPE_NAMES.CODE_EDITOR)}"
+      .multiline="${multiLine}"
+      .value="${value}"
+      .customOptions="${options}"
+      .showLineNumbers="false"
+    ></nile-code-editor> `;
+  }
+
+  handleExpand(event: CustomEvent, inputType: string) {
+    this.currentInput.expand = event.detail.expand;
+    this.emit('nile-change', { input: this.currentInput });
+  }
+
   handleChange(event: CustomEvent, inputType: string) {
     switch (inputType) {
       case INPUT_TYPE_NAMES.OBJECT_MAPPER:
@@ -284,6 +337,9 @@ export class NileSwitcher extends NileElement {
       case INPUT_TYPE_NAMES.CHECKBOX:
         this.currentInput.value = event.detail.checked;
         break;
+      case INPUT_TYPE_NAMES.CODE_EDITOR:
+        this.currentInput.value = event.detail.value;
+        break;
       default:
         this.currentInput.value = event.detail.value;
     }
@@ -300,7 +356,7 @@ export class NileSwitcher extends NileElement {
       <div class="switcher-icons-container">
         ${repeat(
           inputs,
-          input => html` <nile-tooltip
+          (input: any, index: number) => html` <nile-tooltip
             class=${classMap({
               'switcher-tooltip-container': true,
             })}
@@ -309,7 +365,7 @@ export class NileSwitcher extends NileElement {
           >
             <div  class=${classMap({
               'switcher-icon-container': true,
-              current: input.order === this.currentInput.order,
+              current: index === this.current,
             })}>
                <nile-icon
               size="16"
@@ -318,7 +374,7 @@ export class NileSwitcher extends NileElement {
               })}
               .name=${input.icon}
               color="#000000"
-              @click=${() => this.toggleField(input)}
+              @click=${() => this.toggleField(input, index)}
             ></nile-icon>
             <div>
            
@@ -328,8 +384,8 @@ export class NileSwitcher extends NileElement {
     `;
   }
 
-  toggleField(currentInput: switchInputType) {
-    this.currentInput = currentInput;
+  toggleField(currentInput: switchInputType, index: Number) {
+    this.current = index;
     this.emit('nile-switch', { input: this.currentInput });
   }
 
@@ -360,6 +416,10 @@ export class NileSwitcher extends NileElement {
             () => this.renderContentEditor(this.currentInput),
           ],
           [INPUT_TYPE_NAMES.OBJECT_MAPPER, () => this.renderObjectMapper()],
+          [
+            INPUT_TYPE_NAMES.CODE_EDITOR,
+            () => this.renderCodeEditor(this.currentInput),
+          ],
         ],
         () => this.renderNileText(this.currentInput)
       )}

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

@@ -18,7 +18,6 @@ export const styles = css`
   .tag {
     display: flex;
     align-items: center;
-    border: solid 2px;
     line-height: 1;
     white-space: nowrap;
     user-select: none;
@@ -37,13 +36,11 @@ export const styles = css`
 
   .tag--primary {
     background: #005EA6;
-    border-color: #005EA6;
-    border: 2px solid  #005EA6;
     color: #FFF;
   }
 
   .tag--primary:hover {
-    border: 2px solid rgba(0, 94, 166, 0.50);
+    outline: 2px solid rgba(0, 94, 166, 0.50);
   }
 
   .tag--primary:active > nile-icon-button {
@@ -52,12 +49,11 @@ export const styles = css`
 
   .tag--success {
     background: #A5F3E1;
-    border: 2px solid #A5F3E1;
     color: #000;
   }
 
   .tag--success:hover {
-    border: 2px solid #43E5C0;
+    outline: 2px solid #43E5C0;
   }
 
   .tag--success:active > nile-icon-button {
@@ -66,12 +62,11 @@ export const styles = css`
 
   .tag--normal {
     background: #E5E9EB;
-    border: 2px solid #E5E9EB;
     color: #000;
   }
 
   .tag--normal:hover {
-    border: 2px solid #C7CED4;
+    outline: 2px solid #C7CED4;
   }
 
 
@@ -81,12 +76,11 @@ export const styles = css`
 
   .tag--warning {
     background: #F3E0A5;
-    border: 2px solid #F3E0A5;
     color: #000;
   }
 
   .tag--warning:hover {
-    border: 2px solid #E5BF43;
+    outline: 2px solid #E5BF43;
   }
 
   .tag--warning:active > nile-icon-button {
@@ -96,12 +90,11 @@ export const styles = css`
 
   .tag--error {
     background: #F3A5AA;
-    border: 2px solid #F3A5AA;
     color: #000;
   }
 
   .tag--error:hover {
-    border: 2px solid #E5434D;
+    outline: 2px solid #E5434D;
   }
 
   .tag--error:active > nile-icon-button {
@@ -110,12 +103,11 @@ export const styles = css`
 
   .tag--info {
     background: #A5D3F3;
-    border: 2px solid #A5D3F3;
     color: #000000;
   }
 
   .tag--info:hover {
-    border: 2px solid #42A3E5;
+    outline: 2px solid #42A3E5;
   }
 
   .tag--info:active > nile-icon-button {
@@ -126,7 +118,7 @@ export const styles = css`
   .tag--medium {
     font-size: 14px;
     height: 26px;
-    padding: 0 0.75rem;
+    padding: 0 6px;
   }
 
   .tag__remove {

package/src/nile-tag/nile-tag.ts

@@ -67,7 +67,28 @@ export class NileTag extends NileElement {
     this.emit('nile-remove');
   }
 
+  getCloseButtonColor() {
+    switch (this.variant) {
+      case 'primary':
+        return  '--nile-colors-blue-500'; 
+      case 'success':
+        return '--nile-colors-green-500'; 
+      case 'normal':
+        return '--nile-colors-dark-500'; 
+      case 'warning':
+        return '--nile-colors-yellow-500';
+      case 'error':
+        return '--nile-colors-red-500';
+      case 'info':
+        return '--nile-colors-blue-500';
+      default:
+        return '--nile-colors-dark-500'; 
+    }
+  }
+  
+
   render() {
+    const colorVariable = this.getCloseButtonColor();
     return html`
       <span
         part="base"
@@ -90,12 +111,12 @@ export class NileTag extends NileElement {
           // Modifiers
           'tag--pill': this.pill,
           'tag--removable': this.removable,
+
         })}
       >
-
         <slot name="prefix" part="prefix" class="tag__prefix"></slot>
 
-        <slot  part="content" class="tag__content"></slot>
+        <slot part="content" class="tag__content"></slot>
 
         ${this.removable
           ? html`
@@ -108,6 +129,7 @@ export class NileTag extends NileElement {
                 class="tag__remove"
                 @click=${this.handleRemoveClick}
                 tabindex="-1"
+                color="var(${colorVariable})"
               ></nile-icon-button>
             `
           : ''}

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

@@ -18,10 +18,6 @@ export const styles = css`
     margin: 0;
   }
 
-  [hidden] {
-    display: none;
-  }
-
   .alert {
     position: relative;
     display: flex;
@@ -171,6 +167,10 @@ export const styles = css`
     height: 24px;
     border-radius: 4px;
   }
+
+  [hidden] {
+    display: none;
+  }
 `;
 
 export default [styles];

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

@@ -58,7 +58,7 @@ export const styles = css`
     color: hsl(0, 0%, 100%);
     padding: 0.25rem 0.5rem;
     pointer-events: none;
-    word-break: break-all;
+    word-break: break-word;
   }
 `;
 

package/src/nile-tooltip/nile-tooltip.ts

@@ -45,7 +45,7 @@ export class NileTooltip extends NileElement {
   @query('nile-popup') popup: NilePopup;
 
   /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
-  @property() content = '';
+  @property({ type: String, reflect: true }) content = '';
 
   /**
    * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
@@ -229,7 +229,7 @@ export class NileTooltip extends NileElement {
 
   /** Shows the tooltip. */
   async show() {
-    if (this.open) {
+    if (this.open || !(this.content?.trim().length)) {
       return undefined;
     }