@aquera/nile-elements 1.3.3-beta-1.3 → 1.3.3-beta-1.4

package/dist/src/nile-content-editor/nile-content-editor.js

@@ -0,0 +1,393 @@
+/**
+ * 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 { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, query, state, property } from 'lit/decorators.js';
+import { styles } from './nile-content-editor.css';
+import { classMap } from 'lit/directives/class-map.js';
+import NileElement from '../internal/nile-element';
+import { watch } from '../internal/watch';
+import { KeyCode } from '../internal/enum';
+import { live } from 'lit/directives/live.js';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-attribute-expression
+ *
+ */
+let NileContentEditor = class NileContentEditor extends NileElement {
+    constructor() {
+        /**
+       * @summary Allows you to handle both input and dropdown selection
+      
+       * @dependency nile-option
+       
+       * @event nile-change - Emitted when the control's value changes.
+       */
+        super(...arguments);
+        this.value = '';
+        this.showLabel = true;
+        this.labelText = '';
+        this.type = 'text|text-area';
+        this.required = true;
+        this.openDropdown = false;
+        this.tagIdentifier = '$';
+        this.filteredValue = '';
+        this.helpText = '';
+        this.readonly = false;
+        this.errorMessage = '';
+        this.error = false;
+        this.noborder = false;
+        this.updateValue = false;
+        this.initialValue = '';
+        this.replaceText = '';
+    }
+    connectedCallback() {
+        this.handleOutsideClick = this.handleOutsideClick.bind(this);
+        this.handleClipboardEvent = this.handleClipboardEvent.bind(this);
+        super.connectedCallback();
+        this.emit('nile-init');
+        this.addOpenListeners();
+        this.setInitialValues();
+    }
+    addOpenListeners() {
+        window.addEventListener('click', this.handleOutsideClick);
+        this.addEventListener('cut', this.handleClipboardEvent);
+        this.addEventListener('copy', this.handleClipboardEvent);
+        this.addEventListener('paste', this.handleClipboardEvent);
+    }
+    removeOpenListeners() {
+        this.removeEventListener('click', this.handleOutsideClick);
+        this.removeEventListener('cut', this.handleClipboardEvent);
+        this.removeEventListener('copy', this.handleClipboardEvent);
+        this.removeEventListener('paste', this.handleClipboardEvent);
+    }
+    handleOutsideClick(event) {
+        if (event && event.target && !this.contains(event.target)) {
+            this.toggleDropdown(false);
+        }
+    }
+    async handleClipboardEvent(event) {
+        const selectedText = window?.getSelection()?.toString();
+        switch (event.type) {
+            case 'cut':
+            case 'copy':
+                if (!!selectedText)
+                    await navigator.clipboard.writeText(selectedText);
+                document.execCommand(event.type);
+                break;
+            case 'paste':
+                event.preventDefault();
+                let pastedText = '';
+                pastedText = await navigator.clipboard.readText();
+                pastedText = pastedText
+                    .replace(/<(|\/)(html|body|meta|span)[^>]*?>/gi, '')
+                    .trim();
+                document.execCommand('insertText', false, pastedText);
+                break;
+            default:
+                break;
+        }
+        setTimeout(() => {
+            this.emitInputChange();
+        });
+    }
+    toggleDropdown(value) {
+        this.openDropdown = value;
+    }
+    setInitialValues() {
+        this.updateComplete.then(res => {
+            if (res)
+                this.contentEditor.innerHTML = this.generateHTMLTagsWithValues(this.value);
+        });
+    }
+    handleTypeChange() {
+        if (this.updateValue) {
+            this.contentEditor.innerHTML = this.generateHTMLTagsWithValues(this.value);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeOpenListeners();
+        this.emit('nile-destroy');
+    }
+    handlekeyDown(event) {
+        if (event.code === KeyCode.ENTER && this.type === 'text') {
+            event.preventDefault();
+            return;
+        }
+        if ([KeyCode.CUT, KeyCode.COPY, KeyCode.PASTE].includes(event.code) &&
+            (event.ctrlKey || event.metaKey)) {
+            return;
+        }
+        if (event.code === KeyCode.ESCAPE) {
+            event.preventDefault();
+            this.toggleDropdown(false);
+            return;
+        }
+        setTimeout(() => {
+            const value = this.contentEditor.innerText;
+            this.emitInputChange();
+            if (value.includes(this.tagIdentifier)) {
+                this.insertNodes(this.contentEditor, this.contentEditor.childNodes);
+                this.filterOptions();
+                this.toggleDropdown(true);
+            }
+            else {
+                this.toggleDropdown(false);
+            }
+        }, 10);
+    }
+    filterOptions() {
+        this.filteredOptions = this.options;
+        this.filteredValue = this.filteredValue.trim();
+        if (!!this.options.length && !!this.filteredValue) {
+            this.filteredOptions = this.options.filter(item => item.includes(this.filteredValue));
+        }
+        else {
+            this.filteredOptions = this.options;
+        }
+    }
+    generateValuesFromHTMLTags(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;
+        let result = string.replace(pattern, (match, option) => {
+            return '{{' + option + '}}';
+        });
+        return result;
+    }
+    generateHTMLTagsWithValues(string) {
+        var pattern = /{{(.*?)}}/g;
+        var result = string.replace(pattern, (match, option) => {
+            return this.options.includes(option)
+                ? '<span class="chips" contenteditable="false">' + option + '</span>'
+                : this.setError(option);
+        });
+        return result;
+    }
+    setError(option) {
+        this.error = true;
+        return ('<span class="chips chip-error" contenteditable="false">' +
+            option +
+            '</span>');
+    }
+    emitInputChange() {
+        if (this.contentEditor) {
+            let fieldValue = this.contentEditor.innerHTML;
+            fieldValue = fieldValue.replace(/&nbsp;/g, ' ');
+            fieldValue = fieldValue.replace('<br>', '');
+            this.emit('nile-change', {
+                value: this.generateValuesFromHTMLTags(fieldValue),
+            });
+        }
+    }
+    insertNodes(parentNode, childNodes, autoOptionsTag) {
+        [...childNodes].forEach((node, index) => {
+            if (node.hasChildNodes()) {
+                if (autoOptionsTag) {
+                    this.insertNodes(node, node.childNodes, autoOptionsTag);
+                }
+                else {
+                    this.insertNodes(node, node.childNodes);
+                }
+            }
+            else {
+                if (node.nodeValue?.includes(this.tagIdentifier)) {
+                    if (autoOptionsTag) {
+                        this.insertAutoOptionsTag(node, autoOptionsTag);
+                    }
+                    this.setFilterValue(node.nodeValue);
+                    return;
+                }
+            }
+        });
+    }
+    insertAutoOptionsTag(node, autoOptionsTag) {
+        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) {
+        //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) {
+        this.toggleDropdown(false);
+        let autoOptionsTag = document.createElement('span');
+        autoOptionsTag.setAttribute('class', 'chips');
+        autoOptionsTag.setAttribute('contentEditable', 'false');
+        autoOptionsTag.innerText = option;
+        this.insertNodes(this.contentEditor, this.contentEditor.childNodes, autoOptionsTag);
+        this.resetOptions();
+        this.emitInputChange();
+    }
+    resetOptions() {
+        this.filteredOptions = this.options;
+        this.filteredValue = '';
+    }
+    renderAutoOptions() {
+        return html `<div
+      class="${classMap({
+            'nile-options-container': true,
+            'dropdown-position': this.type === 'text-area',
+        })}"
+    >
+      ${this.filteredOptions &&
+            this.filteredOptions.map((option) => {
+                return html ` <nile-option
+          .value="${option}"
+          @click="${(event) => {
+                    this.handleOptions(option);
+                }}"
+          >${option}
+        </nile-option>`;
+            })}
+    </div>`;
+    }
+    render() {
+        const hasHelpText = this.helpText ? true : false;
+        const hasError = !!this.error;
+        const hasErrorMessage = !!this.errorMessage;
+        const readonly = !!this.readonly;
+        const noborder = !!this.noborder;
+        const type = this.type;
+        return html `
+      <nile-popup
+        .active="${live(this.openDropdown)}"
+        sync="width"
+        strategy="fixed"
+        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="${!readonly}"
+            spellcheck="false"
+            class=${classMap({
+            'content-editable-input': true,
+            error: hasError || hasErrorMessage,
+            'read-only': readonly,
+            'no-border': noborder,
+            '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.filteredOptions && !!this.filteredOptions.length
+            ? this.renderAutoOptions()
+            : null}
+      </nile-popup>
+    `;
+    }
+};
+NileContentEditor.styles = styles;
+__decorate([
+    property()
+], NileContentEditor.prototype, "value", void 0);
+__decorate([
+    property()
+], NileContentEditor.prototype, "options", void 0);
+__decorate([
+    property()
+], NileContentEditor.prototype, "filteredOptions", void 0);
+__decorate([
+    property()
+], NileContentEditor.prototype, "showLabel", void 0);
+__decorate([
+    property()
+], NileContentEditor.prototype, "labelText", void 0);
+__decorate([
+    property()
+], NileContentEditor.prototype, "type", void 0);
+__decorate([
+    property()
+], NileContentEditor.prototype, "required", void 0);
+__decorate([
+    query('.content-editable-input')
+], NileContentEditor.prototype, "contentEditor", void 0);
+__decorate([
+    query('.nile-options-container')
+], NileContentEditor.prototype, "autoOptions", void 0);
+__decorate([
+    state()
+], NileContentEditor.prototype, "openDropdown", void 0);
+__decorate([
+    property({ attribute: 'help-text' })
+], NileContentEditor.prototype, "helpText", void 0);
+__decorate([
+    property({ attribute: 'readonly' })
+], NileContentEditor.prototype, "readonly", void 0);
+__decorate([
+    property({ attribute: 'error-message' })
+], NileContentEditor.prototype, "errorMessage", void 0);
+__decorate([
+    property({ attribute: 'error' })
+], NileContentEditor.prototype, "error", void 0);
+__decorate([
+    property({ attribute: 'noborder' })
+], NileContentEditor.prototype, "noborder", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileContentEditor.prototype, "updateValue", void 0);
+__decorate([
+    state()
+], NileContentEditor.prototype, "initialValue", void 0);
+__decorate([
+    watch(['type', 'value'], { waitUntilFirstUpdate: true })
+], NileContentEditor.prototype, "handleTypeChange", null);
+NileContentEditor = __decorate([
+    customElement('nile-content-editor')
+], NileContentEditor);
+export { NileContentEditor };
+export default NileContentEditor;
+//# sourceMappingURL=nile-content-editor.js.map

package/dist/src/nile-content-editor/nile-content-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-content-editor.js","sourceRoot":"","sources":["../../../src/nile-content-editor/nile-content-editor.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, TemplateResult } from 'lit';\nimport { customElement, query, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-content-editor.css';\nimport { CSSResultGroup } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../internal/watch';\nimport { KeyCode } from '../internal/enum';\nimport { live } from 'lit/directives/live.js';\n\n/**\n * Nile icon component.\n *\n * @tag nile-attribute-expression\n *\n */\n@customElement('nile-content-editor')\nexport class NileContentEditor extends NileElement {\n  /**\n * @summary Allows you to handle both input and dropdown selection\n\n * @dependency nile-option\n \n * @event nile-change - Emitted when the control's value changes.  \n */\n\n  @property() value: string = '';\n\n  @property() options: Array<any>;\n\n  @property() filteredOptions: Array<any>;\n\n  @property() showLabel: boolean = true;\n\n  @property() labelText = '';\n\n  @property() type = 'text|text-area';\n\n  @property() required: boolean = true;\n\n  @query('.content-editable-input') contentEditor: HTMLInputElement;\n  @query('.nile-options-container') autoOptions: HTMLInputElement;\n\n  @state() openDropdown = false;\n\n  tagIdentifier = '$';\n\n  filteredValue = '';\n\n  @property({ attribute: 'help-text' }) helpText = '';\n\n  @property({ attribute: 'readonly' }) readonly = false;\n\n  @property({ attribute: 'error-message' }) errorMessage = '';\n\n  @property({ attribute: 'error' }) error = false;\n  @property({ attribute: 'noborder' }) noborder = false;\n  @property({ type: Boolean }) updateValue: any = false;\n\n  @state() initialValue = '';\n\n  static styles: CSSResultGroup = styles;\n\n  connectedCallback() {\n    this.handleOutsideClick = this.handleOutsideClick.bind(this);\n    this.handleClipboardEvent = this.handleClipboardEvent.bind(this);\n    super.connectedCallback();\n    this.emit('nile-init');\n    this.addOpenListeners();\n    this.setInitialValues();\n  }\n\n  addOpenListeners() {\n    window.addEventListener('click', this.handleOutsideClick);\n    this.addEventListener('cut', this.handleClipboardEvent);\n    this.addEventListener('copy', this.handleClipboardEvent);\n    this.addEventListener('paste', this.handleClipboardEvent);\n  }\n\n  removeOpenListeners() {\n    this.removeEventListener('click', this.handleOutsideClick);\n    this.removeEventListener('cut', this.handleClipboardEvent);\n    this.removeEventListener('copy', this.handleClipboardEvent);\n    this.removeEventListener('paste', this.handleClipboardEvent);\n  }\n\n  handleOutsideClick(event: any) {\n    if (event && event.target && !this.contains(event.target)) {\n      this.toggleDropdown(false);\n    }\n  }\n\n  async handleClipboardEvent(event: Event) {\n    const selectedText = window?.getSelection()?.toString();\n    switch (event.type) {\n      case 'cut':\n      case 'copy':\n        if (!!selectedText) await navigator.clipboard.writeText(selectedText);\n        document.execCommand(event.type);\n        break;\n      case 'paste':\n        event.preventDefault();\n        let pastedText = '';\n        pastedText = await navigator.clipboard.readText();\n        pastedText = pastedText\n          .replace(/<(|\\/)(html|body|meta|span)[^>]*?>/gi, '')\n          .trim();\n        document.execCommand('insertText', false, pastedText);\n        break;\n      default:\n        break;\n    }\n    setTimeout(() => {\n      this.emitInputChange();\n    });\n  }\n\n  toggleDropdown(value: boolean) {\n    this.openDropdown = value;\n  }\n\n  setInitialValues() {\n    this.updateComplete.then(res => {\n      if (res)\n        this.contentEditor.innerHTML = this.generateHTMLTagsWithValues(\n          this.value\n        );\n    });\n  }\n\n  @watch(['type', 'value'], { waitUntilFirstUpdate: true })\n  handleTypeChange() {\n    if (this.updateValue) {\n      this.contentEditor.innerHTML = this.generateHTMLTagsWithValues(\n        this.value\n      );\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeOpenListeners();\n    this.emit('nile-destroy');\n  }\n\n  private handlekeyDown(event: any) {\n    if (event.code === KeyCode.ENTER && this.type === 'text') {\n      event.preventDefault();\n      return;\n    }\n    if (\n      [KeyCode.CUT, KeyCode.COPY, KeyCode.PASTE].includes(event.code) &&\n      (event.ctrlKey || event.metaKey)\n    ) {\n      return;\n    }\n\n    if (event.code === KeyCode.ESCAPE) {\n      event.preventDefault();\n      this.toggleDropdown(false);\n      return;\n    }\n    setTimeout(() => {\n      const value = this.contentEditor.innerText;\n      this.emitInputChange();\n      if (value.includes(this.tagIdentifier)) {\n        this.insertNodes(this.contentEditor, this.contentEditor.childNodes);\n        this.filterOptions();\n        this.toggleDropdown(true);\n      } else {\n        this.toggleDropdown(false);\n      }\n    }, 10);\n  }\n\n  filterOptions() {\n    this.filteredOptions = this.options;\n    this.filteredValue = this.filteredValue.trim();\n    if (!!this.options.length && !!this.filteredValue) {\n      this.filteredOptions = this.options.filter(item =>\n        item.includes(this.filteredValue)\n      );\n    } else {\n      this.filteredOptions = this.options;\n    }\n  }\n\n  generateValuesFromHTMLTags(string: any): string {\n    let errorTag =\n      /<span class=\"chips chip-error\" contenteditable=\"false\">(.*?)<\\/span>/g;\n    this.error = !!string.match(errorTag);\n    var pattern =\n      /<span class=\"chips(?: chip-error)?\" contenteditable=\"false\">(.*?)<\\/span>/g;\n    let result = string.replace(pattern, (match: any, option: any) => {\n      return '{{' + option + '}}';\n    });\n    return result;\n  }\n\n  generateHTMLTagsWithValues(string: any): string {\n    var pattern = /{{(.*?)}}/g;\n    var result = string.replace(pattern, (match: any, option: any) => {\n      return this.options.includes(option)\n        ? '<span class=\"chips\" contenteditable=\"false\">' + option + '</span>'\n        : this.setError(option);\n    });\n    return result;\n  }\n\n  setError(option: any) {\n    this.error = true;\n    return (\n      '<span class=\"chips chip-error\" contenteditable=\"false\">' +\n      option +\n      '</span>'\n    );\n  }\n\n  emitInputChange(): void {\n    if (this.contentEditor) {\n      let fieldValue = this.contentEditor.innerHTML;\n      fieldValue = fieldValue.replace(/&nbsp;/g, ' ');\n      fieldValue = fieldValue.replace('<br>', '');\n      this.emit('nile-change', {\n        value: this.generateValuesFromHTMLTags(fieldValue),\n      });\n    }\n  }\n\n  replaceText = '';\n\n  insertNodes(\n    parentNode: Node,\n    childNodes: NodeList,\n    autoOptionsTag?: HTMLElement\n  ) {\n    [...childNodes].forEach((node: Node, index: number) => {\n      if (node.hasChildNodes()) {\n        if (autoOptionsTag) {\n          this.insertNodes(node, node.childNodes, autoOptionsTag);\n        } else {\n          this.insertNodes(node, node.childNodes);\n        }\n      } else {\n        if (node.nodeValue?.includes(this.tagIdentifier)) {\n          if (autoOptionsTag) {\n            this.insertAutoOptionsTag(node, autoOptionsTag);\n          }\n\n          this.setFilterValue(node.nodeValue);\n\n          return;\n        }\n      }\n    });\n  }\n\n  insertAutoOptionsTag(node: any, autoOptionsTag: any) {\n    const selection = window.getSelection();\n    const range = document.createRange();\n    const curssorNodeindex = node.nodeValue.indexOf(this.tagIdentifier);\n    range.setStart(node, curssorNodeindex);\n    range.insertNode(autoOptionsTag);\n    range.setStartAfter(autoOptionsTag);\n    range.collapse(true);\n    selection?.removeAllRanges();\n    selection?.addRange(range);\n\n    if (autoOptionsTag.nextSibling?.nodeValue) {\n      autoOptionsTag.nextSibling.nodeValue =\n        autoOptionsTag.nextSibling?.nodeValue?.replace(\n          this.tagIdentifier + this.filteredValue,\n          ''\n        );\n    }\n    this.contentEditor.focus();\n  }\n\n  setFilterValue(value: any) {\n    //replace Text - check if text exists after tagidentifier , if exists take account of that too\n    if (!this.openDropdown) {\n      this.replaceText = value.split(this.tagIdentifier).slice(1).join();\n    }\n    if (!!value && this.openDropdown) {\n      this.filteredValue = value\n        ?.split(this.tagIdentifier)\n        .slice(1)\n        .join()\n        .replace(this.replaceText, '');\n    } else {\n      this.filteredValue = '';\n    }\n  }\n\n  handleOptions(option: any): void {\n    this.toggleDropdown(false);\n    let autoOptionsTag = document.createElement('span');\n    autoOptionsTag.setAttribute('class', 'chips');\n    autoOptionsTag.setAttribute('contentEditable', 'false');\n    autoOptionsTag.innerText = option;\n    this.insertNodes(\n      this.contentEditor,\n      this.contentEditor.childNodes,\n      autoOptionsTag\n    );\n    this.resetOptions();\n    this.emitInputChange();\n  }\n\n  resetOptions() {\n    this.filteredOptions = this.options;\n    this.filteredValue = '';\n  }\n\n  public renderAutoOptions(): TemplateResult {\n    return html`<div\n      class=\"${classMap({\n        'nile-options-container': true,\n        'dropdown-position': this.type === 'text-area',\n      })}\"\n    >\n      ${this.filteredOptions &&\n      this.filteredOptions.map((option: any) => {\n        return html` <nile-option\n          .value=\"${option}\"\n          @click=\"${(event: Event) => {\n            this.handleOptions(option);\n          }}\"\n          >${option}\n        </nile-option>`;\n      })}\n    </div>`;\n  }\n\n  public render(): TemplateResult {\n    const hasHelpText = this.helpText ? true : false;\n    const hasError = !!this.error;\n    const hasErrorMessage = !!this.errorMessage;\n    const readonly = !!this.readonly;\n    const noborder = !!this.noborder;\n    const type = this.type;\n    return html`\n      <nile-popup\n        .active=\"${live(this.openDropdown)}\"\n        sync=\"width\"\n        strategy=\"fixed\"\n        placement=\"bottom\"\n        class=${classMap({\n          dropdown: true,\n          'dropdown--open': true,\n          popup: true,\n        })}\n      >\n        <div class=\"content-editable-wrapper\" slot=\"anchor\">\n          ${this.showLabel && this.labelText\n            ? html`<label class=\"ods-label\">${this.labelText} </label> ${this\n                  .required\n                  ? html`<span class=\"asterik\">*</span>`\n                  : ''}`\n            : ''}\n          <div\n            contenteditable=\"${!readonly}\"\n            spellcheck=\"false\"\n            class=${classMap({\n              'content-editable-input': true,\n              error: hasError || hasErrorMessage,\n              'read-only': readonly,\n              'no-border': noborder,\n              'text-area': type === 'text-area' ? true : false,\n            })}\n            @keydown=${this.handlekeyDown}\n          ></div>\n          ${hasHelpText\n            ? html`\n                <nile-form-help-text>${this.helpText}</nile-form-help-text>\n              `\n            : ``}\n          ${hasErrorMessage\n            ? html`\n                <nile-form-error-message\n                  >${this.errorMessage}</nile-form-error-message\n                >\n              `\n            : ``}\n        </div>\n        ${this.filteredOptions && !!this.filteredOptions.length\n          ? this.renderAutoOptions()\n          : null}\n      </nile-popup>\n    `;\n  }\n}\n\nexport default NileContentEditor;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-content-editor': NileContentEditor;\n  }\n}\n"]}

package/dist/src/nile-date-picker/index.js

@@ -0,0 +1,2 @@
+export { NileDatePicker } from './nile-date-picker';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-date-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-date-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { NileDatePicker } from './nile-date-picker';\n"]}

package/dist/src/nile-date-picker/nile-date-picker.css.js

@@ -0,0 +1,23 @@
+/**
+ * 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';
+/**
+ * DatePicker CSS
+ */
+export const styles = css `
+  :host {
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+  nile-dropdown{
+    display:block;
+    width: 100%;
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-date-picker.css.js.map

package/dist/src/nile-date-picker/nile-date-picker.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-date-picker.css.js","sourceRoot":"","sources":["../../../src/nile-date-picker/nile-date-picker.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;CAUxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * DatePicker CSS\n */\nexport const styles = css`\n  :host {\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n  nile-dropdown{\n    display:block;\n    width: 100%;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-date-picker/nile-date-picker.js

@@ -0,0 +1,125 @@
+/**
+ * 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 { __decorate } from "tslib";
+import { html, } from 'lit';
+import { customElement, query, property } from 'lit/decorators.js';
+import { styles } from './nile-date-picker.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-date-picker
+ *
+ */
+let NileDatePicker = class NileDatePicker extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.range = false;
+        this.hideTypes = false;
+        this.doubleClickUnselect = false;
+        this.allowClear = false;
+        this.open = false;
+        this.hideTimeZone = false;
+        this.type = 'absolute';
+        this.showManualInputs = false;
+        this.hideDurationFields = [];
+        this.allowedDates = '{}';
+    }
+    /**
+     * The styles for DatePicker
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render() {
+        return html `
+      <nile-dropdown .open="${this.open}" part="dd-base" .hoist="${true}" distance="6" exportparts="base">
+        <slot slot="trigger" part="trigger" name="trigger"></slot>
+        <nile-calendar
+          .hideTypes="${this.hideTypes}"
+        	.type="${this.type}"
+          value="${this.value}"
+          .range="${this.range}"
+          @nile-init="${(e) => e.stopPropagation()}"
+          @nile-destroy="${(e) => e.stopPropagation()}"
+          @nile-changed="${(e) => e.stopPropagation()}"
+          @nile-change="${this.handleChanged}"
+          .allowedDates="${this.allowedDates}"
+          @nile-type-change="${(e) => { e.stopPropagation(); this.emit('nile-type-change', e.detail); }}"
+          @nile-clear="${(e) => { e.stopPropagation(); this.emit('nile-clear'); }}"
+          .hideDurationFields="${this.hideDurationFields}"
+          .showManualInputs="${this.showManualInputs}"
+          .doubleClickUnselect="${this.doubleClickUnselect}"
+          .allowClear="${this.allowClear}"
+        ></nile-calendar>
+      </nile-dropdown>
+    `;
+    }
+    handleChanged(event) {
+        event.stopPropagation();
+        this.emit('nile-changed', event.detail);
+        this.emit('nile-change', event.detail);
+        if (this.dropdown) {
+            this.dropdown.hide();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.emit('nile-init');
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.emit('nile-destroy');
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], NileDatePicker.prototype, "range", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileDatePicker.prototype, "hideTypes", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileDatePicker.prototype, "doubleClickUnselect", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileDatePicker.prototype, "allowClear", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileDatePicker.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-time-zone' })
+], NileDatePicker.prototype, "hideTimeZone", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileDatePicker.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'showManualInputs' })
+], NileDatePicker.prototype, "showManualInputs", void 0);
+__decorate([
+    property()
+], NileDatePicker.prototype, "value", void 0);
+__decorate([
+    property({ type: Array, attribute: 'hide-duration-fields' })
+], NileDatePicker.prototype, "hideDurationFields", void 0);
+__decorate([
+    property({ attribute: 'allowedDates' })
+], NileDatePicker.prototype, "allowedDates", void 0);
+__decorate([
+    query('nile-dropdown')
+], NileDatePicker.prototype, "dropdown", void 0);
+NileDatePicker = __decorate([
+    customElement('nile-date-picker')
+], NileDatePicker);
+export { NileDatePicker };
+export default NileDatePicker;
+//# sourceMappingURL=nile-date-picker.js.map

package/dist/src/nile-date-picker/nile-date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-date-picker.js","sourceRoot":"","sources":["../../../src/nile-date-picker/nile-date-picker.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, query, property } from 'lit/decorators.js';\nimport { styles } from './nile-date-picker.css';\nimport NileElement from '../internal/nile-element';\nimport { NileDropdown } from '../nile-dropdown';\n\n/**\n * Nile icon component.\n *\n * @tag nile-date-picker\n *\n */\n@customElement('nile-date-picker')\nexport class NileDatePicker extends NileElement {\n  /**\n   * The styles for DatePicker\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @property({ type: Boolean }) range = false;\n\n  @property({ type: Boolean }) hideTypes = false;\n\n  @property({ type: Boolean, reflect: true }) doubleClickUnselect = false;\n\n  @property({ type: Boolean, reflect: true }) allowClear = false;\n\n  @property({ type: Boolean }) open = false;\n\n  @property({ type: Boolean, attribute: 'hide-time-zone' }) hideTimeZone = false;\n\n  @property({ type: String, reflect: true }) type :'absolute' | 'relative' = 'absolute';\n\n  @property({ type: Boolean, attribute: 'showManualInputs' })\n  showManualInputs = false;\n\n  @property() value: any;\n  @property({ type: Array, attribute: 'hide-duration-fields' })\n  hideDurationFields: any = [];\n\n  @property({ attribute: 'allowedDates' }) allowedDates: any = '{}';\n\n  @query('nile-dropdown') dropdown: NileDropdown;\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  render(): TemplateResult {\n    return html`\n      <nile-dropdown .open=\"${this.open}\" part=\"dd-base\" .hoist=\"${true}\" distance=\"6\" exportparts=\"base\">\n        <slot slot=\"trigger\" part=\"trigger\" name=\"trigger\"></slot>\n        <nile-calendar\n          .hideTypes=\"${this.hideTypes}\"\n        \t.type=\"${this.type}\"\n          value=\"${this.value}\"\n          .range=\"${this.range}\"\n          @nile-init=\"${(e:CustomEvent)=>e.stopPropagation()}\"\n          @nile-destroy=\"${(e:CustomEvent)=>e.stopPropagation()}\"\n          @nile-changed=\"${(e:CustomEvent)=>e.stopPropagation()}\"\n          @nile-change=\"${this.handleChanged}\"\n          .allowedDates=\"${this.allowedDates}\"\n          @nile-type-change=\"${(e:CustomEvent)=>{e.stopPropagation();this.emit('nile-type-change',e.detail)}}\"\n          @nile-clear=\"${(e:CustomEvent)=>{e.stopPropagation();this.emit('nile-clear')}}\"\n          .hideDurationFields=\"${this.hideDurationFields}\"\n          .showManualInputs=\"${this.showManualInputs}\"\n          .doubleClickUnselect=\"${this.doubleClickUnselect}\"\n          .allowClear=\"${this.allowClear}\"\n        ></nile-calendar>\n      </nile-dropdown>\n    `;\n  }\n\n  handleChanged(event: CustomEvent) {\n    event.stopPropagation()\n    this.emit('nile-changed', event.detail);\n    this.emit('nile-change', event.detail);\n    if (this.dropdown) {\n      this.dropdown.hide();\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.emit('nile-init');\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.emit('nile-destroy');\n  }\n}\n\nexport default NileDatePicker;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-date-picker': NileDatePicker;\n  }\n}\n"]}

package/dist/src/nile-dialog/index.js

@@ -0,0 +1,2 @@
+export { NileDialog } from './nile-dialog';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { NileDialog } from './nile-dialog';\n"]}