@aquera/nile-elements 0.0.42-2 → 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-2",
+  "version": "0.0.43",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

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-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;

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

@@ -31,7 +31,7 @@ export const styles = css`
   .link__label {
     color: #005ea6;
     text-align: center;
-    font-family: Colfax-regular;
+    font-family: var(--nile-font-family-serif);
     font-size: 14px;
     font-style: normal;
     font-weight: 400;

package/src/nile-menu/nile-menu.ts

@@ -41,6 +41,10 @@ export class NileMenu extends NileElement {
     const target = event.target as HTMLElement;
     const item = target.closest('nile-menu-item');
 
+    if (item?.hasSubMenu) {
+      return;
+    }
+
     // if (!item || item.disabled || item.inert) {
     if (!item || item.disabled) {
       return;
@@ -180,23 +184,30 @@ export class NileMenu extends NileElement {
   render() {
     return html`
       <div>
-          ${this.searchEnabled
-            ? html` <nile-input
-                size="medium"
-                clearable
-                style=${this.searchWidth
-                  ? `width: ${this.searchWidth}px;`
-                  : 'width: 100%;'}
-                .value=${this.searchValue}
-                placeholder="Search..."
-                @nile-input=${this.handleSearchChange}
-              >
-                <nile-icon name="search" slot="suffix"> </nile-icon>
-              </nile-input>`
-            : html``}
+        ${this.searchEnabled
+          ? html` <nile-input
+              size="medium"
+              clearable
+              style=${this.searchWidth
+                ? `width: ${this.searchWidth}px;`
+                : 'width: 100%;'}
+              .value=${this.searchValue}
+              placeholder="Search..."
+              @nile-input=${this.handleSearchChange}
+            >
+              <nile-icon name="search" slot="suffix"> </nile-icon>
+            </nile-input>`
+          : html``}
         ${this.showNoResults
           ? html` <nile-menu-item>${this.noResultsMessage}</nile-menu-item> `
           : ''}
+
+        <slot
+          name="menu__header"
+          @click=${(e: Event) => {
+            e.stopPropagation();
+          }}
+        ></slot>
         <slot
           @slotchange=${this.handleSlotChange}
           @click=${this.handleClick}

package/src/nile-menu-item/nile-menu-item.ts

@@ -5,9 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
+import {
+  LitElement,
+  html,
+  property,
+  CSSResultArray,
+  TemplateResult,
+} from 'lit-element';
 import { customElement } from 'lit/decorators.js';
-import {styles} from './nile-menu-item.css';
+import { styles } from './nile-menu-item.css';
 import '../nile-icon';
 import { classMap } from 'lit/directives/class-map.js';
 import { query } from 'lit/decorators.js';
@@ -60,6 +66,9 @@ export class NileMenuItem extends NileElement {
   /** Draws the menu item in a disabled state, preventing selection. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
+  /** Draws the item in a checked state. */
+  @property({ type: Boolean, reflect: true }) hasSubMenu = false;
+
   connectedCallback() {
     super.connectedCallback();
     this.handleHostClick = this.handleHostClick.bind(this);
@@ -83,7 +92,11 @@ export class NileMenuItem extends NileElement {
     // When the label changes, emit a slotchange event so parent controls see it
     if (textLabel !== this.cachedTextLabel) {
       this.cachedTextLabel = textLabel;
-      this.emit('slotchange', { bubbles: true, composed: false, cancelable: false });
+      this.emit('slotchange', {
+        bubbles: true,
+        composed: false,
+        cancelable: false,
+      });
     }
   }
 
@@ -100,7 +113,10 @@ export class NileMenuItem extends NileElement {
     // For proper accessibility, users have to use type="checkbox" to use the checked attribute
     if (this.checked && this.type !== 'checkbox') {
       this.checked = false;
-      console.error('The checked attribute can only be used on menu items with type="checkbox"', this);
+      console.error(
+        'The checked attribute can only be used on menu items with type="checkbox"',
+        this
+      );
       return;
     }
 
@@ -141,21 +157,38 @@ export class NileMenuItem extends NileElement {
           'menu-item': true,
           'menu-item--checked': this.checked,
           'menu-item--disabled': this.disabled,
-          'menu-item--has-submenu': false // reserved for future use
+          'menu-item--has-submenu': this.hasSubMenu, // reserved for future use
         })}
       >
         <span part="checked-icon" class="menu-item__check">
-          <nile-icon name="tick" library="system" aria-hidden="true"></nile-icon>
+          <nile-icon
+            name="tick"
+            library="system"
+            aria-hidden="true"
+          ></nile-icon>
         </span>
 
-        <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
+        <slot
+          name="prefix"
+          part="prefix"
+          class="menu-item__prefix"
+       
+        ></slot>
 
-        <slot part="label" class="menu-item__label" @slotchange=${this.handleDefaultSlotChange}></slot>
+        <slot
+          part="label"
+          class="menu-item__label"
+          @slotchange=${this.handleDefaultSlotChange}
+        ></slot>
 
         <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
 
         <span part="submenu-icon" class="menu-item__chevron">
-          <nile-icon name="arrowright" library="system" aria-hidden="true"></nile-icon>
+          <nile-icon
+            name="arrowright"
+            library="system"
+            aria-hidden="true"
+          ></nile-icon>
         </span>
       </div>
     `;

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

@@ -19,7 +19,7 @@ export const styles = css`
     display: block;
     color: var(--Dark-Normal, var(--Color-Text-Default, #000));
     font-feature-settings: 'clig' off, 'liga' off;
-    font-family: Colfax;
+    font-family: var(--nile-font-family-serif);
     font-size: var(--nile-type-scale-4);
     font-style: normal;
     font-weight: 500;