@aquera/nile-elements 0.1.57-beta-1.1 → 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.1",
+  "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.ts

@@ -327,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>
     `:''}
     `
   }
@@ -854,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)
   }