@aquera/nile-elements 0.0.32 → 0.0.34

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -34,7 +34,9 @@
     "element-internals-polyfill": "^1.1.20",
     "lit": "^2.0.2",
     "@floating-ui/dom": "^1.2.1",
-    "composed-offset-position": "^0.0.4"
+    "composed-offset-position": "^0.0.4",
+    "@codemirror/lang-javascript": "6.2.1",
+    "codemirror": "6.0.1"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",

package/src/index.ts

@@ -41,3 +41,6 @@ export { NileTab } from './nile-tab';
 export { NileTabPanel } from './nile-tab-panel';
 export { NileCodeEditor } from './nile-code-editor';
 export { NileToast } from './nile-toast';
+export { NileBreadcrumb } from './nile-breadcrumb';
+export { NileBreadcrumbItem } from './nile-breadcrumb-item';
+export { NileCard } from './nile-card';

package/src/nile-breadcrumb/index.ts

@@ -0,0 +1 @@
+export {NileBreadcrumb} from './nile-breadcrumb';

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

@@ -0,0 +1,20 @@
+/**
+ * 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';
+
+/**
+ * Breadcrumb CSS
+ */
+export const styles = css`
+  :host {
+    display: flex;
+    align-items: center;
+  }
+`;
+
+export default [styles];

package/src/nile-breadcrumb/nile-breadcrumb.ts

@@ -0,0 +1,78 @@
+/**
+ * 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-breadcrumb.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile BreadCrumb component.
+ *
+ * @tag nile-breadcrumb
+ *
+ */
+@customElement('nile-breadcrumb')
+export class NileBreadcrumb extends NileElement {
+  /**
+   * The styles for Breadcrumb
+   * @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
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateComplete.then(() => {
+      this.changeLastItem();
+    });
+  }
+
+  private changeLastItem() {
+    const items: any = [...this.querySelectorAll('nile-breadcrumb-item')];
+    const itemslength = items.length;
+    const lastItem = items[itemslength - 1];
+    lastItem.isLast = true;
+  }
+
+  private handleRemoveClick(event: any) {
+    this.emit('nile-click', { value: event.target.innerText });
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <slot
+        @nile-click-item=${this.handleRemoveClick}
+        class="breadcrumb"
+      ></slot>
+    `;
+  }
+  
+  /* #endregion */
+}
+
+export default NileBreadcrumb;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-breadcrumb': NileBreadcrumb;
+  }
+}

package/src/nile-breadcrumb-item/index.ts

@@ -0,0 +1 @@
+export {NileBreadcrumbItem} from './nile-breadcrumb-item';

package/src/nile-breadcrumb-item/nile-breadcrumb-item.css.ts

@@ -0,0 +1,49 @@
+/**
+ * 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';
+
+/**
+ * Breadcrumb-item CSS
+ */
+export const styles = css`
+  :host {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    font-feature-settings: 'clig' off, 'liga' off;
+    font-family: var(--nile-font-family-serif);
+    font-size: var(--nile-font-size-small);
+    font-style: normal;
+    font-weight: var(--nile-font-weight-regular);
+    line-height:16.8px;
+    letter-spacing: 0.2px;
+  }
+
+  .nile-breadcrumb-item__arrow {
+    margin: 0 8px;
+  }
+
+  .nile-breadcrumb-item__arrow-hidden {
+    display: none;
+  }
+
+  .nile-breadcrumb-item__slot-text {
+    color: var(--nile-colors-dark-500);
+  }
+
+  .nile-breadcrumb-item__slot-text:hover {
+    color: var(--nile-colors-primary-600);
+    cursor: pointer;
+  }
+
+  .nile-breadcrumb-item__last-slot-text {
+    color: #026e78;
+  }
+`;
+
+export default [styles];

package/src/nile-breadcrumb-item/nile-breadcrumb-item.ts

@@ -0,0 +1,83 @@
+/**
+ * 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, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './nile-breadcrumb-item.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile BreadCrumb Item component.
+ *
+ * @tag nile-breadcrumb-item
+ *
+ */
+@customElement('nile-breadcrumb-item')
+export class NileBreadcrumbItem extends NileElement {
+  /**
+   * The styles for BreadcrumbItem
+   * @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];
+  }
+
+  @state() private isLast = false;
+
+  /* #endregion */
+
+  /* #region Methods */
+
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+  private handleClick() {
+    if (this.isLast) {
+      return;
+    }
+    this.emit('nile-click-item');
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <slot
+        class=${classMap({
+          'nile-breadcrumb-item__slot-text': !this.isLast,
+          'nile-breadcrumb-item__last-slot-text': this.isLast,
+        })}
+        @click=${this.handleClick}
+      ></slot>
+      <nile-icon
+        name="arrowright"
+        aria-label="arrowright"
+        color="var(--nile-colors-dark-500)"
+        class=${classMap({
+          'nile-breadcrumb-item__arrow': true,
+          'nile-breadcrumb-item__arrow-hidden': this.isLast,
+        })}
+        size="14"
+      ></nile-icon>
+    `;
+  }
+
+  /* #endregion */
+}
+
+export default NileBreadcrumbItem;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-breadcrumb-item': NileBreadcrumbItem;
+  }
+}

package/src/nile-card/index.ts

@@ -0,0 +1 @@
+export { NileCard } from './nile-card';

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

@@ -0,0 +1,73 @@
+/**
+* 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';
+
+/**
+ * Card CSS
+ */
+export const styles = css`
+
+  :host {
+    box-sizing: border-box;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    --border-color: var(--nile-colors-neutral-400);
+    --border-radius: 8px;
+    --border-width: 1px;
+    --padding: 18px;
+    --footer-padding: 9px 18px;
+;
+
+    display: inline-block;
+  }
+
+  .card {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--nile-colors-white-base);
+    border: solid var(--border-width) var(--border-color);
+    border-radius: var(--border-radius);
+  }
+
+  .card__body {
+    display: block;
+    padding: var(--padding);
+  }
+
+  .card--has-footer {
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+    border-bottom: none;
+  }
+
+   .card__footer {
+    display: block;
+    border-top: solid var(--border-width) var(--border-color);
+    padding: var(--footer-padding);
+    border: 1px solid var(--nile-colors-neutral-500);
+    background: var(--nile-colors-neutral-100);
+    border-radius:  0 0 4px 4px;
+  }
+
+  .card:not(.card--has-footer) .card__footer {
+    display: none;
+  }
+
+`;
+
+export default [styles];

package/src/nile-card/nile-card.ts

@@ -0,0 +1,53 @@
+/**
+ * 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-card.css';
+import { classMap } from 'lit/directives/class-map.js';
+import { HasSlotController } from '../internal/slot';
+import NileElements from '../internal/nile-element';
+import { CSSResultGroup } from 'lit';
+
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-card
+ *
+ */
+@customElement('nile-card')
+export class NileCard extends NileElements {
+
+  static styles: CSSResultGroup = styles;
+
+  private readonly hasSlotController = new HasSlotController(this, 'footer');
+
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+          card: true,
+          'card--has-footer': this.hasSlotController.test('footer'),
+        })}
+      >
+        <slot part="body" class="card__body"></slot>
+      </div>
+      <slot name="footer" part="footer" ?hidden="${!this.hasSlotController.test('footer')}"  class="card__footer"></slot>
+    `;
+  }
+}
+
+
+export default NileCard;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-card': NileCard;
+  }
+}

package/src/nile-code-editor/nile-code-editor.ts

@@ -17,9 +17,14 @@ import { styles } from './nile-code-editor.css';
 import { EditorView } from 'codemirror';
 import { ViewUpdate } from '@codemirror/view';
 import { EditorState, Compartment } from '@codemirror/state';
-import { javascript, javascriptLanguage } from '@codemirror/lang-javascript';
+import {
+  javascript,
+  javascriptLanguage,
+  scopeCompletionSource,
+  completionPath,
+} from '@codemirror/lang-javascript';
 import { autocompletion } from '@codemirror/autocomplete';
-import { CompletionContext } from '@codemirror/autocomplete';
+import { CompletionContext, Completion } from '@codemirror/autocomplete';
 import NileElement from '../internal/nile-element';
 import { basicSetup } from './extensionSetup';
 
@@ -61,7 +66,7 @@ export class NileCodeEditor extends NileElement {
 
   updated() {
     const customAutoCompletions = javascriptLanguage.data.of({
-      autocomplete: this.customOptions,
+      autocomplete: scopeCompletionSource(this.customOptions),
     });
     let startState = EditorState.create({
       doc: !this.multiline ? this.convertToSingleLine(this.value) : this.value,

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.ts

@@ -59,6 +59,7 @@ export interface switchInputType {
   error?: boolean;
   errorMessage?: string;
   options?: Array<any>;
+  customAutoCompletions?: any;
   helperText?: string;
   multiple?: boolean;
   noborder?: boolean;
@@ -101,14 +102,12 @@ export class NileSwitcher extends NileElement {
   static styles: CSSResultGroup = styles;
 
   @property({ type: Object }) nileSwitchConfig: switchconfig;
-
   @property({ type: Number }) current: Number = 0;
 
   @property({ type: Object }) currentInput: switchInputType;
 
   connectedCallback() {
     super.connectedCallback();
-    this.setCurrentInput();
     this.emit('nile-init');
   }
 
@@ -300,7 +299,7 @@ export class NileSwitcher extends NileElement {
     const {
       value,
       multiLine,
-      options,
+      customAutoCompletions,
       disabled,
       readonly,
       errorMessage,
@@ -319,7 +318,7 @@ export class NileSwitcher extends NileElement {
         this.handleChange(e, INPUT_TYPE_NAMES.CODE_EDITOR)}"
       .multiline="${multiLine}"
       .value="${value}"
-      .customOptions="${options}"
+      .customOptions="${customAutoCompletions}"
       .showLineNumbers="false"
     ></nile-code-editor> `;
   }
@@ -390,6 +389,9 @@ export class NileSwitcher extends NileElement {
   }
 
   singleFieldSwitcher() {
+    if (!this.currentInput) {
+      this.setCurrentInput();
+    }
     return html`
       ${choose(
         this.currentInput.inputType,

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>
             `
           : ''}