@aquera/nile-elements 0.0.6 → 0.0.7

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

@@ -0,0 +1,90 @@
+/**
+ * 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';
+
+/**
+ * AttributeExpression CSS
+ */
+export const styles = css`
+  :host {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .content-editable-wrapper {
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .dropdown-position {
+    position: relative;
+    bottom: 60px;
+  }
+  .content-editable-input {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 9px;
+    border: 1px solid #c7ced4;
+    border-radius: 4px;
+    overflow-x: auto;
+    overflow-anchor: none;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    cursor: text;
+    white-space: nowrap;
+    background-color: #ffffff;
+    height: 38px;
+  }
+  .content-editable-input:focus {
+    outline: none;
+  }
+
+  .error {
+    border-color: #e5434d;
+  }
+
+  .chips {
+    background: #e5e9eb;
+    color: #000;
+    border-radius: 4px;
+    padding: 6px;
+    margin-left: 3px;
+    display: inline;
+    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;
+    border: 1px solid #c7ced4;
+    overflow: auto;
+  }
+
+  label {
+    display: inline-block;
+    margin-bottom: 6px;
+    font-family: 'colfax-medium';
+  }
+
+  .asterik {
+    color: #e5434d;
+  }
+`;
+
+export default [styles];

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

@@ -0,0 +1,240 @@
+/**
+ * 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 { html, property, TemplateResult } from 'lit-element';
+import { customElement, query, state } from 'lit/decorators.js';
+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.
+ *
+ * @tag nile-attribute-expression
+ *
+ */
+@customElement('nile-content-editor')
+export class NileContentEditor extends NileElement {
+  /**
+ * @summary Allows you to handle both input and dropdown selection
+
+ * @dependency nile-option
+ 
+ * @event nile-change - Emitted when the control's value changes.  
+ */
+
+  @property() value: string = '';
+
+  @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;
+
+  @property({ attribute: 'help-text' }) helpText = '';
+
+  @property({ attribute: 'error-message' }) errorMessage = '';
+
+  static styles: CSSResultGroup = styles;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.emit('nile-init');
+    this.afterFirstRender().then(res => {
+      if (res && this.value !== '')
+        this.input.innerHTML = this.generateHTMLTagsWithValues(this.value);
+    });
+  }
+
+  @watch('type', { waitUntilFirstUpdate: true })
+  handleTypeChange() {
+    this.input.innerHTML = this.generateHTMLTagsWithValues(this.value);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.emit('nile-destroy');
+  }
+
+  async afterFirstRender(): Promise<boolean> {
+    return await this.updateComplete;
+  }
+
+  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 {
+    var pattern =
+      /<span class="chips(?: chip-error)?" contenteditable="false">(.*?)<\/span>/g;
+    var result = string.replace(pattern, (match: any, option: any) => {
+      return '{{' + option + '}}';
+    });
+    return result;
+  }
+
+  generateHTMLTagsWithValues(string: any): string {
+    var pattern = /{{(.*?)}}/g;
+    var result = string.replace(pattern, (match: any, option: any) => {
+      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 {
+    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>';
+    // 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="${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) => {
+            this.handleOptions(option);
+          }}"
+          >${option}
+        </nile-option>`;
+      })}
+    </div>`;
+  }
+
+  public render(): TemplateResult {
+    const hasHelpText = this.helpText ? true : false;
+    const hasErrorMessage = !!this.errorMessage;
+    const type = this.type;
+    return html`
+      <nile-popup
+        .active="${this.openDropdown}"
+        sync="width"
+        placement="bottom"
+        class=${classMap({
+          dropdown: true,
+          'dropdown--open': true,
+          popup: true,
+        })}
+      >
+        <div class="content-editable-wrapper" slot="anchor">
+          ${this.showLabel && this.labelText
+            ? html`<label class="ods-label">${this.labelText} </label> ${this
+                  .required
+                  ? html`<span class="asterik">*</span>`
+                  : ''}`
+            : ''}
+          <div
+            contenteditable="true"
+            class=${classMap({
+              'content-editable-input': true,
+              error: hasErrorMessage,
+              'text-area': type === 'text-area' ? true : false,
+            })}
+            @keydown=${this.handlekeyDown}
+          ></div>
+          ${hasHelpText
+            ? html`
+                <nile-form-help-text>${this.helpText}</nile-form-help-text>
+              `
+            : ``}
+          ${hasErrorMessage
+            ? html`
+                <nile-form-error-message
+                  >${this.errorMessage}</nile-form-error-message
+                >
+              `
+            : ``}
+        </div>
+
+        ${this.renderAutoOptions()}
+      </nile-popup>
+    `;
+  }
+}
+
+export default NileContentEditor;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-content-editor': NileContentEditor;
+  }
+}

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

@@ -13,168 +13,6 @@ import { css } from 'lit-element';
 export const styles = css`
   :host {
   }
-
-  .calendar-container {
-    font-family: Colfax-regular;
-    width: 365px;
-    height: auto;
-    text-align: center;
-    background: white;
-  }
-
-  .calendar-container.with-margin {
-  margin-right: 20px;
-}
-
-  .calendar-header {
-    display: flex;
-    justify-content: space-between;
-    padding: 10px;
-    padding: 22px 20px;
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 14px;
-    letter-spacing: 0.2px;
-  }
-
-  .divider {
-    width: 100%;
-    height: 1px;
-    background: #c7ced4;
-  }
-
-  .day-names {
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 14px;
-    letter-spacing: 0.2px;
-    height: 50px;
-    margin-top: 10px;
-  }
-
-  .day-names,
-  .days {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    height: auto;
-    align-items: center;
-  }
-
-  .days {
-    height: auto;
-  }
-
-  .day {
-    flex-basis: calc(100% / 7);
-    box-sizing: border-box;
-    width: 48px;
-    align-items: center;
-    padding: 10px;
-    height: 32px;
-  margin-top: 6px;
-  margin-bottom: 6px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  }
-
-  .filler {
-    color: grey;
-  }
-
-  .selected-date {
-    color: white;
-    border-radius: 4px;
-    background: #a5d3f3;
-  }
-
-
-
-.calendar-wrapper {
-  background: white;
-  display: flex;
-  justify-content: space-between;
-  width: 730px;
-}
-
-.selected-date,
-.range-start,
-.range-end {
-  border-radius: 4px;
-  background: #a5d3f3;
-  color: white;
-}
-
-
-.range-start {
-  background: #a5d3f3;
-  border-radius: 4px 0 0 4px;
-  color: white;
-}
-
-.range-end {
-  background: #a5d3f3;
-  border-radius: 0 4px 4px 0;
-  color: white;
-}
-
-.range-middle {
-  background: #a5d3f3;
-  color: white;
-  border-radius: 0;
-}
-
-.day.selected {
-  background: #a5d3f3;
-  color: white;
-  border-radius: 4px;
-}
-
-.day.in-range {
-  background: #a5d3f3;
-  color: white;
-}
-
-.selected-date {
-  color: white;
-  border-radius: 4px;
-  background: #a5d3f3;
-}
-
-.base {
-  background-color: white;
-  border-radius: 4px;
-  padding-bottom: 20px
-}
-
-.calender-input{
-  padding: 20px;
-  padding-bottom: 0px;
-}
-
-.from {
-  display: flex;
-  justify-content: space-between;
-  gap: 20px;
-}
-
-.manual-input{
-  width:100%;
-}
-
-.manual-input-label{
-  font-size: 12px;
-font-style: normal;
-font-weight: 500;
-  margin-bottom: 10px;
-}
-
-.apply-button {
-  text-align: right;
-  display: block;
-  padding-top: 20px;
-}
 `;
 
 export default [styles];

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

@@ -12,25 +12,9 @@ import {
   CSSResultArray,
   TemplateResult,
 } from 'lit-element';
-import { customElement } from 'lit/decorators.js';
+import { customElement, query } from 'lit/decorators.js';
 import { styles } from './nile-date-picker.css';
-import { animateTo, stopAnimations } from '../internal/animate';
-import { classMap } from 'lit/directives/class-map.js';
-import { query } from 'lit/decorators.js';
-import {
-  getAnimation,
-  setDefaultAnimation,
-} from '../utilities/animation-registry';
-import { getTabbableBoundary } from '../internal/tabbable';
-import { waitForEvent } from '../internal/event';
-import { watch } from '../internal/watch';
 import NileElement from '../internal/nile-element';
-import type { CSSResultGroup, PropertyValues } from 'lit';
-import type NileButton from '../nile-button/nile-button';
-import type NileIconButton from '../nile-icon-button/nile-icon-button';
-import type { NileMenu } from '../nile-menu';
-import type { NilePopup } from '../nile-popup';
-import '../nile-popup';
 import { NileDropdown } from '../nile-dropdown';
 
 /**
@@ -49,123 +33,32 @@ export class NileDatePicker extends NileElement {
     return [styles];
   }
 
-  private currentMonth: number = new Date().getMonth();
-  private currentYear: number = new Date().getFullYear();
-
-  @query('nile-dropdown') dropdown: NileDropdown;
-
-  @property({ type: Boolean, reflect: true }) dropDownOpened = false;
-
-  @property({ type: Object }) value : any;
-
-  @property({ type: Object }) rangeValue : any;
-
-  @property({ type: String, attribute: 'value' }) valueAttribute:
-    | string
-    | null = null;
-
-  @property({ type: String, attribute: 'value' }) formattedDate: string | null =
-    null;
-
-  @property({ type: Object }) startDate: Date | null = null;
-  @property({ type: Object }) endDate: Date | null = null;
-  @property({ type: Boolean }) isSelectingStart = true; // flag to indicate what we're selecting
-
   @property({ type: Boolean }) range = false;
 
-  @watch('value')
-  valueChanged() {
-
-    if (this.range && this.value) {
-      this.rangeValue = this.value;
-      this.value = null;
-      return;
-    }
-
-    if (this.value && !isNaN(this.value.getTime())) {
-      const offset = this.value.getTimezoneOffset();
-      const localDate = new Date(this.value.getTime() - offset * 60 * 1000);
-      if (!isNaN(localDate.getTime())) {
-        this.valueAttribute = localDate.toISOString().split('T')[0];
-        this.formattedDate = `${String(localDate.getDate()).padStart(
-          2,
-          '0'
-        )}/${String(localDate.getMonth() + 1).padStart(
-          2,
-          '0'
-        )}/${localDate.getFullYear()}`;
-      }
-    }
-  }
-
+  @property() value: any;
 
-  updated(changedProperties: PropertyValues) {
-    super.updated(changedProperties);
-
-    if (changedProperties.has('valueAttribute')) {
-      const date = new Date(this.valueAttribute || '');
-      if (!isNaN(date.getTime())) {
-        const offset = date.getTimezoneOffset();
-        this.value = new Date(date.getTime() - offset * 60 * 1000);
-        this.currentMonth = this.value.getMonth();
-        this.currentYear = this.value.getFullYear();
-      }
-    }
-  }
-
-  static get observedAttributes() {
-    return ['value', 'range'];
-  }
-
-  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
-    if (name === 'value') {
-      this.valueAttribute = newValue;
-      this.initializeValue();
-    } else if (name === 'range') {
-      this.range = newValue !== null;
-    }
-  }
-
-  initializeValue() {
-    if (this.range) {
-      try {
-        const rangeValue = JSON.parse(this.valueAttribute || '');
-        this.startDate = new Date(rangeValue.startDate);
-        this.endDate = new Date(rangeValue.endDate);
-
-        // Convert to local time
-        this.startDate = new Date(this.startDate.getTime());
-        this.endDate = new Date(this.endDate.getTime());
-
-        this.rangeValue = {
-          startDate: this.startDate,
-          endDate: this.endDate,
-        };
-        this.value = null;
-      } catch (e) {
-        // console.error('Invalid range value');
-      }
-    } else {
-      if (this.valueAttribute) {
-        let date: Date;
-
-        date = new Date(this.valueAttribute);
+  @query('nile-dropdown') dropdown: NileDropdown;
 
-        date = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
 
-        if (!isNaN(date.getTime())) {
-          this.value = date;
-          this.currentMonth = this.value.getMonth();
-          this.currentYear = this.value.getFullYear();
-          this.rangeValue = null;
-        }
-      }
-    }
-    this.requestUpdate();
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+  render(): TemplateResult {
+    return html`
+      <nile-dropdown .hoist="${true}" distance="6">
+        <slot
+        slot="trigger"
+        part="trigger"
+        name="trigger"
+      ></slot>
+      <nile-calendar value="${this.value}" .range="${this.range}" @nile-changed="${this.handleChanged}"></nile-calendar>
+      </nile-dropdown>
+    `;
   }
 
-  handleChanged(event:any) {
-    this.emit('nile-changed', { value: event.detail.value });
+  handleChanged(event: any) {
+    this.emit('nile-changed', event.detail);
     if (this.dropdown) {
       this.dropdown.hide();
     }
@@ -173,16 +66,6 @@ export class NileDatePicker extends NileElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.initializeValue();
-
-    if (this.valueAttribute) {
-      const date = new Date(this.valueAttribute);
-      if (!isNaN(date.getTime())) {
-        this.value = date;
-        this.currentMonth = this.value.getMonth();
-        this.currentYear = this.value.getFullYear();
-      }
-    }
     this.emit('nile-init');
   }
 
@@ -190,29 +73,6 @@ export class NileDatePicker extends NileElement {
     super.disconnectedCallback();
     this.emit('nile-destroy');
   }
-
-  /* #endregion */
-
-  /* #region Methods */
-
-  /**
-   * Render method
-   * @slot This is a slot test
-   */
-  render(): TemplateResult {
-
-    return html`
-      <nile-dropdown .hoist="${true}">
-        <slot
-        slot="trigger"
-        part="trigger"
-        name="trigger"
-      ></slot>
-
-<nile-calendar .value="${this.range}" .range="${this.range}" @nile-changed="${this.handleChanged}"> </nile-calendar>
-      </nile-dropdown>
-    `;
-  }
 }
 
 export default NileDatePicker;

package/src/nile-dialog/index.ts

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