@aquera/nile-elements 0.0.6-9 → 0.0.7-1

package/package.json

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

package/src/index.ts

@@ -29,6 +29,9 @@ export { NileErrorMessage } from './nile-error-message';
 export { NileFormErrorMessage } from './nile-form-error-message';
 export { NileFormHelpText } from './nile-form-help-text';
 export { NileCalendar } from './nile-calendar';
-export { NileLink } from './nile-link';
+export { NileLink} from './nile-link';
+export { NileButtonToggleGroup } from './nile-button-toggle-group';
+export { NileButtonToggle } from './nile-button-toggle';
 export { NileSwitcher } from './nile-switcher';
 export { NileContentEditor } from './nile-content-editor';
+export { NileDialog } from './nile-dialog';

package/src/internal/modal.ts

@@ -0,0 +1,64 @@
+import { getTabbableBoundary } from './tabbable';
+
+let activeModals: HTMLElement[] = [];
+
+export default class Modal {
+  element: HTMLElement;
+  tabDirection: 'forward' | 'backward' = 'forward';
+
+  constructor(element: HTMLElement) {
+    this.element = element;
+    this.handleFocusIn = this.handleFocusIn.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleKeyUp = this.handleKeyUp.bind(this);
+  }
+
+  activate() {
+    activeModals.push(this.element);
+    document.addEventListener('focusin', this.handleFocusIn);
+    document.addEventListener('keydown', this.handleKeyDown);
+    document.addEventListener('keyup', this.handleKeyUp);
+  }
+
+  deactivate() {
+    activeModals = activeModals.filter(modal => modal !== this.element);
+    document.removeEventListener('focusin', this.handleFocusIn);
+    document.removeEventListener('keydown', this.handleKeyDown);
+    document.removeEventListener('keyup', this.handleKeyUp);
+  }
+
+  isActive() {
+    // The "active" modal is always the most recent one shown
+    return activeModals[activeModals.length - 1] === this.element;
+  }
+
+  checkFocus() {
+    if (this.isActive()) {
+      if (!this.element.matches(':focus-within')) {
+        const { start, end } = getTabbableBoundary(this.element);
+        const target = this.tabDirection === 'forward' ? start : end;
+
+        if (typeof target?.focus === 'function') {
+          target.focus({ preventScroll: true });
+        }
+      }
+    }
+  }
+
+  handleFocusIn() {
+    this.checkFocus();
+  }
+
+  handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Tab' && event.shiftKey) {
+      this.tabDirection = 'backward';
+
+      // Ensure focus remains trapped after the key is pressed
+      requestAnimationFrame(() => this.checkFocus());
+    }
+  }
+
+  handleKeyUp() {
+    this.tabDirection = 'forward';
+  }
+}

package/src/internal/nile-element.ts

@@ -12,6 +12,7 @@ export default class NileElement extends LitElement {
     });
 
     this.dispatchEvent(event);
+    return event;
   }
 }
 

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

@@ -0,0 +1 @@
+export { NileButtonToggle } from './nile-button-toggle';

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

@@ -0,0 +1,58 @@
+/**
+ * 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';
+
+/**
+ * ButtonToggle CSS
+ */
+export const styles = css`
+  :host {
+  }
+
+  .nile-button-toggle {
+    display: flex;
+    padding: 12px;
+    border: 1px solid #ccc;
+    cursor: pointer;
+    border-radius: 4px;
+    color: #000;
+    text-align: center;
+    font-family: Colfax-regular;
+    font-size: 14px;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .nile-button-toggle__initial {
+    border-radius: 4px 0 0 4px;
+  }
+
+  .nile-button-toggle__end {
+    border-radius: 0 4px 4px 0;
+  }
+
+  .nile-button-toggle__middle {
+    border-width: 1px 0px;
+    border-style: solid;
+    border-color: #ccc;
+    border-radius: 0;
+  }
+
+  .nile-button-toggle__active {
+    background-color: #c7ced4;
+  }
+
+  .nile-button-toggle__disabled {
+    cursor: not-allowed;
+  }
+`;
+
+export default [styles];

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

@@ -0,0 +1,106 @@
+/**
+ * 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-button-toggle.css';
+import NileElement from '../internal/nile-element';
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-button-toggle
+ *
+ */
+@customElement('nile-button-toggle')
+export class NileButtonToggle extends NileElement {
+
+	/**
+	 * The styles for ButtonToggle
+	 * @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];
+	}
+
+  @property({ type: Boolean, reflect: true })
+  active = false;
+
+  @property({ type: Boolean, reflect: true })
+  initial = false;
+
+  @property({ type: Boolean, reflect: true })
+  middle = false;
+
+  @property({ type: Boolean, reflect: true })
+  end = false;
+
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  @property({ type: String })
+  value = '';
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('click', this.toggle);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('click', this.toggle);
+    super.disconnectedCallback();
+  }
+
+  toggle() {
+    if (this.disabled) return;
+    this.active = true;
+    const eventData = { active: this.active, value: this.value };
+    this.dispatchEvent(new CustomEvent('nile-toggle-changed', { detail: eventData, bubbles: true }));
+  }
+
+	/**
+	 * Render method
+	 * @slot This is a slot test
+	 */
+  public render(): TemplateResult {
+    let classes = ['nile-button-toggle'];
+    if (this.active) {
+      classes.push('nile-button-toggle__active');
+    }
+    if (this.initial) {
+      classes.push('nile-button-toggle__initial');
+    }
+    if (this.middle) {
+      classes.push('nile-button-toggle__middle');
+    }
+    if (this.end) {
+      classes.push('nile-button-toggle__end');
+    }
+    if (this.disabled) {
+      classes.push('nile-button-toggle__disabled');
+    }
+
+    const classString = classes.join(' ');
+
+    return html`
+      <div class="${classString}">
+        <slot name="prefix"></slot>
+        <slot> </slot>
+      </div>
+    `;
+  }
+
+	/* #endregion */
+}
+
+export default NileButtonToggle;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-button-toggle': NileButtonToggle;
+  }
+}

package/src/nile-button-toggle-group/index.ts

@@ -0,0 +1 @@
+export { NileButtonToggleGroup } from './nile-button-toggle-group';

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

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

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

@@ -0,0 +1,115 @@
+/**
+ * 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, query, queryAll } from 'lit/decorators.js';
+import {styles} from './nile-button-toggle-group.css';
+import NileButtonToggle from '../nile-button-toggle/nile-button-toggle';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-button-toggle-group
+ *
+ */
+@customElement('nile-button-toggle-group')
+export class NileButtonToggleGroup extends NileElement {
+  /**
+   * The styles for ButtonToggleGroup
+   * @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];
+  }
+
+  @queryAll('nile-button-toggle')
+  private toggles!: NodeListOf<NileButtonToggle>;
+
+  @query('slot:not([name])')
+  private defaultSlot!: HTMLSlotElement;
+
+  @property({ type: Boolean, reflect: true })
+  public disabled: boolean = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+  }
+
+  firstUpdated() {
+    this.defaultSlot.addEventListener('slotchange', () =>
+      this.updateTogglePositions()
+    );
+    this.addEventListener('nile-toggle-changed', this.handleToggle);
+    this.updateTogglePositions();
+  }
+
+  updated(changedProperties: Map<string | number | symbol, unknown>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('disabled')) {
+      this.updateDisabledState();
+    }
+  }
+
+  private updateDisabledState() {
+    const assignedNodes = this.defaultSlot.assignedNodes({ flatten: true });
+    const toggles = assignedNodes.filter(
+      node => node instanceof NileButtonToggle
+    ) as NileButtonToggle[];
+
+    toggles.forEach(toggle => {
+      if (!toggle.disabled) {
+        toggle.disabled = this.disabled;
+      }
+    });
+  }
+
+  updateTogglePositions() {
+    const assignedNodes = this.defaultSlot.assignedNodes({ flatten: true });
+    const toggles = assignedNodes.filter(
+      node => node instanceof NileButtonToggle
+    ) as NileButtonToggle[];
+
+    toggles.forEach((toggle, index) => {
+      toggle.initial = index === 0;
+      toggle.middle = index > 0 && index < toggles.length - 1;
+      toggle.end = index === toggles.length - 1;
+    });
+  }
+
+  handleToggle(event: CustomEvent) {
+    if (this.disabled) return;
+    const toggles = this.querySelectorAll('nile-button-toggle');
+
+    if (toggles && event.detail.active) {
+      toggles.forEach((toggle: any) => {
+        if (toggle !== event.target) {
+          toggle.active = false;
+        }
+      });
+
+      this.emit('nile-change', { value: event.detail.value });
+    }
+  }
+
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+  public render(): TemplateResult {
+    return html` <slot> </slot> `;
+  }
+
+  /* #endregion */
+}
+
+export default NileButtonToggleGroup;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-button-toggle-group': NileButtonToggleGroup;
+  }
+}

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

@@ -21,6 +21,11 @@ export const styles = css`
     width: 100%;
     box-sizing: border-box;
   }
+
+  .dropdown-position {
+    position: relative;
+    bottom: 60px;
+  }
   .content-editable-input {
     box-sizing: border-box;
     width: 100%;
@@ -40,8 +45,8 @@ export const styles = css`
     outline: none;
   }
 
-  .content-editable-input::-webkit-scrollbar {
-    display: none;
+  .error {
+    border-color: #e5434d;
   }
 
   .chips {
@@ -54,6 +59,16 @@ export const styles = css`
     letter-spacing: 0.2px;
   }
 
+  .text-area {
+    height: 120px;
+    white-space: pre-wrap;
+    overflow: scroll;
+    line-height: 24px;
+  }
+
+  .chip-error {
+    background: #f3a5aa;
+  }
   .nile-options-container {
     box-sizing: border-box;
     background-color: #ffffff;
@@ -61,10 +76,6 @@ export const styles = css`
     overflow: auto;
   }
 
-  nile-popup::part(popup) {
-    top: 91px;
-  }
-
   label {
     display: inline-block;
     margin-bottom: 6px;

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

@@ -11,6 +11,7 @@ import { styles } from './nile-content-editor.css';
 import { CSSResultGroup } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import NileElement from '../internal/nile-element';
+import { watch } from '../internal/watch';
 
 /**
  * Nile icon component.
@@ -30,15 +31,18 @@ export class NileContentEditor extends NileElement {
 
   @property() value: string = '';
 
-  @property() dropdownOptions: Array<any>;
+  @property() options: Array<any>;
 
   @property() showLabel: boolean = true;
 
   @property() labelText = '';
 
+  @property() type = 'text|text-area';
+
   @property() required: boolean = true;
 
   @query('.content-editable-input') input: HTMLInputElement;
+  @query('.nile-options-container') autoOptions: HTMLInputElement;
 
   @state() private openDropdown: boolean = false;
 
@@ -57,6 +61,11 @@ export class NileContentEditor extends NileElement {
     });
   }
 
+  @watch('type', { waitUntilFirstUpdate: true })
+  handleTypeChange() {
+    this.input.innerHTML = this.generateHTMLTagsWithValues(this.value);
+  }
+
   disconnectedCallback(): void {
     super.disconnectedCallback();
     this.emit('nile-destroy');
@@ -66,12 +75,17 @@ export class NileContentEditor extends NileElement {
     return await this.updateComplete;
   }
 
-  private handleChange(event: any) {
-    const value = this.input.innerText;
-    this.emitInputChange();
-    if (value.includes('$')) {
-      this.openDropdown = true;
+  private handlekeyDown(event: any) {
+    if (event.code === 'Enter' && this.type === 'text') {
+      event.preventDefault();
     }
+    setTimeout(() => {
+      const value = this.input.innerText;
+      this.emitInputChange();
+      if (value.includes('$')) {
+        this.openDropdown = true;
+      }
+    });
   }
 
   generateValuesFromHTMLTags(string: any): string {
@@ -86,41 +100,75 @@ export class NileContentEditor extends NileElement {
   generateHTMLTagsWithValues(string: any): string {
     var pattern = /{{(.*?)}}/g;
     var result = string.replace(pattern, (match: any, option: any) => {
-      if (this.dropdownOptions.includes(option)) {
-        return (
-          '<span class="chips" contenteditable="false">' + option + '</span>'
-        );
-      }
+      return this.options.includes(option)
+        ? '<span class="chips" contenteditable="false">' + option + '</span>'
+        : '<span class="chips chip-error" contenteditable="false">' +
+            option +
+            '</span>';
     });
     return result;
   }
 
   emitInputChange(): void {
-    this.emit(
-      'nile-change',
-      this.generateValuesFromHTMLTags(this.input.innerHTML)
-    );
+    let fieldValue = this.input.innerHTML;
+
+    if (this.input.innerText !== '') {
+      fieldValue = this.generateValuesFromHTMLTags(fieldValue);
+    }
+    fieldValue = fieldValue.replace(/&nbsp;/g, ' ');
+    fieldValue = fieldValue === '<br>' ? '' : fieldValue?.trim();
+    this.emit('nile-change', {
+      value: this.generateValuesFromHTMLTags(fieldValue),
+    });
   }
 
+  moveCursorToEnd = () => {
+    const range = document.createRange();
+    const selection = window.getSelection();
+    range.setStart(this.input, this.input.childNodes.length);
+    range.collapse(true);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+    this.input.focus();
+  };
+
   handleOptions(option: any): void {
     this.openDropdown = !this.openDropdown;
 
     // not appending Native element as it replaces all existing child nodes with new node
     const autoOptionsTag =
       '<span class="chips" contenteditable="false">' + option + '</span>';
-    this.input.innerHTML = this.input.innerHTML + autoOptionsTag;
-
-    // removing '$' from innerText  after option is being selected
-    if (this.input.lastChild?.previousSibling)
-      this.input.lastChild.previousSibling.nodeValue =
-        this.input.lastChild.previousSibling.nodeValue!.replace('$', '');
+    // text editor adds div when pressing enter , so before appending have to check if its parent node is div else append it to content editable parent
+    if (this.input?.lastElementChild?.tagName === 'DIV') {
+      this.input.lastElementChild.insertAdjacentHTML(
+        'beforeend',
+        autoOptionsTag
+      );
+      if (this.input.lastElementChild.lastChild?.previousSibling)
+        this.input.lastElementChild.lastChild.previousSibling.nodeValue =
+          this.input.lastElementChild.lastChild.previousSibling.nodeValue!.replace(
+            '$',
+            ''
+          );
+    } else {
+      this.input.insertAdjacentHTML('beforeend', autoOptionsTag);
+      if (this.input.lastChild?.previousSibling) {
+        this.input.lastChild.previousSibling.nodeValue =
+          this.input.lastChild.previousSibling.nodeValue!.replace('$', '');
+      }
+    }
     this.emitInputChange();
   }
 
   public renderAutoOptions(): TemplateResult {
-    return html`<div class="nile-options-container">
-      ${this.dropdownOptions &&
-      this.dropdownOptions.map((option: any) => {
+    return html`<div
+      class="${classMap({
+        'nile-options-container': true,
+        'dropdown-position': this.type === 'text-area',
+      })}class"
+    >
+      ${this.options &&
+      this.options.map((option: any) => {
         return html` <nile-option
           .value="${option}"
           @click="${(event: Event) => {
@@ -134,7 +182,8 @@ export class NileContentEditor extends NileElement {
 
   public render(): TemplateResult {
     const hasHelpText = this.helpText ? true : false;
-    const hasErrorMessage = this.errorMessage ? true : false;
+    const hasErrorMessage = !!this.errorMessage;
+    const type = this.type;
     return html`
       <nile-popup
         .active="${this.openDropdown}"
@@ -143,6 +192,7 @@ export class NileContentEditor extends NileElement {
         class=${classMap({
           dropdown: true,
           'dropdown--open': true,
+          popup: true,
         })}
       >
         <div class="content-editable-wrapper" slot="anchor">
@@ -153,9 +203,13 @@ export class NileContentEditor extends NileElement {
                   : ''}`
             : ''}
           <div
-            class="content-editable-input"
             contenteditable="true"
-            @input=${this.handleChange}
+            class=${classMap({
+              'content-editable-input': true,
+              error: hasErrorMessage,
+              'text-area': type === 'text-area' ? true : false,
+            })}
+            @keydown=${this.handlekeyDown}
           ></div>
           ${hasHelpText
             ? html`

package/src/nile-date-picker/nile-date-picker.ts

@@ -46,7 +46,7 @@ export class NileDatePicker extends NileElement {
    */
   render(): TemplateResult {
     return html`
-      <nile-dropdown .hoist="${true}">
+      <nile-dropdown .hoist="${true}" distance="6">
         <slot
         slot="trigger"
         part="trigger"

package/src/nile-dialog/index.ts

@@ -0,0 +1 @@
+export { NileDialog } from './nile-dialog';