@aquera/nile-elements 0.0.20 → 0.0.22

package/package.json

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

package/src/index.ts

@@ -36,3 +36,6 @@ export { NileSwitcher } from './nile-switcher';
 export { NileContentEditor } from './nile-content-editor';
 export { NileDialog } from './nile-dialog';
 export { NileErrorNotification } from './nile-error-notification';
+export { NileTabGroup } from './nile-tab-group';
+export { NileTab } from './nile-tab';
+export { NileTabPanel } from './nile-tab-panel';

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

@@ -214,11 +214,8 @@ export const styles = css`
   }
 
   .calendar-switcher {
-    display: flex;
-    align-items: flex-start;
-    gap: 24px;
-    justify-content: space-between;
-    border-bottom: 1px solid #e5e9eb;
+    width: 100%;
+    margin-right: 24px;
   }
 
   .calendar-switch {

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

@@ -620,6 +620,11 @@ export class NileCalendar extends NileElement {
     this.requestUpdate();
   }
 
+  onTypeChange(event: any) {
+    console.log(event);
+    this.type = event.detail.value;
+  }
+
   /**
    * Render method
    */
@@ -641,22 +646,10 @@ export class NileCalendar extends NileElement {
       >
         <div class="calendar-config ${!this.range ? 'hidden' : ''}">
           <div class="calendar-switcher">
-            <div
-              class="calendar-switch${this.type === 'absolute'
-                ? '__active'
-                : ''}"
-              @click="${() => this.setType('absolute')}"
-            >
-              Absolute
-            </div>
-            <div
-              class="calendar-switch${this.type === 'relative'
-                ? '__active'
-                : ''}"
-              @click="${() => this.setType('relative')}"
-            >
-              Relative
-            </div>
+            <nile-tab-group @nile-tab-show="${this.onTypeChange}">
+              <nile-tab slot="nav" panel="absolute">Absolute</nile-tab>
+              <nile-tab slot="nav" panel="relative">Relative</nile-tab>
+            </nile-tab-group>
           </div>
 
           <div class="calendar-timezone">

package/src/nile-content-editor/nile-content-editor.css.ts

@@ -12,7 +12,6 @@ import { css } from 'lit-element';
  */
 export const styles = css`
   :host {
-    width: 100%;
     box-sizing: border-box;
     font-size: 14px;
   }
@@ -25,7 +24,7 @@ export const styles = css`
 
   .dropdown-position {
     position: relative;
-    bottom: 20px;
+    bottom: 1px;
   }
   .content-editable-input {
     box-sizing: border-box;
@@ -33,6 +32,7 @@ export const styles = css`
     padding: 9px;
     border: 1px solid #c7ced4;
     border-radius: 4px;
+    overflow: auto;
     overflow-x: auto;
     overflow-anchor: none;
     scrollbar-width: none;
@@ -51,6 +51,8 @@ export const styles = css`
   }
 
   .read-only {
+    background-color: hsl(240 4.8% 95.9%);
+    opacity: 0.5;
     cursor: not-allowed;
   }
 

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

@@ -63,6 +63,8 @@ export class NileContentEditor extends NileElement {
   @property({ attribute: 'error' }) error = false;
   @property({ attribute: 'noborder' }) noborder = false;
 
+  @state() initialValue = '';
+
   static styles: CSSResultGroup = styles;
 
   connectedCallback() {
@@ -74,17 +76,8 @@ export class NileContentEditor extends NileElement {
     this.setInitialValues();
   }
 
-  setInitialValues() {
-    this.updateComplete.then(res => {
-      if (res && !!this.value)
-        this.contentEditor.innerHTML = this.generateHTMLTagsWithValues(
-          this.value
-        );
-    });
-  }
-
   addOpenListeners() {
-    this.addEventListener('click', this.handleOutsideClick);
+    window.addEventListener('click', this.handleOutsideClick);
     this.addEventListener('cut', this.handleClipboardEvent);
     this.addEventListener('copy', this.handleClipboardEvent);
     this.addEventListener('paste', this.handleClipboardEvent);
@@ -97,6 +90,12 @@ export class NileContentEditor extends NileElement {
     this.removeEventListener('paste', this.handleClipboardEvent);
   }
 
+  handleOutsideClick(event: any) {
+    if (event && event.target && !this.contains(event.target)) {
+      this.toggleDropdown(false);
+    }
+  }
+
   async handleClipboardEvent(event: Event) {
     const selectedText = window?.getSelection()?.toString();
     switch (event.type) {
@@ -126,13 +125,16 @@ export class NileContentEditor extends NileElement {
     this.openDropdown = value;
   }
 
-  handleOutsideClick(event: Event) {
-    if (event && event.target) {
-      this.toggleDropdown(false);
-    }
+  setInitialValues() {
+    this.updateComplete.then(res => {
+      if (res)
+        this.contentEditor.innerHTML = this.generateHTMLTagsWithValues(
+          this.value
+        );
+    });
   }
 
-  @watch(['type'], { waitUntilFirstUpdate: true })
+  @watch(['type', 'value'], { waitUntilFirstUpdate: true })
   handleTypeChange() {
     this.contentEditor.innerHTML = this.generateHTMLTagsWithValues(this.value);
   }
@@ -155,14 +157,6 @@ export class NileContentEditor extends NileElement {
       return;
     }
 
-    if (event.code === KeyCode.ARROW_RIGHT) {
-      this.contentEditor.focus();
-      // select all the content in the element
-      document.execCommand('selectAll', false, undefined);
-      // collapse selection to the end
-
-      document?.getSelection()?.collapseToEnd();
-    }
     if (event.code === KeyCode.ESCAPE) {
       event.preventDefault();
       this.toggleDropdown(false);
@@ -194,9 +188,12 @@ export class NileContentEditor extends NileElement {
   }
 
   generateValuesFromHTMLTags(string: any): string {
+    let errorTag =
+      /<span class="chips chip-error" contenteditable="false">(.*?)<\/span>/g;
+    this.error = !!string.match(errorTag);
     var pattern =
       /<span class="chips(?: chip-error)?" contenteditable="false">(.*?)<\/span>/g;
-    var result = string.replace(pattern, (match: any, option: any) => {
+    let result = string.replace(pattern, (match: any, option: any) => {
       return '{{' + option + '}}';
     });
     return result;
@@ -224,9 +221,6 @@ export class NileContentEditor extends NileElement {
   emitInputChange(): void {
     if (this.contentEditor) {
       let fieldValue = this.contentEditor.innerHTML;
-      if (this.contentEditor.innerText !== '') {
-        fieldValue = this.generateValuesFromHTMLTags(fieldValue);
-      }
       fieldValue = fieldValue.replace(/&nbsp;/g, ' ');
       fieldValue = fieldValue.replace('<br>', '');
       this.emit('nile-change', {
@@ -235,7 +229,13 @@ export class NileContentEditor extends NileElement {
     }
   }
 
-  insertNodes(parentNode: Node, childNodes: NodeList, autoOptionsTag?: Node) {
+  replaceText = '';
+
+  insertNodes(
+    parentNode: Node,
+    childNodes: NodeList,
+    autoOptionsTag?: HTMLElement
+  ) {
     [...childNodes].forEach((node: Node, index: number) => {
       if (node.hasChildNodes()) {
         if (autoOptionsTag) {
@@ -246,23 +246,54 @@ export class NileContentEditor extends NileElement {
       } else {
         if (node.nodeValue?.includes(this.tagIdentifier)) {
           if (autoOptionsTag) {
-            parentNode.childNodes[index].nodeValue = node.nodeValue?.replace(
-              this.tagIdentifier + this.filteredValue,
-              ''
-            );
-            parentNode.childNodes[index].after(autoOptionsTag);
+            this.insertAutoOptionsTag(node, autoOptionsTag);
           }
-          this.filteredValue =
-            parentNode?.childNodes[index]?.nodeValue
-              ?.split(this.tagIdentifier)
-              .slice(1)
-              .join() || '';
+
+          this.setFilterValue(node.nodeValue);
+
           return;
         }
       }
     });
   }
 
+  insertAutoOptionsTag(node: any, autoOptionsTag: any) {
+    const selection = window.getSelection();
+    const range = document.createRange();
+    const curssorNodeindex = node.nodeValue.indexOf(this.tagIdentifier);
+    range.setStart(node, curssorNodeindex);
+    range.insertNode(autoOptionsTag);
+    range.setStartAfter(autoOptionsTag);
+    range.collapse(true);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+
+    if (autoOptionsTag.nextSibling?.nodeValue) {
+      autoOptionsTag.nextSibling.nodeValue =
+        autoOptionsTag.nextSibling?.nodeValue?.replace(
+          this.tagIdentifier + this.filteredValue,
+          ''
+        );
+    }
+    this.contentEditor.focus();
+  }
+
+  setFilterValue(value: any) {
+    //replace Text - check if text exists after tagidentifier , if exists take account of that too
+    if (!this.openDropdown) {
+      this.replaceText = value.split(this.tagIdentifier).slice(1).join();
+    }
+    if (!!value && this.openDropdown) {
+      this.filteredValue = value
+        ?.split(this.tagIdentifier)
+        .slice(1)
+        .join()
+        .replace(this.replaceText, '');
+    } else {
+      this.filteredValue = '';
+    }
+  }
+
   handleOptions(option: any): void {
     this.toggleDropdown(false);
     let autoOptionsTag = document.createElement('span');
@@ -274,9 +305,13 @@ export class NileContentEditor extends NileElement {
       this.contentEditor.childNodes,
       autoOptionsTag
     );
+    this.resetOptions();
+    this.emitInputChange();
+  }
+
+  resetOptions() {
     this.filteredOptions = this.options;
     this.filteredValue = '';
-    this.emitInputChange();
   }
 
   public renderAutoOptions(): TemplateResult {

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

@@ -12,8 +12,6 @@ import { css } from 'lit-element';
  */
 export const styles = css`
   :host {
-    display: inline-block;
-    width: 100%;
     box-sizing: border-box;
   }
 
@@ -25,15 +23,13 @@ export const styles = css`
     gap: 0.5rem;
   }
 
-  .tooltip-container {
-    display: flex;
-    flex-grow: 1;
-    flex-shrink: 0;
+  .input-container > :first-child {
+    max-width: 99%;
+    min-width: 99%;
   }
 
-  .input-container > :first-child {
-    flex-grow: 1;
-    flex-shrink: 0;
+  nile-icon {
+    max-height: 38px;
   }
 
   nile-radio {

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

@@ -83,6 +83,8 @@ export class NileSwitcher extends NileElement {
   static styles: CSSResultGroup = styles;
   @property({ type: Object }) nileSwitchConfig: switchconfig;
 
+  @property() value: string;
+
   connectedCallback() {
     super.connectedCallback();
     this.emit('nile-init');
@@ -124,12 +126,19 @@ export class NileSwitcher extends NileElement {
       multiple,
       placeholder,
       disabled,
+      value,
+      error,
+      errorMessage,
       inputType: inputTypeName,
     } = Input;
+
     return html`<nile-select
       .placeholder=${placeholder}
       .disabled="${disabled}"
       .multiple="${multiple}"
+      .value="${value}"
+      .error="${error}"
+      .errorMessage="${errorMessage}"
       @nile-change=${(e: CustomEvent) => {
         this.handleChange(e, inputType, inputTypeName);
       }}
@@ -166,35 +175,50 @@ export class NileSwitcher extends NileElement {
     const { value, label, disabled, inputType: inputTypeName } = Input;
 
     return html`<nile-checkbox
-      .checked=${value}
-      .label=${label}
-      .disabled=${disabled}
-      @valueChange=${(e: CustomEvent) => {
-        this.handleChange(e, inputType, inputTypeName);
-      }}
-    ></nile-checkbox>`;
+        .checked=${value}
+        .label=${label}
+        .disabled=${disabled}
+        @valueChange=${(e: CustomEvent) => {
+          this.handleChange(e, inputType, inputTypeName);
+        }}
+      ></nile-checkbox
+      >; `;
   }
 
   renderNileRadio(Input: switchInputType, inputType: string) {
-    const { options, value, disabled, inputType: inputTypeName } = Input;
+    const {
+      options,
+      value,
+      disabled,
+      inputType: inputTypeName,
+      errorMessage,
+    } = Input;
+
+    const haserrorMessage = !!errorMessage;
 
     return html`<nile-radio-group
-      .value=${value}
-      .disabled=${disabled}
-      @change=${(e: CustomEvent) => {
-        this.handleChange(e, inputType, inputTypeName);
-      }}
-    >
-      ${options &&
-      options.map((option: any) => {
-        return html`<nile-radio .value="${option}">${option} </nile-radio>`;
-      })}
-    </nile-radio-group>`;
+        .value=${value}
+        .disabled=${disabled}
+        @change=${(e: CustomEvent) => {
+          this.handleChange(e, inputType, inputTypeName);
+        }}
+      >
+        ${options &&
+        options.map((option: any) => {
+          return html`<nile-radio .value="${option}">${option} </nile-radio>`;
+        })}
+      </nile-radio-group>
+      ${haserrorMessage ? this.renderErrorMessage(errorMessage) : ''}`;
+  }
+
+  renderErrorMessage(errorMessage: string) {
+    return html`
+      <nile-form-error-message>${errorMessage}</nile-form-error-message>
+    `;
   }
 
   renderContentEditor(Input: switchInputType, inputType: string) {
-    const {
-      value,
+    let {
       options,
       inputType: inputTypeName,
       errorMessage,
@@ -203,7 +227,7 @@ export class NileSwitcher extends NileElement {
       noborder,
     } = Input;
     return html`<nile-content-editor
-      .value=${value}
+      .value=${this.value}
       .options=${options}
       .type=${type}
       .readonly=${readonly}

package/src/nile-tab/index.ts

@@ -0,0 +1 @@
+export { NileTab } from './nile-tab';

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

@@ -0,0 +1,82 @@
+/**
+* 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';
+
+/**
+ * Tab CSS
+ */
+export const styles = css`
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    display: inline-block;
+  }
+
+  .tab {
+    display: inline-flex;
+    align-items: center;
+    border-radius: 8px;
+    color: var(--nile-colors-dark-500);
+    padding: 4px 4px 12px 4px;
+    white-space: nowrap;
+    user-select: none;
+    cursor: pointer;
+    transition: 0.2s box-shadow, 0.2s color;
+    font-family: Colfax-regular;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px;
+    letter-spacing: 0.2px;
+  }
+
+  .tab:hover:not(.tab--disabled) {
+    color: var(--nile-colors-dark-900);
+  }
+
+  .tab:focus {
+    outline: none;
+  }
+
+  .tab:focus-visible:not(.tab--disabled) {
+    color: var(--nile-colors-primary-600);
+  }
+
+  .tab.tab--active:not(.tab--disabled) {
+    color: var(--nile-colors-primary-600);
+  }
+
+  .tab.tab--closable {
+    padding-inline-end: 4px;
+  }
+
+  .tab.tab--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .tab__close-button {
+    font-size: 14px;
+    margin-inline-start: 4px;
+  }
+
+  .tab__close-button::part(base) {
+    padding: 3px;
+  }
+
+  @media (forced-colors: active) {
+    .tab.tab--active:not(.tab--disabled) {
+      outline: solid 1px transparent;
+      outline-offset: -3px;
+    }
+  }
+`;
+
+export default [styles];

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

@@ -0,0 +1,129 @@
+/**
+ * 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-tab.css';
+
+import '../nile-icon-button/nile-icon-button';
+import { classMap } from 'lit/directives/class-map.js';
+import { query } from 'lit/decorators.js';
+import { watch } from '../internal/watch';
+import NileElement from '../internal/nile-element';
+import type { CSSResultGroup } from 'lit';
+
+let id = 0;
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-tab
+ *
+ *
+ * @dependency nile-icon-button
+ *
+ * @slot - The tab's label.
+ *
+ * @event nile-close - Emitted when the tab is closable and the close button is activated.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart close-button - The close button, an `<nile-icon-button>`.
+ * @csspart close-button__base - The close button's exported `base` part.
+ */
+@customElement('nile-tab')
+export class NileTab extends NileElement {
+  static styles: CSSResultGroup = styles;
+
+  private readonly attrId = ++id;
+  private readonly componentId = `nile-tab-${this.attrId}`;
+
+  @query('.tab') tab: HTMLElement;
+
+  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
+  @property({ reflect: true }) panel = '';
+
+  /** Draws the tab in an active state. */
+  @property({ type: Boolean, reflect: true }) active = false;
+
+  /** Makes the tab closable and shows a close button. */
+  @property({ type: Boolean }) closable = false;
+
+  /** Disables the tab and prevents selection. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'tab');
+  }
+
+  private handleCloseClick(event: Event) {
+    event.stopPropagation();
+    this.emit('nile-close');
+  }
+
+  @watch('active')
+  handleActiveChange() {
+    this.setAttribute('aria-selected', this.active ? 'true' : 'false');
+  }
+
+  @watch('disabled')
+  handleDisabledChange() {
+    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+  }
+
+  /** Sets focus to the tab. */
+  focus(options?: FocusOptions) {
+    this.tab.focus(options);
+  }
+
+  /** Removes focus from the tab. */
+  blur() {
+    this.tab.blur();
+  }
+
+  render() {
+    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
+    this.id = this.id.length > 0 ? this.id : this.componentId;
+
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+          tab: true,
+          'tab--active': this.active,
+          'tab--closable': this.closable,
+          'tab--disabled': this.disabled
+        })}
+        tabindex=${this.disabled ? '-1' : '0'}
+      >
+        <slot></slot>
+        ${this.closable
+          ? html`
+              <nile-icon-button
+                part="close-button"
+                exportparts="base:close-button__base"
+                name="x-lg"
+                library="system"
+                label="close"
+                class="tab__close-button"
+                @click=${this.handleCloseClick}
+                tabindex="-1"
+              ></nile-icon-button>
+            `
+          : ''}
+      </div>
+    `;
+  }
+}
+
+export default NileTab;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-tab': NileTab;
+  }
+}

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

@@ -0,0 +1 @@
+export { NileTabGroup } from './nile-tab-group';