@aquera/nile-elements 0.0.11 → 0.0.13

package/package.json

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

package/src/internal/enum.ts

@@ -14,4 +14,7 @@ export const KeyCode = {
   ARROW_UP: 'ArrowUp',
   ARROW_RIGHT: 'ArrowRight',
   ARROW_DOWN: 'ArrowDown',
+  CUT: 'KeyX',
+  COPY: 'Copy',
+  PASTE: 'Paste',
 };

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

@@ -25,7 +25,7 @@ export const styles = css`
 
   .dropdown-position {
     position: relative;
-    bottom: 60px;
+    bottom: 20px;
   }
   .content-editable-input {
     box-sizing: border-box;

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

@@ -66,6 +66,7 @@ export class NileContentEditor extends NileElement {
 
   connectedCallback() {
     this.handleOutsideClick = this.handleOutsideClick.bind(this);
+    this.handleClipboardEvent = this.handleClipboardEvent.bind(this);
     super.connectedCallback();
     this.emit('nile-init');
     this.addOpenListeners();
@@ -83,10 +84,38 @@ export class NileContentEditor extends NileElement {
 
   addOpenListeners() {
     window.addEventListener('click', this.handleOutsideClick);
+    window.addEventListener('cut', this.handleClipboardEvent);
+    window.addEventListener('copy', this.handleClipboardEvent);
+    window.addEventListener('paste', this.handleClipboardEvent);
   }
 
   removeOpenListeners() {
     window.removeEventListener('click', this.handleOutsideClick);
+    window.removeEventListener('cut', this.handleClipboardEvent);
+    window.removeEventListener('copy', this.handleClipboardEvent);
+    window.removeEventListener('paste', this.handleClipboardEvent);
+  }
+
+  async handleClipboardEvent(event: Event) {
+    const selectedText = window?.getSelection()?.toString();
+    if (!!selectedText) {
+      switch (event.type) {
+        case 'cut':
+        case 'copy':
+          await navigator.clipboard.writeText(selectedText);
+          document.execCommand(event.type);
+          break;
+        case 'paste':
+          const pastedText = await navigator.clipboard.readText();
+          document.execCommand('insertText', false, pastedText);
+          break;
+        default:
+          break;
+      }
+    }
+    setTimeout(() => {
+      this.emitInputChange();
+    });
   }
 
   toggleDropdown(value: boolean) {
@@ -110,20 +139,14 @@ export class NileContentEditor extends NileElement {
     this.emit('nile-destroy');
   }
 
-  handlePaste(event: ClipboardEvent) {
-    event.preventDefault();
-    if (event.clipboardData) {
-      let text = event.clipboardData.getData('text/plain');
-      document.execCommand('insertText', false, text);
-    }
-    this.emitInputChange();
-  }
-
   private handlekeyDown(event: any) {
     if (event.code === KeyCode.ENTER && this.type === 'text') {
       event.preventDefault();
       return;
     }
+    if ([KeyCode.CUT, KeyCode.COPY, KeyCode.PASTE].includes(event.code)) {
+      return;
+    }
     if (event.code === KeyCode.ESCAPE) {
       event.preventDefault();
       this.toggleDropdown(false);
@@ -133,8 +156,9 @@ export class NileContentEditor extends NileElement {
       const value = this.contentEditor.innerText;
       this.emitInputChange();
       if (value.includes(this.tagIdentifier)) {
-        this.toggleDropdown(true);
+        this.insertNodes(this.contentEditor, this.contentEditor.childNodes);
         this.filterOptions();
+        this.toggleDropdown(true);
       } else {
         this.toggleDropdown(false);
       }
@@ -176,7 +200,6 @@ export class NileContentEditor extends NileElement {
   emitInputChange(): void {
     if (this.contentEditor) {
       let fieldValue = this.contentEditor.innerHTML;
-
       if (this.contentEditor.innerText !== '') {
         fieldValue = this.generateValuesFromHTMLTags(fieldValue);
       }
@@ -188,17 +211,29 @@ export class NileContentEditor extends NileElement {
     }
   }
 
-  insertNodes(parentNode: Node, childNodes: NodeList, autoOptionsTag: Node) {
-    Array.from(childNodes).map((node: Node, index: number) => {
+  insertNodes(parentNode: Node, childNodes: NodeList, autoOptionsTag?: Node) {
+    [...childNodes].forEach((node: Node, index: number) => {
       if (node.hasChildNodes()) {
-        this.insertNodes(node, node.childNodes, autoOptionsTag);
+        if (autoOptionsTag) {
+          this.insertNodes(node, node.childNodes, autoOptionsTag);
+        } else {
+          this.insertNodes(node, node.childNodes);
+        }
       } else {
         if (node.nodeValue?.includes(this.tagIdentifier)) {
-          parentNode.childNodes[index].nodeValue = node.nodeValue?.replace(
-            this.tagIdentifier + this.filteredValue,
-            ''
-          );
-          parentNode.childNodes[index].after(autoOptionsTag);
+          if (autoOptionsTag) {
+            parentNode.childNodes[index].nodeValue = node.nodeValue?.replace(
+              this.tagIdentifier + this.filteredValue,
+              ''
+            );
+            parentNode.childNodes[index].after(autoOptionsTag);
+          }
+          this.filteredValue =
+            parentNode?.childNodes[index]?.nodeValue
+              ?.split(this.tagIdentifier)
+              .slice(1)
+              .join() || '';
+          return;
         }
       }
     });
@@ -250,6 +285,7 @@ export class NileContentEditor extends NileElement {
       <nile-popup
         .active="${live(this.openDropdown)}"
         sync="width"
+        strategy="fixed"
         placement="bottom"
         class=${classMap({
           dropdown: true,
@@ -261,7 +297,7 @@ export class NileContentEditor extends NileElement {
           ${this.showLabel && this.labelText
             ? html`<label class="ods-label">${this.labelText} </label> ${this
                   .required
-                  ? html`<sapn class="asterik">*</span>`
+                  ? html`<span class="asterik">*</span>`
                   : ''}`
             : ''}
           <div
@@ -273,7 +309,6 @@ export class NileContentEditor extends NileElement {
               'text-area': type === 'text-area' ? true : false,
             })}
             @keydown=${this.handlekeyDown}
-            @paste=${this.handlePaste}
           ></div>
           ${hasHelpText
             ? html`

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

@@ -115,6 +115,9 @@ export const styles = css`
     overflow: auto;
     -webkit-overflow-scrolling: touch;
     border: 1px solid #e5e9eb;
+  }
+
+  .dialog__body-noheader {
     border-radius: 4px 4px 0px 0px;
   }
 

package/src/nile-dialog/nile-dialog.ts

@@ -30,7 +30,6 @@ import NileElement from '../internal/nile-element';
  */
 @customElement('nile-dialog')
 export class NileDialog extends NileElement {
-
   static styles: CSSResultGroup = styles;
 
   private readonly hasSlotController = new HasSlotController(this, 'footer');
@@ -61,6 +60,16 @@ export class NileDialog extends NileElement {
 
   @property({ type: Boolean, reflect: true }) preventOverlayClose = false;
 
+
+  /**
+   *  Added to resolve conflicts between Angular Material's mat-drawer components.
+   */
+  private drawerStyle = `
+      <style id="drawer-style">
+        .mat-drawer.mat-drawer-side { z-index: 1; }
+      </style>
+  `;
+
   connectedCallback() {
     super.connectedCallback();
     this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
@@ -74,6 +83,7 @@ export class NileDialog extends NileElement {
       this.addOpenListeners();
       this.modal.activate();
       lockBodyScrolling(this);
+      document.head.insertAdjacentHTML('beforeend', this.drawerStyle);
     }
   }
 
@@ -83,19 +93,20 @@ export class NileDialog extends NileElement {
   }
 
   private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {
-
     const nileRequestClose = this.emit('nile-request-close', {
       cancelable: true,
-      detail: { source }
+      detail: { source },
     });
 
-    if(source === 'close-button'){
+    if (source === 'close-button') {
       this.hide();
       return;
     }
 
-    if (nileRequestClose.defaultPrevented || this.preventOverlayClose ) {
-      const animation = getAnimation(this, 'dialog.denyClose', { dir: 'right'});
+    if (nileRequestClose.defaultPrevented || this.preventOverlayClose) {
+      const animation = getAnimation(this, 'dialog.denyClose', {
+        dir: 'right',
+      });
       animateTo(this.panel, animation.keyframes, animation.options);
       return;
     }
@@ -121,12 +132,11 @@ export class NileDialog extends NileElement {
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {
     if (this.open) {
-      // Show
       this.emit('nile-show');
       this.addOpenListeners();
       this.originalTrigger = document.activeElement as HTMLElement;
       this.modal.activate();
-
+      document.head.insertAdjacentHTML('beforeend', this.drawerStyle);
       lockBodyScrolling(this);
 
       // When the dialog is shown, Safari will attempt to set focus on whatever element has autofocus. This can cause
@@ -140,17 +150,24 @@ export class NileDialog extends NileElement {
         autoFocusTarget.removeAttribute('autofocus');
       }
 
-      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
+      await Promise.all([
+        stopAnimations(this.dialog),
+        stopAnimations(this.overlay),
+      ]);
       this.dialog.hidden = false;
 
       // Set initial focus
       requestAnimationFrame(() => {
-        const nileInitialFocus = this.emit('nile-initial-focus', { cancelable: true });
+        const nileInitialFocus = this.emit('nile-initial-focus', {
+          cancelable: true,
+        });
 
         if (!nileInitialFocus.defaultPrevented) {
           // Set focus to the autofocus target and restore the attribute
           if (autoFocusTarget) {
-            (autoFocusTarget as HTMLInputElement).focus({ preventScroll: true });
+            (autoFocusTarget as HTMLInputElement).focus({
+              preventScroll: true,
+            });
           } else {
             this.panel.focus({ preventScroll: true });
           }
@@ -162,11 +179,19 @@ export class NileDialog extends NileElement {
         }
       });
 
-      const panelAnimation = getAnimation(this, 'dialog.show', { dir: 'right' });
-      const overlayAnimation = getAnimation(this, 'dialog.overlay.show', { dir: 'right' });
+      const panelAnimation = getAnimation(this, 'dialog.show', {
+        dir: 'right',
+      });
+      const overlayAnimation = getAnimation(this, 'dialog.overlay.show', {
+        dir: 'right',
+      });
       await Promise.all([
         animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
-        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)
+        animateTo(
+          this.overlay,
+          overlayAnimation.keyframes,
+          overlayAnimation.options
+        ),
       ]);
 
       this.emit('nile-after-show');
@@ -176,20 +201,39 @@ export class NileDialog extends NileElement {
       this.removeOpenListeners();
       this.modal.deactivate();
 
-      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
-      const panelAnimation = getAnimation(this, 'dialog.hide', { dir: 'right' });
-      const overlayAnimation = getAnimation(this, 'dialog.overlay.hide', { dir: 'right' });
+      await Promise.all([
+        stopAnimations(this.dialog),
+        stopAnimations(this.overlay),
+      ]);
+      const panelAnimation = getAnimation(this, 'dialog.hide', {
+        dir: 'right',
+      });
+      const overlayAnimation = getAnimation(this, 'dialog.overlay.hide', {
+        dir: 'right',
+      });
 
+      const styleTag = document.getElementById('drawer-style');
+      if (styleTag) {
+        document.head.removeChild(styleTag);
+      }
       // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to
       // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear
       // unexpectedly. We'll unhide them after all animations have completed.
       await Promise.all([
-        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {
+        animateTo(
+          this.overlay,
+          overlayAnimation.keyframes,
+          overlayAnimation.options
+        ).then(() => {
           this.overlay.hidden = true;
         }),
-        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {
+        animateTo(
+          this.panel,
+          panelAnimation.keyframes,
+          panelAnimation.options
+        ).then(() => {
           this.panel.hidden = true;
-        })
+        }),
       ]);
 
       this.dialog.hidden = true;
@@ -237,10 +281,15 @@ export class NileDialog extends NileElement {
         class=${classMap({
           dialog: true,
           'dialog--open': this.open,
-          'dialog--has-footer': this.hasSlotController.test('footer')
+          'dialog--has-footer': this.hasSlotController.test('footer'),
         })}
       >
-        <div part="overlay" class="dialog__overlay" @click=${() => this.requestClose('overlay')} tabindex="-1"></div>
+        <div
+          part="overlay"
+          class="dialog__overlay"
+          @click=${() => this.requestClose('overlay')}
+          tabindex="-1"
+        ></div>
 
         <div
           part="panel"
@@ -256,7 +305,11 @@ export class NileDialog extends NileElement {
             ? html`
                 <header part="header" class="dialog__header">
                   <h2 part="title" class="dialog__title" id="title">
-                    <slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
+                    <slot name="label">
+                      ${this.label.length > 0
+                        ? this.label
+                        : String.fromCharCode(65279)}
+                    </slot>
                   </h2>
                   <div part="header-actions" class="dialog__header-actions">
                     <slot name="header-actions"></slot>
@@ -274,7 +327,12 @@ export class NileDialog extends NileElement {
               `
             : ''}
 
-          <slot part="body" class="dialog__body"></slot>
+          <slot
+            part="body"
+            class="dialog__body  ${this.noHeader
+              ? 'dialog__body-noheader'
+              : ''}"
+          ></slot>
 
           <footer part="footer" class="dialog__footer">
             <slot name="footer"></slot>

package/src/nile-icon/icons/svg/document.ts

@@ -2,4 +2,4 @@
  * Do not edit directly
  */
 
-export default "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjEuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48Zz48cGF0aCBpZD0iZG9jdW1lbnRfMV8iIGQ9Ik0xNi4zLDAuMmw2LjQsNi40djE3LjFIMS4yVjAuM0wxNi4zLDAuMnogTTE1LjMsMS43SDIuOHYyMC41aDE4LjVWNy43aC02TDE1LjMsMS43eiBNMTcsMTYuMnYxLjVINwkJCXYtMS41SDE3eiBNMTcsMTEuMnYxLjVIN3YtMS41SDE3eiBNMTEsNi4ydjEuNUg3VjYuMkgxMXogTTE2LjgsMi44djMuNGgzLjRMMTYuOCwyLjh6Ii8+PC9nPjwvZz48L3N2Zz4=";
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMuNzUgNS43MzgyOEMzLjc1IDQuNDk1NjQgNC43NTczNiAzLjQ4ODI4IDYgMy40ODgyOEgxMy4zNzVWNS43MzgyOEMxMy4zNzUgNy44MDkzNSAxNS4wNTM5IDkuNDg4MjggMTcuMTI1IDkuNDg4MjhIMjAuMjVWMTkuNzM4M0MyMC4yNSAyMC45ODA5IDE5LjI0MjYgMjEuOTg4MyAxOCAyMS45ODgzSDZDNC43NTczNiAyMS45ODgzIDMuNzUgMjAuOTgwOSAzLjc1IDE5LjczODNWNS43MzgyOFpNMTkgNy45ODgyOEwxNC44NzUgNC4zODgyOFY1LjczODI4QzE0Ljg3NSA2Ljk4MDkyIDE1Ljg4MjQgNy45ODgyOCAxNy4xMjUgNy45ODgyOEgxOVpNNiAxLjk4ODI4QzMuOTI4OTMgMS45ODgyOCAyLjI1IDMuNjY3MjEgMi4yNSA1LjczODI4VjE5LjczODNDMi4yNSAyMS44MDkzIDMuOTI4OTMgMjMuNDg4MyA2IDIzLjQ4ODNIMThDMjAuMDcxMSAyMy40ODgzIDIxLjc1IDIxLjgwOTMgMjEuNzUgMTkuNzM4M1Y4LjM5NzM3TDE0LjQwNjIgMS45ODgyOEg2Wk02IDE4LjQ4ODNMMTggMTguNDg4M1YxNi45ODgzTDYgMTYuOTg4M0w2IDE4LjQ4ODNaTTE4IDE0LjIzODNMNiAxNC4yMzgzTDYgMTIuNzM4M0wxOCAxMi43MzgzVjE0LjIzODNaTTYgMTAuMjM4M0gxMVY4LjczODI4TDYgOC43MzgyOEw2IDEwLjIzODNaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==";

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

@@ -98,6 +98,7 @@ export class NileSwitcher extends NileElement {
       placeholder,
       disabled,
       required,
+      error,
       errorMessage,
       inputType: inputTypeName,
     } = Input;
@@ -108,7 +109,7 @@ export class NileSwitcher extends NileElement {
       .required=${required}
       .errorMessage=${errorMessage}
       .placeholder=${placeholder}
-      .error=${true}
+      .error=${error}
       @nile-input=${(e: CustomEvent) => {
         this.handleChange(e, inputType, inputTypeName);
       }}
@@ -138,10 +139,11 @@ export class NileSwitcher extends NileElement {
   }
 
   renderNileTextArea(Input: switchInputType, inputType: string) {
-    const { value, disabled, inputType: inputTypeName } = Input;
+    const { value, disabled, readonly, inputType: inputTypeName } = Input;
     return html`<nile-textarea
       .value=${value}
       .disabled=${disabled}
+      ?readonly=${readonly}
       @nile-input=${(e: CustomEvent) => {
         this.handleChange(e, inputType, inputTypeName);
       }}