@aquera/nile-elements 0.0.42 → 0.0.43

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.42",
+  "version": "0.0.43",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -104,4 +104,4 @@
       "prettier --write"
     ]
   }
-}
+}

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

@@ -20,12 +20,12 @@ export const styles = css`
     height: 16px;
     font-size: 10.24px;
     display: inline-flex;
-    align-items: center;/
+    align-items: center;
     justify-content: center;
   }
 
   .badge__content {
-    font-family: Colfax-regular;
+    font-family: var(--nile-font-family-serif);
     font-size: 10.24px;
     font-style: normal;
     font-weight: 400;

package/src/nile-breadcrumb/nile-breadcrumb.ts

@@ -15,6 +15,7 @@ import {
 import { customElement } from 'lit/decorators.js';
 import { styles } from './nile-breadcrumb.css';
 import NileElement from '../internal/nile-element';
+import { foreach } from '../nile-icon/icons/svg';
 /**
  * Nile BreadCrumb component.
  *
@@ -49,6 +50,10 @@ export class NileBreadcrumb extends NileElement {
   private changeLastItem() {
     const items: any = [...this.querySelectorAll('nile-breadcrumb-item')];
     const itemslength = items.length;
+    for (let i = 0; i < itemslength - 1; i++) {
+      const element = items[i];
+      element.isLast = false;
+    }
     const lastItem = items[itemslength - 1];
     lastItem.isLast = true;
   }
@@ -60,12 +65,13 @@ export class NileBreadcrumb extends NileElement {
   public render(): TemplateResult {
     return html`
       <slot
+        @slotchange=${this.changeLastItem}
         @nile-click-item=${this.handleRemoveClick}
         class="breadcrumb"
       ></slot>
     `;
   }
-  
+
   /* #endregion */
 }
 

package/src/nile-breadcrumb-item/nile-breadcrumb-item.css.ts

@@ -16,7 +16,7 @@ export const styles = css`
     align-items: center;
     text-align: center;
     font-feature-settings: 'clig' off, 'liga' off;
-    font-family: var(--nile-font-family-serif);
+    font-family: var(--nile-font-family-serif); 
     font-size: var(--nile-font-size-small);
     font-style: normal;
     font-weight: var(--nile-font-weight-regular);

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

@@ -22,7 +22,7 @@ export const styles = css`
     border-radius: 4px;
     color: #000;
     text-align: center;
-    font-family: Colfax-regular;
+    font-family: var(--nile-font-family-serif);
     font-size: 14px;
     line-height: 14px;
     letter-spacing: 0.2px;

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

@@ -15,7 +15,7 @@ export const styles = css`
   }
 
   .calendar-container {
-    font-family: Colfax-regular;
+    font-family:var(--nile-font-family-serif);
     width: 290px;
     height: auto;
     text-align: center;
@@ -167,7 +167,7 @@ export const styles = css`
   }
 
   .base__relative {
-    width: 494px;
+    width: 352px;
   }
 
   .calender-input {
@@ -177,7 +177,7 @@ export const styles = css`
   }
 
   .calender-input--relative {
-    width: 494px;
+    width: 352px;
     padding: 0;
   }
 
@@ -235,15 +235,17 @@ export const styles = css`
   .unit-container {
     display: flex;
     flex-direction: column;
-    width: 494px;
+    width: 352px;
+    gap:10px;
     padding: 24px 24px 0 24px;
   }
 
   .time-unit-group {
     display: flex;
-    align-items: center;
-    margin-bottom: 24px;
-    gap: 24px;
+    flex-direction: column;
+    align-items: start;
+    justify-content:center;
+    gap: 12px;
   }
 
   .time-unit-name {
@@ -263,6 +265,7 @@ export const styles = css`
 
   .time-unit-value {
     display: flex;
+    gap: 3px;
   }
 
   .time-value {
@@ -275,7 +278,7 @@ export const styles = css`
     cursor: pointer;
     justify-content: center;
     align-items: center;
-    margin-right: 16px;
+    /* margin-right: 16px; */
     border-radius: 4px;
     border: 1px solid #c7ced4;
     background: rgba(255, 255, 255, 0.2);
@@ -318,6 +321,26 @@ export const styles = css`
     padding: 24px;
     box-sizing: border-box;
   }
+
+  .duration-input {
+    width: 140px;
+  }
+
+  .time-input {
+    width: 140px;
+  }
+
+  .minute-values {
+    gap: 16px;
+  }
+
+  .weeks-values {
+    gap: 16px;
+  }
+
+  .months-values {
+    gap: 16px;
+  }
 `;
 
 export default [styles];

package/src/nile-calendar/nile-calendar.ts

@@ -375,8 +375,8 @@ export class NileCalendar extends NileElement {
           </nile-icon>
           <span
             >${new Date(year, month).toLocaleString('default', {
-              month: 'long',
-            })}
+      month: 'long',
+    })}
             ${year}</span
           >
           <nile-icon
@@ -387,7 +387,7 @@ export class NileCalendar extends NileElement {
           >
           </nile-icon>
         </div>
-        <div class="header-divider"> </div>
+        <div class="header-divider"></div>
         <div class="day-names">
           <div class="day">Sun</div>
           <div class="day">Mon</div>
@@ -399,31 +399,31 @@ export class NileCalendar extends NileElement {
         </div>
         <div class="days">
           ${allDays.map((day, index) => {
-            const isCurrentMonth =
-              index >= fillerDaysBefore.length &&
-              index < fillerDaysBefore.length + daysArray.length;
-            return html` <div
+      const isCurrentMonth =
+        index >= fillerDaysBefore.length &&
+        index < fillerDaysBefore.length + daysArray.length;
+      return html` <div
               class="day ${isSelectedDate(
-                day,
-                month,
-                year,
-                isCurrentMonth
-              )} ${isInRange(day, month, year, isCurrentMonth)
-                ? 'in-range'
-                : ''} ${!isCurrentMonth ? 'filler' : ''}
+        day,
+        month,
+        year,
+        isCurrentMonth
+      )} ${isInRange(day, month, year, isCurrentMonth)
+        ? 'in-range'
+        : ''} ${!isCurrentMonth ? 'filler' : ''}
                 ${this.isCurrentDate(day, month, year) && isCurrentMonth
-                ? 'current-date'
-                : ''}
+          ? 'current-date'
+          : ''}
                 "
               @click="${() => {
-                if (isCurrentMonth) {
-                  this.selectDate(day, month, year);
-                }
-              }}"
+          if (isCurrentMonth) {
+            this.selectDate(day, month, year);
+          }
+        }}"
             >
               ${day}
             </div>`;
-          })}
+    })}
         </div>
       </div>
     `;
@@ -594,8 +594,8 @@ export class NileCalendar extends NileElement {
           <div
             class="time-value ${this.selectedUnit === unit &&
             this.selectedValue === value
-              ? 'time-value--selected'
-              : ''}"
+            ? 'time-value--selected'
+            : ''}"
             @click=${(e: any) => this.handleTimeValueClick(unit, value, e)}
           >
             ${value}
@@ -643,8 +643,8 @@ export class NileCalendar extends NileElement {
       <div
         class="base ${this.range ? 'base__range' : ''} ${this.type ===
         'relative'
-          ? 'base__relative'
-          : ''}"
+        ? 'base__relative'
+        : ''}"
       >
         <div class="calendar-config ${!this.range ? 'hidden' : ''}">
           <div class="calendar-switcher">
@@ -653,43 +653,42 @@ export class NileCalendar extends NileElement {
               <nile-tab slot="nav" panel="relative">Relative</nile-tab>
             </nile-tab-group>
           </div>
-
         </div>
 
         <div class="calendar-timezone ${!this.range ? 'hidden' : ''}">
-            <nile-select
-              hoist
-              value=${this.selectedTimeZone}
-              @nile-change=${this.handleTimeZoneChange}
-            >
-              <nile-option value="local">Local Time Zone</nile-option>
-              <nile-option value="UTC">UTC</nile-option>
-            </nile-select>
-          </div>
+          <nile-select
+            hoist
+            value=${this.selectedTimeZone}
+            @nile-change=${this.handleTimeZoneChange}
+          >
+            <nile-option value="local">Local Time Zone</nile-option>
+            <nile-option value="UTC">UTC</nile-option>
+          </nile-select>
+        </div>
 
         <div
           class="calendar-wrapper  ${this.type !== 'absolute' ? 'hidden' : ''}"
         >
           <div class="calendar-container ${this.range ? 'with-margin' : ''}">
             ${this.renderMonth(
-              this.currentYear,
-              this.currentMonth,
-              this.getDaysArray(this.currentYear, this.currentMonth)
-            )}
+          this.currentYear,
+          this.currentMonth,
+          this.getDaysArray(this.currentYear, this.currentMonth)
+        )}
           </div>
         </div>
 
         <div class="unit-container ${this.type !== 'relative' ? 'hidden' : ''}">
           <div class="time-unit-group">
             <div class="time-unit-name"><span>Minutes</span></div>
-            <div class="time-unit-value">
-              ${this.renderTimeValues('minutes', [1, 3, 5, 15, 30, 45])}
+            <div class="time-unit-value minute-values">
+              ${this.renderTimeValues('minutes', [1, 5, 15, 30, 45])}
             </div>
           </div>
 
           <div class="time-unit-group">
             <div class="time-unit-name"><span>Hours</span></div>
-            <div class="time-unit-value">
+            <div class="time-unit-value hours-values">
               ${this.renderTimeValues('hours', [1, 2, 3, 6, 8, 12])}
             </div>
           </div>
@@ -703,31 +702,29 @@ export class NileCalendar extends NileElement {
 
           <div class="time-unit-group">
             <div class="time-unit-name"><span>Weeks</span></div>
-            <div class="time-unit-value">
+            <div class="time-unit-value weeks-values ">
               ${this.renderTimeValues('weeks', [1, 2, 4, 6])}
             </div>
           </div>
 
           <div class="time-unit-group">
             <div class="time-unit-name"><span>Months:</span></div>
-            <div class="time-unit-value">
+            <div class="time-unit-value months-values ">
               ${this.renderTimeValues('months', [3, 6, 12, 15])}
             </div>
           </div>
         </div>
 
         ${this.range && this.type === 'relative'
-          ? html`
+        ? html`
           <div class="calender-input calender-input--relative">
             <div class="unit-input-container">
-              <nile-input class="manual-input" label="Duration"  value="${
-                this.selectedValue
-              }"
+              <nile-input class="manual-input duration-input" label="Duration"  value="${this.selectedValue
+          }"
               @nile-input="${this.handleDurationChange}"
               placeholder="Enter Value" ></nile-input>
-              <nile-select class="manual-input"  label="Unit of time" style="margin-top:3px" value="${
-                this.selectedUnit
-              }"
+              <nile-select class="manual-input  time-input"  label="Unit of time" style="margin-top:3px" value="${this.selectedUnit
+          }"
               @nile-change="${this.handleUnitChange}"
               >
                 <nile-option value="minutes"> Minutes </nile-option>
@@ -735,61 +732,55 @@ export class NileCalendar extends NileElement {
                 <nile-option value="days"> Days </nile-option>
                 <nile-option value="weeks"> Weeks </nile-option>
                 <nile-option value="months"> Months </nile-option>
-          </nile-select>
+              </nile-select>
 
             </div>
 
           <div class="button-container--relative">
-            <nile-button class="apply-button"  ?disabled="${
-              !this.startDate || !this.endDate
-            }"  @click="${this.confimRange}"> Apply</nile-button>
+            <nile-button class="apply-button" variant="primary"  ?disabled="${!this.startDate || !this.endDate
+          }"  @click="${this.confimRange}"> Apply</nile-button>
             </div>
 
 
         </div>
         </div>
         `
-          : ''}
+        : ''}
         ${this.range && this.type === 'absolute'
-          ? html`
+        ? html`
           <div class="calender-input">
             <span class="manual-input-label">From </span>
             <div class="from">
               <nile-input class="manual-input" value="${this.formatDate(
-                this.startDate
-              )}" placeholder="DD/MM/YYYY" @nile-change="${
-              this.handleStartDateInput
-            }"></nile-input>
+          this.startDate
+        )}" placeholder="DD/MM/YYYY" @nile-change="${this.handleStartDateInput
+          }"></nile-input>
               <nile-input class="manual-input" value="${this.formatTime(
-                this.startDate
-              )}" placeholder="HH:MM:SS" @nile-change="${
-              this.handleStartTimeInput
-            }"> </nile-input>
+            this.startDate
+          )}" placeholder="HH:MM:SS" @nile-change="${this.handleStartTimeInput
+          }"> </nile-input>
 
             </div>
 <br>
             <span class="manual-input-label">To </span>
             <div class="from">
             <nile-input class="manual-input" value="${this.formatDate(
-              this.endDate
-            )}" placeholder="DD/MM/YYYY" @nile-change="${
-              this.handleEndDateInput
-            }"></nile-input>
+            this.endDate
+          )}" placeholder="DD/MM/YYYY" @nile-change="${this.handleEndDateInput
+          }"></nile-input>
             <nile-input class="manual-input" value="${this.formatTime(
-              this.endDate
-            )}" placeholder="HH:MM:SS" @nile-change="${
-              this.handleEndTimeInput
-            }"> </nile-input>
+            this.endDate
+          )}" placeholder="HH:MM:SS" @nile-change="${this.handleEndTimeInput
+          }"> </nile-input>
           </div>
         </div>
         <div class="button-container">
-            <nile-button class="apply-button"  ?disabled="${
-              !this.startDate || !this.endDate
-            }"  @click="${this.confimRange}"> Apply</nile-button>
+            <nile-button class="apply-button"  ?disabled="${!this.startDate || !this.endDate
+          }"  @click="${this.confimRange}"> Apply</nile-button>
             </div>
         </div>
         `
-          : ''}
+        : ''}
       </div>
     `;
   }

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

@@ -39,7 +39,7 @@ export const styles = css`
     color: inherit;
     margin-bottom: 12px;
     color: var(--nile-colors-dark-900);
-    font-family: Colfax-regular;
+    font-family: var(--nile-font-family-serif);
     font-size: 14px;
     font-style: normal;
     font-weight: 400;

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

@@ -18,6 +18,7 @@ import { styles } from './nile-code-editor.css';
 import { EditorView } from 'codemirror';
 import { ViewUpdate } from '@codemirror/view';
 import { EditorState, Compartment } from '@codemirror/state';
+import {lineNumbers} from '@codemirror/view';
 import {
   javascript,
   javascriptLanguage,
@@ -80,49 +81,76 @@ export class NileCodeEditor extends NileElement {
     return code.replace(/\s+/g, ' ').trim();
   }
   lineNumbersComp = new Compartment();
+  restrictSingleLineComp = new Compartment();
+  readOnlyComp = new Compartment();
+
 
   @watch(['value'], { waitUntilFirstUpdate: true })
-  handleValueChange() {}
+  handleValueChange() { }
 
-  updated(changedProperties: PropertyValues) {
-    super.updated(changedProperties);
-    if (changedProperties.has('value')) {
-      const customAutoCompletions = javascriptLanguage.data.of({
-        autocomplete: scopeCompletionSource(this.customAutoCompletions),
-      });
-      if (!this.view) {
-        let startState = EditorState.create({
-          doc: !this.multiline
-            ? this.convertToSingleLine(this.value)
-            : this.value,
-          extensions: [
-            basicSetup({
-              lineNumbers: !!this.multiline,
+  getLineNumbersExension() {
+    return this.multiline ? lineNumbers() : [];
+  }
+
+  getReadOnlyExtension() {
+    return EditorState.readOnly.of(this.readonly);
+  }
+
+  getSingleLineExtension(){
+     return !this.multiline ? EditorState.transactionFilter.of(tr =>
+      tr.newDoc.lines > 1 ? [] : tr
+    ) : [];
+  }
+
+  firstUpdated() {
+    const lineNumbersExtension = this.lineNumbersComp.of(this.getLineNumbersExension());
+    const readOnlyExtension = this.readOnlyComp.of(this.getReadOnlyExtension());
+    const restrictSingleLineExtension = this.restrictSingleLineComp.of(this.getSingleLineExtension())
+    const customAutoCompletions = javascriptLanguage.data.of({
+      autocomplete: scopeCompletionSource(this.customAutoCompletions),
+    });
+    let startState = EditorState.create({
+      doc: !this.multiline
+        ? this.convertToSingleLine(this.value)
+        : this.value,
+      extensions: [
+          basicSetup({
+              lineNumbers: false,
               highlightActiveLine: false,
-              foldGutter: !!this.multiline,
-            }),
-            EditorState.readOnly.of(this.readonly),
-            customAutoCompletions,
-            autocompletion(),
-            javascript(),
-            this.setTheme(),
-            !this.multiline ? this.restrictSingleLine() : [],
-            EditorView.updateListener.of((v: ViewUpdate) => {
-              if (v.docChanged) {
-                this.emitValues(this.view.state.doc.toString());
-              }
+              foldGutter: false,
             }),
-          ],
-        });
-
-        this.view = new EditorView({
-          state: startState,
-          parent: this.codeEditor,
-        });
-      } else {
-        if (this.updateValue) {
-          // Editor has already been initialized, update its state
-          this.view.dispatch({
+        lineNumbersExtension,
+        readOnlyExtension,
+        restrictSingleLineExtension,
+        customAutoCompletions,
+        autocompletion(),
+        javascript(),
+        this.setTheme(),
+        EditorView.updateListener.of((v: ViewUpdate) => {
+          if (v.docChanged) {
+            this.emitValues(this.view.state.doc.toString());
+          }
+        }),
+           
+      ],
+    });
+
+    this.view = new EditorView({
+      state: startState,
+      parent: this.codeEditor,
+    });
+    this.addOpenListeners();
+  }
+  
+
+  addOpenListeners() {
+    this.view.contentDOM.addEventListener('blur', () => this.toggleFocusAndBlur('blur'));
+    this.view.contentDOM.addEventListener('focus', () => this.toggleFocusAndBlur('focus'));
+  }
+  
+
+  singleLineMultiLineToggle() {
+     this.view.dispatch({
             changes: {
               from: 0,
               to: this.view.state.doc.length,
@@ -131,11 +159,35 @@ export class NileCodeEditor extends NileElement {
                 : this.value,
             },
           });
+  }
+  
+  updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (changedProperties.has('value') && this.updateValue) {
+          // Editor has already been initialized, update its state
+          this.singleLineMultiLineToggle();
         }
-      }
+    if (changedProperties.has('multiline')) {
+      this.view.dispatch({
+        effects: [this.lineNumbersComp.reconfigure(this.getLineNumbersExension()),
+          this.restrictSingleLineComp.reconfigure(this.getSingleLineExtension())],
+      })
+      this.singleLineMultiLineToggle();
+    }
+    if (changedProperties.has('readonly')) {
+      this.view.dispatch({ effects: this.readOnlyComp.reconfigure(this.getReadOnlyExtension()) })      
     }
   }
 
+  toggleFocusAndBlur(action: 'blur' | 'focus') {
+    if(action === 'blur'){
+      this.emit('nile-blur', { onBlur : true });
+     }
+    if (action === 'focus') {
+      this.emit('nile-focus', { onFocus : true });
+    }
+ }
+
   setTheme() {
     return EditorView.theme(Theme);
   }
@@ -159,7 +211,6 @@ export class NileCodeEditor extends NileElement {
     const noborder = !!this.noborder;
     return html`<div
         part="code-editor-base"
-        exportparts="code-editor-base : code-editor-base"
         class=${classMap({
           'code-mirror': true,
           noborder: noborder,

package/src/nile-error-notification/nile-error-notification.css.ts

@@ -15,7 +15,7 @@ export const styles = css`
   }
 
   .nile-error-notification {
-    font-family: Colfax-regular;
+    font-family: var(--nile-font-family-serif);
     font-size: 12px;
     font-style: normal;
     font-weight: 400;

package/src/nile-form-error-message/nile-form-error-message.css.ts

@@ -18,7 +18,7 @@ export const styles = css`
     display: flex;
     align-items: center;
     color: var(--nile-colors-red-700);
-    font-family: Colfax-regular;
+    font-family: var(--nile-font-family-serif);
     font-size: 12px;
     font-style: normal;
     font-weight: 400;

package/src/nile-form-help-text/nile-form-help-text.css.ts

@@ -19,7 +19,7 @@ export const styles = css`
     display: flex;
     align-items: center;
     color: var(--nile-colors-dark-500);
-    font-family: Colfax-regular;
+    font-family: var(--nile-font-family-serif);
     font-size: 12px;
     font-style: normal;
     font-weight: 400;

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

@@ -29,7 +29,7 @@ export const styles = css`
     color: inherit;
     margin-bottom: 12px;
     color: var(--nile-colors-dark-900);
-    font-family: Colfax-regular;
+    font-family: var(--nile-font-family-serif);
     font-size: 14px;
     font-style: normal;
     font-weight: 400;