@aquera/nile-elements 0.0.17 → 0.0.19

package/package.json

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

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

@@ -74,127 +74,176 @@ export const styles = css`
   }
 
   .button--standard.button--secondary {
-    background-color: var(--nile-colors-neutral-400);
-    border-color: var(--nile-colors-neutral-400);
-    color: var(--nile-colors-neutral-900);
+    background-color: var(--nile-colors-button-secondary);
+    border-color: var(--nile-colors-button-secondary-border);
+    color: var(--nile-colors-button-secondary-text);
   }
 
   .button--standard.button--secondary:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-neutral-500);
-    border : none;
-    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);
-    color: var(--nile-colors-neutral-900);
+    background-color: var(--nile-colors-button-secondary-hover);
+    border-color: var(--nile-colors-button-secondary-border);
+    color: var(--nile-colors-button-secondary-text);
   }
 
   .button--standard.button--secondary:active:not(.button--disabled) {
-    background-color: var(--nile-colors-neutral-500);
-    border-color: var(--nile-colors-neutral-700);
-    color: var(--nile-colors-neutral-900);
+    background-color: var(--nile-colors-button-secondary-pressed);
+    border-color: var(--nile-colors-button-secondary-pressed-border);
+    color: var(--nile-colors-button-secondary-text);
   }
 
   .button--standard.button--secondary.button--disabled {
-    background-color: var(--nile-colors-neutral-400);
-    border-color: var(--nile-colors-neutral-400);
-    color: var(--nile-colors-dark-500);
+    background-color: var(--nile-colors-button-secondary-disabled);
+    border-color: var(--nile-colors-button-secondary-disabled-border);
+    color: var(--nile-colors-button-secondary-disabled-text);
     cursor: not-allowed;
   }
 
   .button--standard.button--secondary.button--disabled:hover,
   .button--standard.button--secondary.button--disabled:active {
-    background-color: var(--nile-colors-neutral-400);
-    border-color: var(--nile-colors-neutral-400);
-    color: var(--nile-colors-dark-500);
-    box-shadow: none;
+    background-color: var(--nile-colors-button-secondary-disabled);
+    border-color: var(--nile-colors-button-secondary-disabled-border);
+    color: var(--nile-colors-button-secondary-disabled-text);
+    cursor: not-allowed;
   }
 
   /* Primary */
   .button--standard.button--primary {
-    background-color: var(--nile-colors-primary-600);
-    border-color: var(--nile-colors-primary-600);
-    color: var(--nile-colors-white-base);
+    background-color: var(--nile-colors-button-primary);
+    border-color: var(--nile-colors-button-primary-border);
+    color: var(--nile-colors-button-primary-text);
   }
 
   .button--standard.button--primary:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-primary-700);
-    border-color: var(--nile-colors-primary-700);
-    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);
-    color: var(--nile-colors-white-base);
+    background-color: var(--nile-colors-button-primary-hover);
+    border-color: var(--nile-colors-button-primary-hover);
+    color: var(--nile-colors-button-primary-text);
   }
 
   .button--standard.button--primary:active:not(.button--disabled) {
-    background-color: var(--nile-colors-primary-700);
-    border-color: var(--nile-colors-primary-900);
-    color: var(--nile-colors-white-base);
+    background-color: var(--nile-colors-button-primary-pressed);
+    border-color: var(--nile-colors-button-primary-pressed);
+    color: var(--nile-colors-button-primary-text);
   }
 
   .button--standard.button--primary.button--disabled {
-    background-color: var(--nile-colors-neutral-700);
-    border-color: var(--nile-colors-neutral-700);
-    color: var(--nile-colors-white-base);
+    background-color: var(--nile-colors-button-primary-disabled);
+    border-color: var(--nile-colors-button-primary-disabled);
+    color: var(--nile-colors-button-primary-disabled-text);
     cursor: not-allowed;
   }
 
   .button--standard.button--primary.button--disabled:hover,
   .button--standard.button--primary.button--disabled:active {
-    background-color: var(--nile-colors-neutral-700);
-    border-color: var(--nile-colors-neutral-700);
-    color: var(--nile-colors-white-base);
-    box-shadow: none;
+    background-color: var(--nile-colors-button-primary-disabled);
+    border-color: var(--nile-colors-button-primary-disabled);
+    color: var(--nile-colors-button-primary-disabled-text);
+    cursor: not-allowed;
   }
 
   /* Tertiary */
   .button--standard.button--tertiary {
-    background-color: var(--nile-colors-white-base);
-    border-color: var(--nile-colors-neutral-500);
-    color: var(--nile-colors-dark-900);
-    box-shadow: 0px 2px 4px var(--nile-colors-dark-200);
+    background-color: var(--nile-colors-button-tertiary);
+    border-color: var(--nile-colors-button-tertiary-border);
+    color: var(--nile-colors-button-tertiary-text);
   }
 
   .button--standard.button--tertiary:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-neutral-100);
+    background-color: var(--nile-colors-button-tertiary-hover);
     border-color: var(--nile-colors-neutral-500);
-    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);
-    color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-button-tertiary-text);
   }
 
   .button--standard.button--tertiary:active:not(.button--disabled) {
-    background-color: var(--nile-colors-neutral-400);
-    border-color: var(--nile-colors-neutral-700);
-    color: var(--nile-colors-neutral-700);
-  }
-  .button--standard.button--tertiary.button--disabled {
-    border-color: #e5e9eb;
-    background-color: var(--nile-colors-white-base);
-    color: var(--nile-colors-neutral-700);
-    cursor: not-allowed;
-    box-shadow: none;
+    background-color: var(--nile-colors-button-tertiary-pressed);
+    border-color: var(--nile-colors-button-tertiary-pressed-border);
+    color: var(--nile-colors-button-tertiary-text);
   }
 
+  .button--standard.button--tertiary.button--disabled,
   .button--standard.button--tertiary.button--disabled:hover,
   .button--standard.button--tertiary.button--disabled:active {
-    border-color: #e5e9eb;
-    background-color: var(--nile-colors-white-base);
-    color: var(--nile-colors-neutral-700);
+    border-color: var(--nile-colors-neutral-500);
+    background-color: var(--nile-colors-button-tertiary-disabled);
+    color: var(--nile-colors-button-tertiary-disabled-text);
+    cursor: not-allowed;
     box-shadow: none;
   }
 
   /* caution */
   .button--standard.button--caution {
-    background-color: var(--nile-colors-red-500);
-    border-color: var(--nile-colors-red-500);
-    color: var(--nile-colors-white-base);
+    background-color: var(--nile-colors-button-caution);
+    border-color: var(--nile-colors-button-caution);
+    color: var(--nile-colors-button-caution-text);
   }
+
   .button--standard.button--caution:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-red-700);
-    border-color: var(--nile-colors-red-700);
-    color: var(--nile-colors-white-base);
+    background-color: var(--nile-colors-button-caution-hover);
+    border-color: var(--nile-colors-button-caution-hover);
+    color: var(--nile-colors-button-caution-text);
   }
 
   .button--standard.button--caution:active:not(.button--disabled) {
-    background-color: var(--nile-colors-red-700);
-    border-color: var(--nile-colors-red-500);
-    color: var(--nile-colors-white-base);
-  }
+    background-color: var(--nile-colors-button-caution-pressed);
+    border-color: var(--nile-colors-button-caution-pressed);
+    color: var(--nile-colors-button-caution-text);
+  }
+
+  .button--standard.button--caution.button--disabled,
+  .button--standard.button--caution.button--disabled:hover,
+  .button--standard.button--caution.button--disabled:active {
+    background-color: var(--nile-colors-button-caution-disabled);
+    border-color: var(--nile-colors-button-caution-disabled);
+    color: var(--nile-colors-button-caution-disabled-text);
+  }
+
+
+        /* Primary Variant - Nile Icon Fill */
+        .button--standard.button--primary ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
+      }
+      .button--standard.button--primary:hover:not(.button--disabled) ::slotted(nile-icon),
+      .button--standard.button--primary:active:not(.button--disabled) ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
+      }
+      .button--standard.button--primary.button--disabled ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;
+      }
+
+      /* Secondary Variant */
+      .button--standard.button--secondary ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
+      }
+      .button--standard.button--secondary:hover:not(.button--disabled) ::slotted(nile-icon),
+      .button--standard.button--secondary:active:not(.button--disabled) ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
+      }
+      .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-secondary-disabled-text) !important;
+      }
+
+      /* Tertiary Variant */
+      .button--standard.button--tertiary ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
+      }
+      .button--standard.button--tertiary:hover:not(.button--disabled) ::slotted(nile-icon),
+      .button--standard.button--tertiary:active:not(.button--disabled) ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
+      }
+      .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-tertiary-disabled-text) !important;
+      }
+
+      /* Caution Variant */
+      .button--standard.button--caution ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
+      }
+      .button--standard.button--caution:hover:not(.button--disabled) ::slotted(nile-icon),
+      .button--standard.button--caution:active:not(.button--disabled) ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
+      }
+      .button--standard.button--caution.button--disabled ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;
+      }
 
     /*
    * Outline buttons

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', 'value'], { 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"