@aquera/nile-elements 0.0.30 → 0.0.32

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-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];