@aquera/nile-elements 0.0.18 → 0.0.20

package/package.json

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

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

@@ -96,6 +96,10 @@ export const styles = css`
   .asterik {
     color: #e5434d;
   }
+
+  .no-border {
+    border: none;
+  }
 `;
 
 export default [styles];

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

@@ -61,6 +61,7 @@ export class NileContentEditor extends NileElement {
   @property({ attribute: 'error-message' }) errorMessage = '';
 
   @property({ attribute: 'error' }) error = false;
+  @property({ attribute: 'noborder' }) noborder = false;
 
   static styles: CSSResultGroup = styles;
 
@@ -83,17 +84,17 @@ 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);
+    this.addEventListener('click', this.handleOutsideClick);
+    this.addEventListener('cut', this.handleClipboardEvent);
+    this.addEventListener('copy', this.handleClipboardEvent);
+    this.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);
+    this.removeEventListener('click', this.handleOutsideClick);
+    this.removeEventListener('cut', this.handleClipboardEvent);
+    this.removeEventListener('copy', this.handleClipboardEvent);
+    this.removeEventListener('paste', this.handleClipboardEvent);
   }
 
   async handleClipboardEvent(event: Event) {
@@ -106,7 +107,8 @@ export class NileContentEditor extends NileElement {
         break;
       case 'paste':
         event.preventDefault();
-        let pastedText = await navigator.clipboard.readText();
+        let pastedText = '';
+        pastedText = await navigator.clipboard.readText();
         pastedText = pastedText
           .replace(/<(|\/)(html|body|meta|span)[^>]*?>/gi, '')
           .trim();
@@ -130,7 +132,7 @@ export class NileContentEditor extends NileElement {
     }
   }
 
-  @watch('type', { waitUntilFirstUpdate: true })
+  @watch(['type'], { waitUntilFirstUpdate: true })
   handleTypeChange() {
     this.contentEditor.innerHTML = this.generateHTMLTagsWithValues(this.value);
   }
@@ -152,6 +154,15 @@ export class NileContentEditor extends NileElement {
     ) {
       return;
     }
+
+    if (event.code === KeyCode.ARROW_RIGHT) {
+      this.contentEditor.focus();
+      // select all the content in the element
+      document.execCommand('selectAll', false, undefined);
+      // collapse selection to the end
+
+      document?.getSelection()?.collapseToEnd();
+    }
     if (event.code === KeyCode.ESCAPE) {
       event.preventDefault();
       this.toggleDropdown(false);
@@ -172,6 +183,7 @@ export class NileContentEditor extends NileElement {
 
   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)
@@ -292,6 +304,7 @@ export class NileContentEditor extends NileElement {
     const hasError = !!this.error;
     const hasErrorMessage = !!this.errorMessage;
     const readonly = !!this.readonly;
+    const noborder = !!this.noborder;
     const type = this.type;
     return html`
       <nile-popup
@@ -319,6 +332,7 @@ export class NileContentEditor extends NileElement {
               'content-editable-input': true,
               error: hasError || hasErrorMessage,
               'read-only': readonly,
+              'no-border': noborder,
               'text-area': type === 'text-area' ? true : false,
             })}
             @keydown=${this.handlekeyDown}

package/src/nile-radio-group/nile-radio-group.ts

@@ -268,7 +268,7 @@ export class NileRadioGroup extends NileElement {
             ${defaultSlot}
               `
             :  html`
-            <div class="${this.labelInline ? `form-control--inline-radio`:``}"> ${defaultSlot}</div> `}
+            <div part="options-base" class="${this.labelInline ? `form-control--inline-radio`:``}"> ${defaultSlot}</div> `}
         </div>
 
         ${

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

@@ -22,15 +22,18 @@ export const styles = css`
   }
   .input-container {
     display: flex;
+    gap: 0.5rem;
   }
 
-  .input-container > :first-child {
-    width: 100%;
-    padding-right: 12px;
+  .tooltip-container {
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 0;
   }
-  .flex-start {
-    align-items: flex-start;
-    padding-top: 10px;
+
+  .input-container > :first-child {
+    flex-grow: 1;
+    flex-shrink: 0;
   }
 
   nile-radio {

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

@@ -57,6 +57,7 @@ export interface switchInputType {
   options?: Array<any>;
   helperText?: string;
   multiple?: boolean;
+  noborder?: boolean;
 }
 
 export enum INPUT_TYPE {
@@ -199,12 +200,14 @@ export class NileSwitcher extends NileElement {
       errorMessage,
       type,
       readonly,
+      noborder,
     } = Input;
     return html`<nile-content-editor
       .value=${value}
       .options=${options}
       .type=${type}
       .readonly=${readonly}
+      .noborder=${noborder}
       .errorMessage=${errorMessage}
       @nile-change=${(e: CustomEvent) => {
         this.handleChange(e, inputType, inputTypeName);
@@ -241,12 +244,17 @@ export class NileSwitcher extends NileElement {
       ? defaultHelperText
       : `switch to ${defaultInput.inputType}`;
 
-    return html` <nile-tooltip content=${helperText} placement="bottom">
+    return html` <nile-tooltip
+      class=${classMap({
+        'tooltip-container': true,
+      })}
+      content=${helperText}
+      placement="bottom"
+    >
       <nile-icon
         size="14"
         class=${classMap({
           'pointer-cursor': true,
-          'flex-start': true,
         })}
         .name=${icon}
         color="#005EA6"