@aquera/nile-elements 0.1.57-beta-1.0 → 0.1.57-beta-1.2

package/package.json

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

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

@@ -147,7 +147,6 @@ export const styles = css`
     color: var(--nile-colors-dark-900);
     font-size: 12px;
     font-weight: 500;
-    line-height: 12px;  
     letter-spacing: 0.2px;
   }
 
@@ -412,6 +411,7 @@ nile-icon[disabled] {
   flex-direction: column;
   gap: 18px;
   padding: 16px;
+  width: auto;
 }
 
  

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

@@ -119,7 +119,7 @@ export class NileCalendar extends NileElement {
   }
 
   private get yearOptions(): number[] {
-    const fallbackStart = 1990;
+    const fallbackStart = 2000;
     const fallbackEnd = 2050;
   
     const start = this.startYear ?? fallbackStart;
@@ -193,12 +193,13 @@ 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)
-        })}>
-          <div class="calendar-switcher">
+        })} part="calendar-config">
+          <div class="calendar-switcher" part="calendar-switcher">
             <nile-tab-group centered @nile-tab-show="${this.onTypeChange}" value="${this.type}">
               <nile-tab slot="nav" panel="absolute">Absolute</nile-tab>
               <nile-tab slot="nav" panel="relative">Relative</nile-tab>
@@ -210,7 +211,7 @@ export class NileCalendar extends NileElement {
         ${this.type == 'absolute' ? this.renderAbsoluteCalendar():''}
 
         ${!this.range?'':html`
-        <div class="button-container">
+        <div class="button-container" part="calendar-footer">
           ${this.allowClear?
             html`
             <nile-button 
@@ -236,8 +237,8 @@ export class NileCalendar extends NileElement {
    */
   renderAbsoluteCalendar(){
     return html`
-    <div class="calendar-wrapper">
-      <div class="calendar-container">
+    <div class="calendar-wrapper" part="calendar-wrapper">
+      <div class="calendar-container" part="calendar-container">
         ${this.renderMonth(
           this.currentYear,
           this.currentMonth,
@@ -326,30 +327,38 @@ export class NileCalendar extends NileElement {
     
     ${this.range ? html`
     <div>
-      <div class="unit-input-container">
+     <div>
+    <div class="unit-input-container" part="unit-input-container" style="display: flex; gap: 1rem; align-items: flex-end;">
+      
+      <div class="input-wrapper" part="input-wrapper" style="flex: 1;">
         <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>
 
-        <nile-select class="manual-input time-input"  
+      <div class="select-wrapper" part="select-wrapper" style="flex: 1;">
+        <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>
     `:''}
     `
   }
@@ -456,7 +465,7 @@ export class NileCalendar extends NileElement {
     
     return html`
       <div class="calendar">
-        <div class="calendar-header">
+        <div class="calendar-header" part="calendar-header">
           <nile-icon
             class="calendar-header__month-navigation"
             name="arrowleft"
@@ -562,12 +571,13 @@ export class NileCalendar extends NileElement {
             
             return html` 
             <div
+            part="calendar-day"
               class=${classMap(classMapObj)}
               @click="${() => { if (isCurrentMonth) this.selectDate(day, month, year)}}"
             >
               <span style="position:relative;">
                 ${day}
-                ${isCurrentDate(day, month, year) && isCurrentMonth?html`<div class="current__date__dot"></div>`:nothing}
+                ${isCurrentDate(day, month, year) && isCurrentMonth?html`<div class="current__date__dot" part="current-date-dot"></div>`:nothing}
               </span>
             </div>`;
           })}
@@ -852,7 +862,8 @@ export class NileCalendar extends NileElement {
   }
 
   emitChangedData(data:{startDate:Date,endDate:Date}|{value:any}|null){
-    this.emit('nile-changed',data);
+   
+this.emit('nile-changed', data); // deprecated . Use nile-change instead.
     this.emit('nile-change',data)
   }