@aquera/nile-elements 0.0.81 → 0.0.82

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

@@ -11,6 +11,7 @@ import {
   property,
   CSSResultArray,
   TemplateResult,
+  nothing
 } from 'lit-element';
 import { customElement, state } from 'lit/decorators.js';
 import { styles } from './nile-calendar.css';
@@ -150,10 +151,6 @@ export class NileCalendar extends NileElement {
   @watch('value')
   valueChanged() {
 
-    if (typeof this.value === 'object' && this.value !== null) {
-      this.value = JSON.stringify(this.value);
-    }
-
     if (this.range && this.value) {
       this.rangeValue = this.value;
       this.value = null;
@@ -478,43 +475,39 @@ export class NileCalendar extends NileElement {
           >
           </nile-icon>
         </div>
-        <div class="header-divider"></div>
-        <div class="day-names">
-          <div class="day">Sun</div>
-          <div class="day">Mon</div>
-          <div class="day">Tue</div>
-          <div class="day">Wed</div>
-          <div class="day">Thu</div>
-          <div class="day">Fri</div>
-          <div class="day">Sat</div>
-        </div>
-        <div class="days">
+        <div class="days_container">
+          <div class="day_name">Su</div>
+          <div class="day_name">Mo</div>
+          <div class="day_name">Tu</div>
+          <div class="day_name">We</div>
+          <div class="day_name">Th</div>
+          <div class="day_name">Fr</div>
+          <div class="day_name">Sa</div>
+
           ${allDays.map((day, index) => {
             const isCurrentMonth =
               index >= fillerDaysBefore.length &&
               index < fillerDaysBefore.length + daysArray.length;
-            return html` <div
-              class="day
-              ${this.isAllowedDate(day, month, year) ? '' : 'not-allowed'}
-              ${isSelectedDate(day, month, year, isCurrentMonth)} ${isInRange(
-                day,
-                month,
-                year,
-                isCurrentMonth
-              )} ${isInRange(day, month, year, isCurrentMonth)
-                ? 'in-range'
-                : ''} ${!isCurrentMonth ? 'filler' : ''}
-                ${this.isCurrentDate(day, month, year) && isCurrentMonth
-                ? 'current-date'
-                : ''}
-                "
-              @click="${() => {
-                if (isCurrentMonth) {
-                  this.selectDate(day, month, year);
-                }
-              }}"
+            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),
+              'in-range' : isInRange(day, month, year, isCurrentMonth) ,
+              // 'current-date' : this.isCurrentDate(day, month, year) && isCurrentMonth,
+              'filler' : !isCurrentMonth,
+            }
+            if(datePlacement) classMapObj[datePlacement]=true
+            
+            return html` 
+            <div
+              class=${classMap(classMapObj)}
+              @click="${() => { if (isCurrentMonth) this.selectDate(day, month, year)}}"
             >
-              ${day}
+              <span style="position:relative;">
+                ${day}
+                ${this.isCurrentDate(day, month, year) && isCurrentMonth?html`<div class="current__date__dot"></div>`:nothing}
+              </span>
             </div>`;
           })}
         </div>
@@ -679,16 +672,13 @@ export class NileCalendar extends NileElement {
 
     this.requestUpdate();
   }
-
+  
   renderTimeValues(unit: string, values: any[]) {
     return values.map(
       value =>
         html`
           <div
-            class="time-value ${this.selectedUnit === unit &&
-            this.selectedValue === value
-              ? 'time-value--selected'
-              : ''}"
+            class="duration__value ${this.selectedUnit === unit && this.selectedValue === value ? 'duration__value--selected':''}"
             @click=${(e: any) => this.handleTimeValueClick(unit, value, e)}
           >
             ${value}
@@ -724,18 +714,17 @@ 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);
+    // 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="base ${this.range ? 'base__range' : ''} ${this.type ===
-        'relative'
-          ? 'base__relative'
-          : ''}"
+        class=${classMap({
+          base:true,
+          base__range:this.range,
+        })}
       >
         <div class="calendar-config ${!this.range ? 'hidden' : ''}">
           <div class="calendar-switcher">
@@ -746,179 +735,147 @@ export class NileCalendar extends NileElement {
           </div>
         </div>
 
-        <div class="calendar-timezone ${!this.range || this.hideTimeZone ? '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>
+        ${this.type == 'relative' ? this.renderRelativeCalendar():''}
+        ${this.type == 'absolute' ? this.renderAbsoluteCalendar():''}
 
-        <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)
-            )}
-          </div>
+        <div class="button-container">
+          <nile-button 
+          class="apply-button"  
+          ?disabled="${ !this.startDate || !this.endDate }"  
+          @click="${this.confimRange}"
+          > Apply</nile-button>
         </div>
+      </div>
+    `;
+  }
 
-        <div class="unit-container ${this.type !== 'relative' ? 'hidden' : ''}">
-          <div
-            class="time-unit-group ${this.hideDurationFields?.includes('minutes')
-              ? 'hidden'
-              : ''} "
-          >
-            <div class="time-unit-name"><span>Minutes</span></div>
-            <div class="time-unit-value minute-values">
-              ${this.renderTimeValues('minutes', [1, 5, 15, 30, 45])}
-            </div>
-          </div>
-
-          <div
-            class="time-unit-group ${this.hideDurationFields?.includes('hours')
-              ? 'hidden'
-              : ''}"
-          >
-            <div class="time-unit-name"><span>Hours</span></div>
-            <div class="time-unit-value hours-values">
-              ${this.renderTimeValues('hours', [1, 2, 3, 6, 8, 12])}
-            </div>
-          </div>
-
-          <div
-            class="time-unit-group ${this.hideDurationFields?.includes('days')
-              ? 'hidden'
-              : ''}"
-          >
-            <div class="time-unit-name"><span>Days</span></div>
-            <div class="time-unit-value">
-              ${this.renderTimeValues('days', [1, 2, 3, 4, 5, 6])}
-            </div>
-          </div>
-
-          <div
-            class="time-unit-group ${this.hideDurationFields?.includes('weeks')
-              ? 'hidden'
-              : ''}"
-          >
-            <div class="time-unit-name"><span>Weeks</span></div>
-            <div class="time-unit-value weeks-values ">
-              ${this.renderTimeValues('weeks', [1, 2, 4, 6])}
-            </div>
-          </div>
-
-          <div
-            class="time-unit-group ${this.hideDurationFields?.includes('months')
-              ? 'hidden'
-              : ''}"
-          >
-            <div class="time-unit-name"><span>Months:</span></div>
-            <div class="time-unit-value months-values ">
-              ${this.renderTimeValues('months', [3, 6, 12, 15])}
-            </div>
-          </div>
+  /**
+   * @returns HTML content for absolute calendar
+   */
+  renderAbsoluteCalendar(){
+    return html`
+    <div class="calendar-wrapper">
+      <div class="calendar-container ${this.range ? 'with-margin' : ''}">
+        ${this.renderMonth(
+          this.currentYear,
+          this.currentMonth,
+          this.getDaysArray(this.currentYear, this.currentMonth)
+        )}
+      </div>
+    </div>
+    ${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" 
+            value="${this.formatTime(this.startDate)}" 
+            placeholder="HH:MM:SS" @nile-change="${this.handleStartTimeInput}"
+          > </nile-input>
         </div>
 
-        ${this.range && this.type === 'relative'
-          ? html`
-          <div class="calender-input calender-input--relative">
-            <div class="unit-input-container">
-              <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  time-input"  label="Unit of time" style="margin-top:3px" value="${
-                this.selectedUnit
-              }"
-              @nile-change="${this.handleUnitChange}"
-              >
-                <nile-option value="minutes" class="${
-                  this.hideDurationFields?.includes('minutes') ? 'hidden' : ''
-                }"> Minutes </nile-option>
-                <nile-option value="hours" class="${
-                  this.hideDurationFields?.includes('hours') ? 'hidden' : ''
-                }"> Hours </nile-option>
-                <nile-option value="days" class="${
-                  this.hideDurationFields?.includes('days') ? 'hidden' : ''
-                }"> Days </nile-option>
-                <nile-option value="weeks" class="${
-                  this.hideDurationFields?.includes('weeks') ? 'hidden' : ''
-                }"> Weeks </nile-option>
-                <nile-option value="months" class="${
-                  this.hideDurationFields?.includes('months') ? 'hidden' : ''
-                }"> Months </nile-option>
-              </nile-select>
-
-            </div>
-
-          <div class="button-container--relative">
-            <nile-button class="apply-button" variant="primary"  ?disabled="${
-              !this.startDate || !this.endDate
-            }"  @click="${this.confimRange}"> Apply</nile-button>
-            </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" 
+            value="${this.formatTime(this.endDate)}" 
+            placeholder="HH:MM:SS" @nile-change="${this.handleEndTimeInput}"
+          > </nile-input>
+        </div>
+    </div>
+    `:''}
+    `
+  }
 
+  /**
+   * @returns HTML content for relative calendar
+   */
+  renderRelativeCalendar(){
+    return html`
+    <div class="units-wrapper">
+      <div class="unit-container">
+        ${this.hideDurationFields?.includes('minutes')?'':html`
+        <div class="duration-name">Minutes</div>
+        <div class="duration-units">
+          ${this.renderTimeValues('minutes', [1, 5, 15, 30, 45])}
+        </div>
+        `}
 
+        ${this.hideDurationFields?.includes('hours')?'':html`
+        <div class="duration-name">Hours</div>
+        <div class="duration-units">
+          ${this.renderTimeValues('hours', [1, 2, 3, 6, 8, 12])}
         </div>
+        `}
+        
+        ${this.hideDurationFields?.includes('days')?'':html`
+        <div class="duration-name">Days</div>
+        <div class="duration-units">
+          ${this.renderTimeValues('days', [1, 2, 3, 4, 5, 6])}
         </div>
-        `
-          : ''}
-        ${this.range && this.type === 'absolute'
-          ? html`
-          <div class="calender-input ${this.showManualInputs  ? '' : 'hidden'}" >
-            <div>
-                  <span class="manual-input-label">From </span>
-                  <div class="from">
-                    <!-- ${!this.hideInput ? html`<nile-input class="manual-input" value="${this.formatDate(
-                          this.startDate
-                        )}" placeholder="DD/MM/YYYY" @nile-change="${
-                        this.handleStartDateInput
-                      }">
-                      </nile-input>`:html`` } -->
-
-                        <nile-input class="manual-input" value="${this.formatTime(
-                          this.startDate
-                        )}" placeholder="HH:MM:SS" @nile-change="${
-                        this.handleStartTimeInput
-                      }"> </nile-input>
-                  </div>
-            </div>
-
-            <div>
-                  <span class="manual-input-label">To </span>
-                  <div class="from">
-                    <!-- ${!this.hideInput ? html`<nile-input class="manual-input" value="${this.formatDate(
-                        this.endDate
-                      )}" placeholder="DD/MM/YYYY" @nile-change="${
-                        this.handleEndDateInput
-                      }"></nile-input>`:html``} -->
-
-                      <nile-input class="manual-input  " value="${this.formatTime(
-                        this.endDate
-                      )}" placeholder="HH:MM:SS" @nile-change="${
-                        this.handleEndTimeInput
-                      }"> </nile-input>
-                  </div>
-            </div>
-
+        `}
+        
+        ${this.hideDurationFields?.includes('weeks')?'':html`
+        <div class="duration-name">Weeks</div>
+        <div class="duration-units">
+          ${this.renderTimeValues('weeks', [1, 2, 4, 6])}
         </div>
-        <div class="button-container">
-            <nile-button class="apply-button"  ?disabled="${
-              !this.startDate || !this.endDate
-            }"  @click="${this.confimRange}"> Apply</nile-button>
-            </div>
+        `}
+        
+        ${this.hideDurationFields?.includes('months')?'':html`
+        <div class="duration-name">Months</div>
+        <div class="duration-units">
+          ${this.renderTimeValues('months', [3, 6, 12, 15])}
         </div>
-        `
-          : ''}
+        `}
       </div>
-    `;
+    </div>
+    
+    ${this.range ? html`
+    <div>
+      <div class="unit-input-container">
+        <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 time-input"  
+          label="Unit of time" 
+          style="margin-top:3px" 
+          value="${ this.selectedUnit }"
+          @nile-change="${this.handleUnitChange}"
+        >
+          <nile-option value="minutes" class="${this.hideDurationFields?.includes('minutes')?'hidden':''}">Minutes</nile-option>
+          <nile-option value="hours" class="${this.hideDurationFields?.includes('hours')?'hidden':''}"> Hours </nile-option>
+          <nile-option value="days" class="${this.hideDurationFields?.includes('days')?'hidden':''}">Days</nile-option>
+          <nile-option value="weeks" class="${this.hideDurationFields?.includes('weeks')?'hidden':''}">Weeks</nile-option>
+          <nile-option value="months" class="${this.hideDurationFields?.includes('months')?'hidden':''}"> Months </nile-option>
+        </nile-select>
+      </div>
+    </div>
+    `:''}
+    `
   }
 }
 
@@ -928,4 +885,4 @@ declare global {
   interface HTMLElementTagNameMap {
     'nile-calendar': NileCalendar;
   }
-}
+}

package/src/nile-card/nile-card.test.ts

@@ -0,0 +1,74 @@
+import { fixture, html, expect, oneEvent } from '@open-wc/testing';
+import './nile-card';
+import { NileCard } from './nile-card';
+
+describe('Nile Card', () => {
+  it('should render the card properly', async () => {
+    const el = await fixture<NileCard>(html`<nile-card>
+      <div style="display: flex;">
+        <img
+          class="alert-prefix-img"
+          src="https://assets.aqueralabs.com/logos/aws.png"
+        />
+        <nile-icon name="drag" class="drag-icon"> </nile-icon>
+      </div>
+      <div class="amazon-service">
+        Amazon web service Scalable Cloud Infrastructure
+      </div>
+      <div class="service-description">Build, Deploy, and Manage Websites</div>
+      <div slot="footer" class="footer-link">
+        https://api.aquera.io/scim/5efdcsd
+      </div>
+    </nile-card>`);
+    expect(el).shadowDom.to.equalSnapshot();
+  });
+
+  it('should not render the card footer ,  if footer is not there', async () => {
+    const el = await fixture<NileCard>(html`<nile-card>
+      <div style="display: flex;">
+        <img
+          class="alert-prefix-img"
+          src="https://assets.aqueralabs.com/logos/aws.png"
+        />
+        <nile-icon name="drag" class="drag-icon"> </nile-icon>
+      </div>
+      <div class="amazon-service">
+        Amazon web service Scalable Cloud Infrastructure
+      </div>
+      <div class="service-description">Build, Deploy, and Manage Websites</div>
+    </nile-card>`);
+
+    const footerDiv = el.shadowRoot!.querySelector('div[part="footer"]');
+    expect(footerDiv).to.null;
+  });
+
+  it('should  render the card header ,  if header is there', async () => {
+    const el = await fixture<NileCard>(html` <nile-card>
+      <div class="card-header" slot="header">
+        <img
+          class="alert-prefix-img"
+          src="https://assets.aqueralabs.com/logos/aws.png"
+          height="32"
+          width="32"
+        />
+        <div class="card-header-text">
+          <span class="card-header-text-heading">Title</span>
+          <span class="card-header-text-subheading">Support Text</span>
+        </div>
+        <nile-slide-toggle></nile-slide-toggle>
+        <nile-icon name="dropdown" class="drag-icon" size="20"> </nile-icon>
+      </div>
+      <div class="card-body">You can use this space as description fo...</div>
+      <div slot="footer" class="footer-link">
+        <nile-avatar name="Aquera Labs" isRounded></nile-avatar>
+        <span class="right-side">
+          <nile-icon name="calendar"></nile-icon>
+          Hello
+        </span>
+      </div>
+    </nile-card>`);
+
+    const headerDiv = el.shadowRoot!.querySelector('slot[name="header"]');
+    expect(headerDiv).to.exist;
+  });
+});

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

@@ -35,18 +35,18 @@ export class NileDatePicker extends NileElement {
 
   @property({ type: Boolean }) range = false;
 
-  
+  @property({ type: Boolean, attribute: 'hide-time-zone' }) hideTimeZone =
+    false;
 
-  @property({ type: Boolean ,attribute: 'hide-time-zone' }) hideTimeZone = false;
-
-  @property({ type: Boolean , attribute: 'show-manual-inputs' }) showManualInputs = false;
+  @property({ type: Boolean, attribute: 'show-manual-inputs' })
+  showManualInputs = false;
 
   @property() value: any;
   @property({ type: Array, attribute: 'hide-duration-fields' })
   hideDurationFields: any = [];
 
   @property({ attribute: 'allowed-dates' })
-  allowedDates: any ;
+  allowedDates: any = '{}';
 
   @query('nile-dropdown') dropdown: NileDropdown;
 
@@ -55,7 +55,6 @@ export class NileDatePicker extends NileElement {
    * @slot This is a slot test
    */
   render(): TemplateResult {
-    
     return html`
       <nile-dropdown .hoist="${true}" distance="6">
         <slot slot="trigger" part="trigger" name="trigger"></slot>

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

@@ -16,7 +16,7 @@ export const styles = css`
     --header-spacing: 1.25rem;
     --body-spacing: 1.25rem;
     --footer-spacing: 1.25rem;
-
+    --nile-dialog-remove-icon-color: #000;
     display: contents;
   }
 
@@ -146,6 +146,9 @@ export const styles = css`
     left: 0;
     background-color: hsl(0 0% 0% / 43%);
   }
+  .dialog__close {
+    cursor: pointer;
+  }
 
   @media (forced-colors: active) {
     .dialog__panel {

package/src/nile-dialog/nile-dialog.ts

@@ -60,7 +60,6 @@ export class NileDialog extends NileElement {
 
   @property({ type: Boolean, reflect: true }) preventOverlayClose = false;
 
-
   /**
    *  Added to resolve conflicts between Angular Material's mat-drawer components.
    */
@@ -307,15 +306,16 @@ export class NileDialog extends NileElement {
                   </h2>
                   <div part="header-actions" class="dialog__header-actions">
                     <slot name="header-actions"></slot>
-                    <nile-icon-button
+                    <slot name="header-actions"></slot>
+                    <nile-icon
                       part="close-button"
                       exportparts="base:close-button__base"
                       class="dialog__close"
                       name="close"
                       label="close"
-                      library="system"
+                      color="var(--nile-dialog-remove-icon-color)"
                       @click="${() => this.requestClose('close-button')}"
-                    ></nile-icon-button>
+                    ></nile-icon>
                   </div>
                 </header>
               `