@aquera/nile-elements 0.0.50 → 0.0.51

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

@@ -15,7 +15,7 @@ export const styles = css`
   }
 
   .calendar-container {
-    font-family:var(--nile-font-family-serif);
+    font-family: var(--nile-font-family-serif);
     width: 290px;
     height: auto;
     text-align: center;
@@ -125,6 +125,12 @@ export const styles = css`
     color: white;
   }
 
+  .selected-date:hover,
+  .range-start:hover,
+  .range-end:hover {
+    background: #a5d3f3;
+  }
+
   .range-start {
     background: #a5d3f3;
     border-radius: 4px 0 0 4px;
@@ -174,9 +180,9 @@ export const styles = css`
     margin-top: 6px;
     padding: 0 16px;
     width: 290px;
-    display:flex;
-    flex-wrap:wrap;
-    gap:8px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
   }
 
   .calender-input--relative {
@@ -189,11 +195,11 @@ export const styles = css`
     justify-content: space-between;
     gap: 8px;
     margin-top: 12px;
-    width:auto;
+    width: auto;
   }
 
   .manual-input {
-    width:125px;
+    width: 125px;
   }
 
   .manual-input-label {
@@ -239,7 +245,7 @@ export const styles = css`
     display: flex;
     flex-direction: column;
     width: 352px;
-    gap:10px;
+    gap: 10px;
     padding: 24px 24px 0 24px;
   }
 
@@ -247,7 +253,7 @@ export const styles = css`
     display: flex;
     flex-direction: column;
     align-items: start;
-    justify-content:center;
+    justify-content: center;
     gap: 12px;
   }
 
@@ -347,7 +353,7 @@ export const styles = css`
 
   .not-allowed {
     pointer-events: none;
-    color:var(--nile-colors-dark-500);
+    color: var(--nile-colors-dark-500);
   }
 `;
 

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

@@ -92,7 +92,7 @@ export class NileCalendar extends NileElement {
 
   firstUpdated() {
     const allowedDatesAttribute = this.getAttribute('allowed-dates');
-    
+
     if (allowedDatesAttribute !== null ) {
       try {
         this.allowedDates = JSON.parse(allowedDatesAttribute);
@@ -145,6 +145,11 @@ 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;
@@ -879,8 +884,8 @@ export class NileCalendar extends NileElement {
                       }"> </nile-input>
                   </div>
             </div>
-              
-            <div> 
+
+            <div>
                   <span class="manual-input-label">To </span>
                   <div class="from">
                       <nile-input class="manual-input" value="${this.formatDate(
@@ -895,7 +900,7 @@ export class NileCalendar extends NileElement {
                       }"> </nile-input>
                   </div>
             </div>
-            
+
         </div>
         <div class="button-container">
             <nile-button class="apply-button"  ?disabled="${
@@ -916,4 +921,4 @@ declare global {
   interface HTMLElementTagNameMap {
     'nile-calendar': NileCalendar;
   }
-}
+}

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

@@ -58,8 +58,9 @@ export const styles = css`
     border-top: solid var(--border-width) var(--border-color);
     padding: var(--footer-padding);
     border:1px solid var(--nile-card-footer-border-color);
-    background-color:var(--nile-card-footer-background-color);
+    border-width: var(--nile-card-footer-border-width);
     border-radius:var(--nile-card-footer-border-radius);
+    background-color:var(--nile-card-footer-background-color);
   }
 
   .card:not(.card--has-footer) .card__footer {