@aquera/nile-elements 0.0.82 → 0.0.84

package/package.json

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

package/src/index.ts

@@ -69,3 +69,4 @@ export { NileTree } from './nile-tree';
 export { NileTreeItem } from './nile-tree-item';
 export { NileListItem } from './nile-list-item';
 export { NileList } from './nile-list';
+export { NileDivider } from './nile-divider';

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

@@ -73,7 +73,7 @@ export const styles = css`
   }
 
   .day_date ,.day_name{
-		font-family: Inter;
+		font-family: var( --nile-font-family-serif);
 		font-style: normal;
 		font-size: 14px;
 		line-height: 20px;
@@ -246,7 +246,7 @@ export const styles = css`
   .duration-name{
     display:flex;
     align-items:center;
-    font-family: Inter;
+    font-family:  var( --nile-font-family-serif);
     font-size: 14px;
     font-style: normal;
     font-weight: 500;
@@ -255,7 +255,7 @@ export const styles = css`
   
   .duration-units{
     display:flex;
-    font-family: Inter;
+    font-family:  var( --nile-font-family-serif);
     font-size: 14px;
     font-style: normal;
     font-weight: 400;

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

@@ -489,7 +489,6 @@ export class NileCalendar extends NileElement {
               index >= fillerDaysBefore.length &&
               index < fillerDaysBefore.length + daysArray.length;
             const datePlacement:''|'selected-date'|'range-start'|'range-end' = isSelectedDate(day, month, year, isCurrentMonth)
-            if(datePlacement=='selected-date') console.log(day)
             const classMapObj:any={
               'day_date' : true,
               'not-allowed' : !this.isAllowedDate(day, month, year),
@@ -714,11 +713,6 @@ export class NileCalendar extends NileElement {
    * Render method
    */
   render(): TemplateResult {
-    // const timeZones: string[] = TIMEZONES;
-    // const daysArray = this.getDaysArray(this.currentYear, this.currentMonth);
-    // const nextMonth = (this.currentMonth + 1) % 12;
-    // const nextYear = this.currentMonth === 11 ? this.currentYear + 1 : this.currentYear;
-    // const nextMonthDaysArray = this.getDaysArray(nextYear, nextMonth);
     return html`
       <div
         class=${classMap({
@@ -738,6 +732,7 @@ export class NileCalendar extends NileElement {
         ${this.type == 'relative' ? this.renderRelativeCalendar():''}
         ${this.type == 'absolute' ? this.renderAbsoluteCalendar():''}
 
+        ${!this.range?'':html`
         <div class="button-container">
           <nile-button 
           class="apply-button"  
@@ -745,6 +740,7 @@ export class NileCalendar extends NileElement {
           @click="${this.confimRange}"
           > Apply</nile-button>
         </div>
+        `}
       </div>
     `;
   }
@@ -755,7 +751,7 @@ export class NileCalendar extends NileElement {
   renderAbsoluteCalendar(){
     return html`
     <div class="calendar-wrapper">
-      <div class="calendar-container ${this.range ? 'with-margin' : ''}">
+      <div class="calendar-container">
         ${this.renderMonth(
           this.currentYear,
           this.currentMonth,
@@ -766,15 +762,6 @@ export class NileCalendar extends NileElement {
     ${this.range ? html`
     <div class="calender-input ${this.showManualInputs  ? '' : 'hidden'}" >
         <div class="from">
-          <!-- ${!this.hideInput ? html`
-            <nile-input 
-              label="Date"
-              class="manual-input" 
-              value="${this.formatDate(this.startDate)}" 
-              placeholder="DD/MM/YYYY" 
-              @nile-change="${this.handleStartDateInput}"
-            ></nile-input>`:''} -->
-
           <nile-input 
             label="From"
             class="manual-input" 
@@ -784,15 +771,6 @@ export class NileCalendar extends NileElement {
         </div>
 
         <div class="from">
-          <!-- ${!this.hideInput ? html`
-          <nile-input 
-            label="Date"
-            class="manual-input" 
-            value="${this.formatDate(this.endDate)}" 
-            placeholder="DD/MM/YYYY" 
-            @nile-change="${this.handleEndDateInput}"
-          ></nile-input>`:''} -->
-
           <nile-input 
             label="To"
             class="manual-input" 

package/src/nile-date-picker/nile-date-picker.ts

@@ -61,6 +61,8 @@ export class NileDatePicker extends NileElement {
         <nile-calendar
           value="${this.value}"
           .range="${this.range}"
+          @nile-init="${(e:CustomEvent)=>e.stopPropagation()}"
+          @nile-destroy="${(e:CustomEvent)=>e.stopPropagation()}"
           @nile-changed="${this.handleChanged}"
           allowed-dates="${this.allowedDates}"
           .hideDurationFields="${this.hideDurationFields}"
@@ -71,7 +73,8 @@ export class NileDatePicker extends NileElement {
     `;
   }
 
-  handleChanged(event: any) {
+  handleChanged(event: CustomEvent) {
+    event.stopPropagation()
     this.emit('nile-changed', event.detail);
     if (this.dropdown) {
       this.dropdown.hide();

package/src/nile-divider/index.ts

@@ -0,0 +1 @@
+export { NileDivider } from './nile-divider';

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

@@ -0,0 +1,42 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+import {css} from 'lit-element';
+
+/**
+ * Divider CSS
+ */
+export const styles = css`
+	:host {
+		display: block;
+		height: 100%;
+	}
+
+	.divider {
+		background-color: var(--nile-colors-gray-light-mode-200, #eaecf0);;
+	}
+	
+	.horizontal {
+		height: 2px;
+		width: 100%;
+		margin: 8px 0;
+	}
+
+	.vertical {
+		height: 100%;
+		width: 2px;
+		margin: 0 8px;
+		display: inline-block;
+		vertical-align: middle;
+	}
+
+	.inset {
+		margin-left: 72px;
+	}
+`;
+
+export default [styles];

package/src/nile-divider/nile-divider.ts

@@ -0,0 +1,56 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import {styles} from './nile-divider.css';
+import NileElement from '../internal/nile-element';
+
+
+/**
+ * Nile divider component.
+ *
+ * @tag nile-divider
+ *
+ */
+@customElement('nile-divider')
+export class NileDivider extends NileElement {
+
+	/**
+	 * The styles for nile-divider
+	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+	 */
+	public static get styles(): CSSResultArray {
+		return [styles];
+	}
+	@property({ type: Boolean, reflect:true }) inset = false;
+	@property({ type: Boolean, reflect:true }) vertical = false;
+
+	/* #endregion */
+
+	/* #region Methods */
+
+	/**
+	 * Render method
+	 * @slot This is a slot test
+	 */
+	public render(): TemplateResult {
+		return html`
+			<div part="divider" class="divider ${this.vertical ? 'vertical' : 'horizontal'} ${this.inset ? 'inset' : ''}"></div>
+			`;
+	}
+
+	/* #endregion */
+}
+
+export default NileDivider;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-divider': NileDivider;
+  }
+}

package/src/nile-icon/icons/svg/headphones-01.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjEgMThWMTJDMjEgNy4wMjk0NCAxNi45NzA2IDMgMTIgM0M3LjAyOTQ0IDMgMyA3LjAyOTQ0IDMgMTJWMThNNS41IDIxQzQuMTE5MjkgMjEgMyAxOS44ODA3IDMgMTguNVYxNi41QzMgMTUuMTE5MyA0LjExOTI5IDE0IDUuNSAxNEM2Ljg4MDcxIDE0IDggMTUuMTE5MyA4IDE2LjVWMTguNUM4IDE5Ljg4MDcgNi44ODA3MSAyMSA1LjUgMjFaTTE4LjUgMjFDMTcuMTE5MyAyMSAxNiAxOS44ODA3IDE2IDE4LjVWMTYuNUMxNiAxNS4xMTkzIDE3LjExOTMgMTQgMTguNSAxNEMxOS44ODA3IDE0IDIxIDE1LjExOTMgMjEgMTYuNVYxOC41QzIxIDE5Ljg4MDcgMTkuODgwNyAyMSAxOC41IDIxWiIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";

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

@@ -240,6 +240,7 @@ export { default as headerflows } from './header-flows';
 export { default as headerfunctions } from './header-functions';
 export { default as headertasks } from './header-tasks';
 export { default as headervariable } from './header-variable';
+export { default as headphones01 } from './headphones-01';
 export { default as help1 } from './help-1';
 export { default as helpcircle } from './help-circle';
 export { default as help } from './help';
@@ -264,6 +265,7 @@ export { default as intersection } from './intersection';
 export { default as itemplaceholder } from './itemplaceholder';
 export { default as js } from './js';
 export { default as keyperformanceindicator } from './key-performance-indicator';
+export { default as keyboard01 } from './keyboard-01';
 export { default as kill } from './kill';
 export { default as laptop01 } from './laptop-01';
 export { default as layersthree01 } from './layers-three-01';
@@ -303,6 +305,7 @@ export { default as menu } from './menu';
 export { default as messagenotificationsquare } from './message-notification-square';
 export { default as minus } from './minus';
 export { default as monitor01 } from './monitor-01';
+export { default as mouse } from './mouse';
 export { default as moveleft } from './moveleft';
 export { default as moveright } from './moveright';
 export { default as multipleuser } from './multiple-user';
@@ -359,6 +362,7 @@ export { default as predefined } from './predefined';
 export { default as prevup } from './prev-up';
 export { default as prev } from './prev';
 export { default as preview } from './preview';
+export { default as printer } from './printer';
 export { default as priorityhigh } from './priority-high';
 export { default as priorityhighest } from './priority-highest';
 export { default as prioritylow } from './priority-low';

package/src/nile-icon/icons/svg/keyboard-01.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNiAxMEg2LjAxTTggMTRIOC4wMU0xMCAxMEgxMC4wMU0xMiAxNEgxMi4wMU0xNCAxMEgxNC4wMU0xNiAxNEgxNi4wMU0xOCAxMEgxOC4wMU01LjIgMThIMTguOEMxOS45MjAxIDE4IDIwLjQ4MDIgMTggMjAuOTA4IDE3Ljc4MkMyMS4yODQzIDE3LjU5MDMgMjEuNTkwMyAxNy4yODQzIDIxLjc4MiAxNi45MDhDMjIgMTYuNDgwMiAyMiAxNS45MjAxIDIyIDE0LjhWOS4yQzIyIDguMDc5OSAyMiA3LjUxOTg0IDIxLjc4MiA3LjA5MjAyQzIxLjU5MDMgNi43MTU2OSAyMS4yODQzIDYuNDA5NzMgMjAuOTA4IDYuMjE3OTlDMjAuNDgwMiA2IDE5LjkyMDEgNiAxOC44IDZINS4yQzQuMDc5ODkgNiAzLjUxOTg0IDYgMy4wOTIwMiA2LjIxNzk5QzIuNzE1NjkgNi40MDk3MyAyLjQwOTczIDYuNzE1NjkgMi4yMTc5OSA3LjA5MjAyQzIgNy41MTk4NCAyIDguMDc5ODkgMiA5LjJWMTQuOEMyIDE1LjkyMDEgMiAxNi40ODAyIDIuMjE3OTkgMTYuOTA4QzIuNDA5NzMgMTcuMjg0MyAyLjcxNTY5IDE3LjU5MDMgMy4wOTIwMiAxNy43ODJDMy41MTk4NCAxOCA0LjA3OTkgMTggNS4yIDE4WiIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";

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

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgOVY2TTEyIDIyQzguMTM0MDEgMjIgNSAxOC44NjYgNSAxNVY5QzUgNS4xMzQwMSA4LjEzNDAxIDIgMTIgMkMxNS44NjYgMiAxOSA1LjEzNDAxIDE5IDlWMTVDMTkgMTguODY2IDE1Ljg2NiAyMiAxMiAyMloiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==";

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

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTggN1Y1LjJDMTggNC4wNzk5IDE4IDMuNTE5ODQgMTcuNzgyIDMuMDkyMDJDMTcuNTkwMyAyLjcxNTY5IDE3LjI4NDMgMi40MDk3MyAxNi45MDggMi4yMTc5OUMxNi40ODAyIDIgMTUuOTIwMSAyIDE0LjggMkg5LjJDOC4wNzk5IDIgNy41MTk4NCAyIDcuMDkyMDIgMi4yMTc5OUM2LjcxNTY5IDIuNDA5NzMgNi40MDk3MyAyLjcxNTY5IDYuMjE3OTkgMy4wOTIwMkM2IDMuNTE5ODQgNiA0LjA3OTkgNiA1LjJWN002IDE4QzUuMDcwMDMgMTggNC42MDUwNCAxOCA0LjIyMzU0IDE3Ljg5NzhDMy4xODgyNyAxNy42MjA0IDIuMzc5NjIgMTYuODExNyAyLjEwMjIyIDE1Ljc3NjVDMiAxNS4zOTUgMiAxNC45MyAyIDE0VjExLjhDMiAxMC4xMTk4IDIgOS4yNzk3NiAyLjMyNjk4IDguNjM4MDNDMi42MTQ2IDguMDczNTQgMy4wNzM1NCA3LjYxNDYgMy42MzgwMyA3LjMyNjk4QzQuMjc5NzYgNyA1LjExOTg0IDcgNi44IDdIMTcuMkMxOC44ODAyIDcgMTkuNzIwMiA3IDIwLjM2MiA3LjMyNjk4QzIwLjkyNjUgNy42MTQ2IDIxLjM4NTQgOC4wNzM1NCAyMS42NzMgOC42MzgwM0MyMiA5LjI3OTc2IDIyIDEwLjExOTggMjIgMTEuOFYxNEMyMiAxNC45MyAyMiAxNS4zOTUgMjEuODk3OCAxNS43NzY1QzIxLjYyMDQgMTYuODExNyAyMC44MTE3IDE3LjYyMDQgMTkuNzc2NSAxNy44OTc4QzE5LjM5NSAxOCAxOC45MyAxOCAxOCAxOE0xNSAxMC41SDE4TTkuMiAyMkgxNC44QzE1LjkyMDEgMjIgMTYuNDgwMiAyMiAxNi45MDggMjEuNzgyQzE3LjI4NDMgMjEuNTkwMyAxNy41OTAzIDIxLjI4NDMgMTcuNzgyIDIwLjkwOEMxOCAyMC40ODAyIDE4IDE5LjkyMDEgMTggMTguOFYxNy4yQzE4IDE2LjA3OTkgMTggMTUuNTE5OCAxNy43ODIgMTUuMDkyQzE3LjU5MDMgMTQuNzE1NyAxNy4yODQzIDE0LjQwOTcgMTYuOTA4IDE0LjIxOEMxNi40ODAyIDE0IDE1LjkyMDEgMTQgMTQuOCAxNEg5LjJDOC4wNzk5IDE0IDcuNTE5ODQgMTQgNy4wOTIwMiAxNC4yMThDNi43MTU2OSAxNC40MDk3IDYuNDA5NzMgMTQuNzE1NyA2LjIxNzk5IDE1LjA5MkM2IDE1LjUxOTggNiAxNi4wNzk5IDYgMTcuMlYxOC44QzYgMTkuOTIwMSA2IDIwLjQ4MDIgNi4yMTc5OSAyMC45MDhDNi40MDk3MyAyMS4yODQzIDYuNzE1NjkgMjEuNTkwMyA3LjA5MjAyIDIxLjc4MkM3LjUxOTg0IDIyIDguMDc5ODkgMjIgOS4yIDIyWiIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";

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

@@ -192,7 +192,7 @@ export class NileMenu extends NileElement {
   render() {
     return html`
       ${this.searchEnabled
-        ? html`<div class="search__wrapper" part="search__wrapper" >
+        ? html`<div class="search__wrapper" part="search__wrapper">
             <nile-input
               size="medium"
               style=${this.searchWidth
@@ -208,13 +208,14 @@ export class NileMenu extends NileElement {
             </nile-input>
           </div>`
         : html``}
-      <div class="menu__items-wrapper">
+      <div part="menu__items-wrapper" class="menu__items-wrapper">
         ${this.showNoResults
           ? html` <nile-menu-item>${this.noResultsMessage}</nile-menu-item> `
           : ''}
 
         <slot
           name="menu__header"
+          part="menu__header"
           @click=${(e: Event) => {
             e.stopPropagation();
           }}

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

@@ -27,7 +27,6 @@ export const styles = css`
 
   :host {
     display: block;
-    padding:1px 6px;
   }
 
   :host([inert]) {
@@ -61,6 +60,7 @@ export const styles = css`
     flex: 1 1 auto;
     margin: auto 0;
     display: inline-flex;
+    padding: 0 16px;
   }
 
   .menu-item .menu-item__prefix {

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

@@ -160,20 +160,19 @@ export class NileMenuItem extends NileElement {
           '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>
-        </span>
-
-        <slot
-          name="prefix"
-          part="prefix"
-          class="menu-item__prefix"
-       
-        ></slot>
+        ${this.checked
+          ? html`
+              <span part="checked-icon" class="menu-item__check">
+                <nile-icon
+                  name="tick"
+                  library="system"
+                  aria-hidden="true"
+                ></nile-icon>
+              </span>
+            `
+          : ``}
+
+        <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
 
         <slot
           part="label"
@@ -183,13 +182,15 @@ export class NileMenuItem extends NileElement {
 
         <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>
-        </span>
+        ${this.hasSubMenu
+          ? html` <span part="submenu-icon" class="menu-item__chevron">
+              <nile-icon
+                name="arrowright"
+                library="system"
+                aria-hidden="true"
+              ></nile-icon>
+            </span>`
+          : ``}
       </div>
     `;
   }

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

@@ -299,7 +299,7 @@ export class NileTabGroup extends NileElement {
   private repositionIndicator() {
     const currentTab = this.getActiveTab();
 
-    if (!currentTab) {
+    if (!currentTab || !this.indicator) {
       return;
     }
 
@@ -319,7 +319,6 @@ export class NileTabGroup extends NileElement {
       { left: 0, top: 0 }
     );
 
-    if(this.indicator)
     switch (this.placement) {
       case 'top':
       case 'bottom':
@@ -364,9 +363,10 @@ export class NileTabGroup extends NileElement {
 
   @watch('placement', { waitUntilFirstUpdate: true })
   syncIndicator() {
+    if(!this.indicator) return;
     const tab = this.getActiveTab();
 
-    if (tab && this.indicator) {
+    if (tab) {
       this.indicator.style.display = 'block';
       this.repositionIndicator();
     } else {

package/src/nile-table-cell-item/nile-table-cell-item.css.ts

@@ -29,7 +29,8 @@ export const styles = css`
     font-size: var(--nile-type-scale-3);
     font-style: normal;
     font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-type-scale-6);
+    /* line-height: var(--nile-type-scale-6); */
+    line-height: normal;
     letter-spacing: 0.2px;
   }
 `;

package/src/nile-table-header-item/nile-table-header-item.css.ts

@@ -31,7 +31,8 @@ export const styles = css`
     font-size: var(--nile-type-scale-2);
     font-weight: 500;
     font-style: normal;
-    line-height: var(--nile-type-scale-5);
+    /* line-height: var(--nile-type-scale-5); */
+    line-height: normal;
   }
 
   nile-icon {