@aquera/nile-elements 0.1.57-beta-1.4 → 0.1.57-beta-1.5

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

@@ -76,11 +76,6 @@ export class NileCalendar extends NileElement {
 
   @state() allowedDatesLocal: NileCalendarDateRange | any = null;
 
-  @property({ type: Number }) startYear?: number;
-  @property({ type: Number }) endYear?: number;
-  
-
-
   connectedCallback() {
     super.connectedCallback();
     this.initializeValue();
@@ -112,34 +107,6 @@ export class NileCalendar extends NileElement {
     }
   }
 
-  private get monthNames() {
-    return Array.from({ length: 12 }, (_, i) =>
-      new Date(0, i).toLocaleString('default', { month: 'short' })
-    );
-  }
-
-  private get yearOptions(): number[] {
-    const fallbackStart = 2000;
-    const fallbackEnd = 2050;
-  
-    const start = this.startYear ?? fallbackStart;
-    const end = this.endYear ?? fallbackEnd;
-  
-    if (start > end) return [];
-  
-    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
-  }
-  
-  private onMonthSelected(monthIndex: number) {
-    this.currentMonth = monthIndex;
-    this.emit('nile-month-change', { month: monthIndex });
-  }
-
-  private onYearSelected(year: number) {
-    this.currentYear = year;
-    this.emit('nile-year-change', { year });
-  }
-
   @watch('allowedDates')
   checkValidAllowedDate() {
     let newDateRange: NileCalendarDateRange | null;
@@ -164,23 +131,6 @@ export class NileCalendar extends NileElement {
       this.allowedDatesLocal=newDateRange;
     }
   }
- 
-  
-  private isPrevDisabled(): boolean {
-    return (
-      this.currentMonth === 0 &&
-      this.startYear !== undefined &&
-      this.currentYear <= this.startYear
-    );
-  }
-  
-  private isNextDisabled(): boolean {
-    return (
-      this.currentMonth === 11 &&
-      this.endYear !== undefined &&
-      this.currentYear >= this.endYear
-    );
-  }
   
 
   /**
@@ -193,16 +143,15 @@ export class NileCalendar extends NileElement {
           base:true,
           base__range:this.range,
         })}
-        part="calendar-root"
       >
         <div class=${classMap({
           "calendar-config":true,
           "hidden": !this.range || (this.range && this.hideTypes)
-        })} part="calendar-config">
-          <div class="calendar-switcher" part="calendar-switcher">
+        })}>
+          <div class="calendar-switcher">
             <nile-tab-group centered @nile-tab-show="${this.onTypeChange}" value="${this.type}">
-              <nile-tab slot="nav" panel="absolute" tabindex="0">Absolute</nile-tab>
-              <nile-tab slot="nav" panel="relative" tabindex="0">Relative</nile-tab>
+              <nile-tab slot="nav" panel="absolute">Absolute</nile-tab>
+              <nile-tab slot="nav" panel="relative">Relative</nile-tab>
             </nile-tab-group>
           </div>
         </div>
@@ -211,7 +160,7 @@ export class NileCalendar extends NileElement {
         ${this.type == 'absolute' ? this.renderAbsoluteCalendar():''}
 
         ${!this.range?'':html`
-        <div class="button-container" part="calendar-footer">
+        <div class="button-container">
           ${this.allowClear?
             html`
             <nile-button 
@@ -219,18 +168,13 @@ export class NileCalendar extends NileElement {
             variant="secondary"
             ?disabled="${ !this.startDate || !this.endDate }"
             @click="${this.clearDate}"
-            role="button"
-            tabindex="0"
-            @keydown="${(e: KeyboardEvent) => {if (e.key === 'Enter' || e.key === ' ') this.clearDate();}}"
-            > Reset</nile-button>`:nothing
+            > Clear</nile-button>`:nothing
           }
           <nile-button 
           class="apply-button"  
           ?disabled="${ !this.startDate || !this.endDate }"  
           @click="${this.confimRange}"
-          role="button"
-        tabindex="0"
-        @keydown="${(e: KeyboardEvent) => {if (e.key === 'Enter' || e.key === ' ') this.confimRange();}}"> Apply</nile-button>
+          > Apply</nile-button>
         </div>
         `}
       </div>
@@ -242,8 +186,8 @@ export class NileCalendar extends NileElement {
    */
   renderAbsoluteCalendar(){
     return html`
-    <div class="calendar-wrapper" part="calendar-wrapper">
-      <div class="calendar-container" part="calendar-container">
+    <div class="calendar-wrapper">
+      <div class="calendar-container">
         ${this.renderMonth(
           this.currentYear,
           this.currentMonth,
@@ -283,87 +227,68 @@ export class NileCalendar extends NileElement {
     <div class="units-wrapper">
       <div class="unit-container">
         ${this.hideDurationFields?.includes('minutes')?'':html`
-        <div class="unit-group">
         <div class="duration-name">Minutes</div>
         <div class="duration-units">
           ${this.renderTimeValues('minutes', [1, 5, 15, 30, 45])}
         </div>
-        </div>
         `}
 
         ${this.hideDurationFields?.includes('hours')?'':html`
-        <div class="unit-group">
         <div class="duration-name">Hours</div>
         <div class="duration-units">
           ${this.renderTimeValues('hours', [1, 2, 3, 6, 8, 12])}
         </div>
-        </div>
         `}
         
         ${this.hideDurationFields?.includes('days')?'':html`
-        <div class="unit-group">
         <div class="duration-name">Days</div>
         <div class="duration-units">
           ${this.renderTimeValues('days', [1, 2, 3, 4, 5, 6])}
         </div>
-        </div>
         `}
         
         ${this.hideDurationFields?.includes('weeks')?'':html`
-        <div class="unit-group">
         <div class="duration-name">Weeks</div>
         <div class="duration-units">
           ${this.renderTimeValues('weeks', [1, 2, 4, 6])}
         </div>
-        </div>
-        
         `}
         
         ${this.hideDurationFields?.includes('months')?'':html`
-        <div class="unit-group">
         <div class="duration-name">Months</div>
         <div class="duration-units">
           ${this.renderTimeValues('months', [3, 6, 12, 15])}
         </div>
-        </div>
         `}
       </div>
     </div>
     
     ${this.range ? html`
     <div>
-     <div>
-    <div class="unit-input-container" part="unit-input-container" style="display: flex; align-items: flex-end;">
-      
-      <div class="input-wrapper" part="input-wrapper" style="flex: 1;">
+      <div class="unit-input-container">
         <nile-input 
-          class="manual-input duration-input" 
-          label="Duration"
-          inputmode="numeric"
-          type="number"
-          value="${this.selectedValue}" 
-          @nile-change="${this.handleDurationChange}"
-          placeholder="Enter Value"
+        class="manual-input duration-input" 
+        label="Duration"
+        inputmode="numeric"
+        type="number"
+        value="${this.selectedValue}" 
+        @nile-change="${this.handleDurationChange}"
+        placeholder="Enter Value"
         ></nile-input>
-      </div>
 
-      <div class="select-wrapper" part="select-wrapper" style="flex: 1;">
-        <nile-select 
-          class="manual-input time-input"  
+        <nile-select class="manual-input time-input"  
           label="Unit of time" 
-          value="${this.selectedUnit}"
+          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-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>
-  </div>
     `:''}
     `
   }
@@ -379,10 +304,8 @@ export class NileCalendar extends NileElement {
       value =>
         html`
           <div
-          tabindex="0"
-          @keydown="${(e: KeyboardEvent) => {if (e.key === 'Enter' || e.key === ' ') {this.handleTimeValueClick(unit, value, e);}}}"
-          class="duration__value ${this.selectedUnit === unit && this.selectedValue === value ? 'duration__value--selected':''}"
-          @click=${(e: any) => this.handleTimeValueClick(unit, value, e)}
+            class="duration__value ${this.selectedUnit === unit && this.selectedValue === value ? 'duration__value--selected':''}"
+            @click=${(e: any) => this.handleTimeValueClick(unit, value, e)}
           >${value}
           </div>`
     );
@@ -469,88 +392,27 @@ export class NileCalendar extends NileElement {
       );
     };
 
-    
     return html`
       <div class="calendar">
-        <div class="calendar-header" part="calendar-header">
+        <div class="calendar-header">
           <nile-icon
             class="calendar-header__month-navigation"
             name="arrowleft"
-            ?disabled="${this.isPrevDisabled()}"
             color="black"
             @click="${this.prevMonth}"
-            role="button"
-            tabindex="${this.isPrevDisabled() ? -1 : 0}"
-            @keydown="${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') this.prevMonth(); }}"
           >
           </nile-icon>
-          
-       <!-- MONTH DROPDOWN -->
-       <div class="calendar-header__center">
-       <nile-dropdown class="month-dropdown">
-        <span
-          slot="trigger"
-          class="calendar-header__trigger month-trigger"
-          role="button"
-        >
-          ${new Date(year, month).toLocaleString('default', {
-            month: 'long',
-          })}
-          <nile-icon name="arrowdropdown"  color="black" class="calendar-header__caret"></nile-icon>
-        </span>
-        <nile-menu >
-  <div class="month-scroll-wrapper">
-  ${this.monthNames.map((m, idx) => html`
-  <nile-menu-item
-    class="month-menu-item"
-    ?selected="${idx === month}"
-    id="${idx === month ? 'selected-month-item' : ''}"
-    @click="${() => this.onMonthSelected(idx)}"
-  >
-    ${m}
-  </nile-menu-item>
-`)}
-  </div>
-</nile-menu>
-      </nile-dropdown>
-
-      <!-- YEAR DROPDOWN -->
-      <nile-dropdown class="year-dropdown" >
-        <span
-          slot="trigger"
-          class="calendar-header__trigger"
-          role="button"
-        >
-          ${year}
-          <nile-icon name="arrowdropdown" color="black" class="calendar-header__caret"></nile-icon>
-        </span>
-        <nile-menu>
-        <div class="year-scroll-wrapper">
-          ${this.yearOptions.map(
-            y => html`
-              <nile-menu-item
-                class="year-menu-item"
-                ?selected="${y === year}"
-                @click="${() => this.onYearSelected(y)}"
-              >
-                ${y}
-
-              </nile-menu-item>
-            `
-          )}
-          </div>
-        </nile-menu>
-      </nile-dropdown>
-      </div>
+          <span
+            >${new Date(year, month).toLocaleString('default', {
+              month: 'long',
+            })}
+            ${year}</span
+          >
           <nile-icon
             class="calendar-header__month-navigation"
             name="arrowright"
-            ?disabled="${this.isNextDisabled()}"
             color="black"
-            role="button"
-  tabindex="${this.isNextDisabled() ? -1 : 0}"
-  @click="${this.nextMonth}"
-  @keydown="${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') this.nextMonth(); }}"
+            @click="${this.nextMonth}"
           >
           </nile-icon>
         </div>
@@ -578,18 +440,12 @@ export class NileCalendar extends NileElement {
             
             return html` 
             <div
-            part="calendar-day"
               class=${classMap(classMapObj)}
-              tabindex="${isCurrentMonth && this.isAllowedDate(day, month, year) ? '0' : '-1'}"
-  @click="${() => { if (isCurrentMonth) this.selectDate(day, month, year)}}"
-  @keydown="${(e: KeyboardEvent) => {
-    if ((e.key === 'Enter' || e.key === ' ') && isCurrentMonth) {
-      this.selectDate(day, month, year);
-    }
-  }}" >
+              @click="${() => { if (isCurrentMonth) this.selectDate(day, month, year)}}"
+            >
               <span style="position:relative;">
                 ${day}
-                ${isCurrentDate(day, month, year) && isCurrentMonth?html`<div class="current__date__dot" part="current-date-dot"></div>`:nothing}
+                ${isCurrentDate(day, month, year) && isCurrentMonth?html`<div class="current__date__dot"></div>`:nothing}
               </span>
             </div>`;
           })}
@@ -830,26 +686,21 @@ export class NileCalendar extends NileElement {
 
   private nextMonth(): void {
     if (this.currentMonth === 11) {
-      const newYear = this.currentYear + 1;
-      if (this.endYear !== undefined && newYear > this.endYear) return;
       this.currentMonth = 0;
-      this.currentYear = newYear;
+      this.currentYear++;
     } else {
       this.currentMonth++;
     }
   }
-  
+
   private prevMonth(): void {
     if (this.currentMonth === 0) {
-      const newYear = this.currentYear - 1;
-      if (this.startYear !== undefined && newYear < this.startYear) return;
       this.currentMonth = 11;
-      this.currentYear = newYear;
+      this.currentYear--;
     } else {
       this.currentMonth--;
     }
   }
-  
 
   private confimRange() {
     if (!(this.startDate && this.endDate)) return;
@@ -874,8 +725,7 @@ export class NileCalendar extends NileElement {
   }
 
   emitChangedData(data:{startDate:Date,endDate:Date}|{value:any}|null){
-   
-this.emit('nile-changed', data); // deprecated . Use nile-change instead.
+    this.emit('nile-changed',data);
     this.emit('nile-change',data)
   }
 

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

@@ -13,6 +13,9 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     box-sizing: border-box;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   :host *,
@@ -26,34 +29,35 @@ export const styles = css`
   }
 
   :host {
-    --border-color: var(--nile-card-color-border);
-    --border-radius: 8px;
-    --border-width: 0.5px;
-    --padding: 18px;
+    --border-color: var(--nile-card-color-border, var(--ng-colors-border-secondary));
+    --border-radius: var(--nile-radius-radius-xl, var(--ng-radius-xl));
+    --padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
     display: inline-block;
   }
 
   .card {
     display: flex;
     flex-direction: column;
-    justify-items: strecth;
-    background-color: var(--nile-colors-white-base);
-    outline: solid var(--border-width) var(--border-color);
+    justify-items: stretch;
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    outline: solid var(--nile-outline-0-5px) var(--border-color);
+    border: solid  var(--ng-outline-1px) var(--border-color);
     border-radius: var(--border-radius);
     min-width: 273px;
     max-width: 350px;
     overflow: hidden;
+    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));
   }
 
   .body__wrapper {
     display: flex;
     flex-direction: column;
-    gap: 12px;
-    padding: 12px 16px 0 16px;
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-xl));
   }
 
   .body__wrapper_nf {
-    padding: 12px 16px 16px 16px;
+    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));
   }
   .card__header {
     display: block;
@@ -64,25 +68,68 @@ export const styles = css`
   }
 
   .card__footer {
-    margin-top: 12px;
+    margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));
     display: block;
     box-sizing: border-box;
     align-content: center;
     align-items: center;
-    padding: 8px 16px;
-    background-color: var(--nile-colors-neutral-100);
+    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
+    border-top: var(--nile-border-style-none, 1px solid var(--ng-colors-border-secondary));
     height: 40px;
   }
 
-  .card:not(.card--has-footer) .card__footer {
+ 
+.card:active {
+  border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);
+  background: var(--ng-colors-bg-brand-primary);
+  box-shadow: var(--ng-shadow-xs);
+}  
+
+ 
+.card:active .card__footer {
+  background: var(--ng-colors-bg-brand-primary);
+  box-shadow: var(--ng-shadow-xs);
+}
+
+
+.card:not(.card--has-footer) .card__footer {
     display: none;
   }
 
-  .card:hover {
-    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
-      0px 2px 4px -2px rgba(16, 24, 40, 0.06);
-    outline: solid 1px var(--border-color);
-  }
+.card--active {
+  border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);
+  background: var(--ng-colors-bg-brand-primary);
+  box-shadow: var(--ng-shadow-xs);
+}
+
+.card--active .card__footer {
+  background: var(--ng-colors-bg-brand-primary);
+  box-shadow: var(--ng-shadow-xs);
+}
+
+ 
+.card:not(.card--active):not(:active):hover {
+  box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-sm));
+  outline: solid 1px var(--border-color);
+  background-color: var(--ng-colors-bg-primary-hover);
+}
+
+.card:not(.card--active):not(:active):hover .card__footer {
+  background-color: var(--ng-colors-bg-primary-hover);
+  box-shadow: var(--ng-shadow-sm);
+}
+
+ 
+.card--disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.card--disabled .card__footer {
+  pointer-events: none;
+}
+
 `;
 
 export default [styles];

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

@@ -30,6 +30,9 @@ export class NileCard extends NileElements {
 
   private readonly hasSlotController = new HasSlotController(this, 'footer');
 
+  @property({ type: Boolean, reflect: true })active = false;
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
   render() {
     return html`
       <div
@@ -37,6 +40,8 @@ export class NileCard extends NileElements {
         class=${classMap({
           card: true,
           'card--has-footer': this.hasSlotController.test('footer'),
+          'card--active': this.active,
+          'card--disabled': this.disabled,
         })}
       >
         <div class="body__wrapper" part="body__wrapper"