@aquera/nile-elements 0.0.80 → 0.0.82

package/dist/nile-calendar/nile-calendar.esm.js

@@ -1,4 +1,4 @@
-import{__decorate as t}from"tslib";import{x as i}from"../index-0a3007c5.esm.js";import{query as e,state as s,customElement as n}from"lit/decorators.js";import{s as a}from"./nile-calendar.css.esm.js";import{w as h}from"../internal/watch.esm.js";import{N as l}from"../internal/nile-element.esm.js";import"../nile-popup/nile-popup.esm.js";import{n as d}from"../property-09139d3c.esm.js";import"lit";import"lit/directives/class-map.js";import"../nile-popup/nile-popup.css.esm.js";let r=class extends l{constructor(){super(...arguments),this.currentMonth=(new Date).getMonth(),this.currentYear=(new Date).getFullYear(),this.dropDownOpened=!1,this.allowedDates={},this.valueAttribute=null,this.formattedDate=null,this.startDate=null,this.endDate=null,this.isSelectingStart=!0,this.range=!1,this.type="absolute",this.selectedTimeZone="local",this.validAllowedDates=!0,this.hideInput=!1,this.hideDurationFields=[],this.hideTimeZone=!1,this.showManualInputs=!1}static get styles(){return[a]}firstUpdated(){const t=this.getAttribute("allowed-dates");if(null!==t)try{this.allowedDates=JSON.parse(t)}catch(t){console.error("Error parsing allowed-dates attribute:",t)}else this.validAllowedDates=!1}checkValidAllowedDate(){if(0==Object.keys(this.allowedDates).length)return void(this.validAllowedDates=!1);this.hideInput=!0;new Date(Date.UTC(this.allowedDates?.startDate?.slice(0,4),this.allowedDates?.startDate?.slice(5,7)-1,this.allowedDates?.startDate?.slice(8,10)))>new Date(Date.UTC(this.allowedDates?.endDate?.slice(0,4),this.allowedDates?.endDate?.slice(5,7)-1,this.allowedDates?.endDate?.slice(8,10)))?(console.error("StartDate must be greater than endDate"),this.validAllowedDates=!1):this.validAllowedDates=!0}valueChanged(){if("object"==typeof this.value&&null!==this.value&&(this.value=JSON.stringify(this.value)),this.range&&this.value)return this.rangeValue=this.value,void(this.value=null);if(this.value&&!isNaN(this.value.getTime())){const t=this.value.getTimezoneOffset(),i=new Date(this.value.getTime()-60*t*1e3);isNaN(i.getTime())||(this.valueAttribute=i.toISOString().split("T")[0],this.formattedDate=`${String(i.getDate()).padStart(2,"0")}/${String(i.getMonth()+1).padStart(2,"0")}/${i.getFullYear()}`)}}updated(t){if(super.updated(t),t.has("valueAttribute")){const t=new Date(this.valueAttribute||"");if(!isNaN(t.getTime())){const i=t.getTimezoneOffset();this.value=new Date(t.getTime()-60*i*1e3),this.currentMonth=this.value.getMonth(),this.currentYear=this.value.getFullYear()}}}static get observedAttributes(){return["value","range"]}attributeChangedCallback(t,i,e){"value"===t?(this.valueAttribute=e,this.initializeValue()):"range"===t&&(this.range=null!==e)}initializeValue(){if(this.range)try{const t=JSON.parse(this.valueAttribute||"");this.startDate=new Date(t.startDate),this.endDate=new Date(t.endDate),this.startDate=new Date(this.startDate.getTime()),this.endDate=new Date(this.endDate.getTime()),this.rangeValue={startDate:this.startDate,endDate:this.endDate},this.value=null}catch(t){}else if(this.valueAttribute){let t;t=new Date(this.valueAttribute),t=new Date(t.getTime()-6e4*t.getTimezoneOffset()),isNaN(t.getTime())||(this.value=t,this.currentMonth=this.value.getMonth(),this.currentYear=this.value.getFullYear(),this.rangeValue=null)}this.requestUpdate()}connectedCallback(){if(super.connectedCallback(),this.initializeValue(),this.valueAttribute){const t=new Date(this.valueAttribute);isNaN(t.getTime())||(this.value=t,this.currentMonth=this.value.getMonth(),this.currentYear=this.value.getFullYear())}this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}getDaysArray(t,i){const e=new Date(t,i+1,0).getDate();return Array.from({length:e},((t,i)=>i+1))}nextMonth(){11===this.currentMonth?(this.currentMonth=0,this.currentYear++):this.currentMonth++,this.requestUpdate()}prevMonth(){0===this.currentMonth?(this.currentMonth=11,this.currentYear--):this.currentMonth--,this.requestUpdate()}selectDate(t,i,e){const s=new Date(e,i,t);if(this.range)if(this.startDate&&this.endDate&&(this.startDate=null,this.endDate=null),this.isSelectingStart)this.startDate=s,this.endDate&&s>this.endDate&&(this.endDate=null),this.isSelectingStart=!1;else if(this.isSelectingStart=!0,this.startDate&&s<this.startDate)this.startDate=s,this.endDate=null,this.isSelectingStart=!1;else{const t=s;t.setHours(23,59,59,999),this.endDate=t}else this.value=s,this.emit("nile-changed",{value:this.value}),this.dropdown&&this.dropdown.hide();this.requestUpdate()}confimRange(){this.startDate&&this.endDate&&("local"!==this.selectedTimeZone&&(this.startDate=this.convertTZ(this.startDate,this.selectedTimeZone),this.endDate=this.convertTZ(this.endDate,this.selectedTimeZone)),this.emit("nile-changed",{startDate:this.startDate,endDate:this.endDate}),this.dropdown&&this.dropdown.hide(),this.rangeValue={startDate:this.startDate,endDate:this.endDate})}convertTZ(t,i){return new Date(("string"==typeof t?new Date(t):t).toLocaleString("en-US",{timeZone:i}))}isCurrentDate(t,i,e){const s=new Date;return t===s.getDate()&&i+1===s.getMonth()+1&&e===s.getFullYear()}isAllowedDate(t,i,e){if(!this.validAllowedDates)return!0;const s=new Date(Date.UTC(e,i,t)),n=new Date(Date.UTC(this.allowedDates?.startDate?.slice(0,4),this.allowedDates?.startDate?.slice(5,7)-1,this.allowedDates?.startDate?.slice(8,10))),a=new Date(Date.UTC(this.allowedDates?.endDate?.slice(0,4),this.allowedDates?.endDate?.slice(5,7)-1,this.allowedDates?.endDate?.slice(8,10)));a.setUTCHours(23,59,59,999);return s>=n&&s<=a}renderMonth(t,e,s){const n=new Date(t,e,1).getDay(),a=new Date(t,e+1,0).getDay(),h=this.getDaysArray(0===e?t-1:t,0===e?11:e-1),l=this.getDaysArray(11===e?t+1:t,11===e?0:e+1),d=h.slice(h.length-n),r=l.slice(0,6-a),o=[...d,...s,...r],u=(t,i,e,s)=>{if(!s)return"";if(!this.range&&this.value){if(t===this.value.getDate()&&i===this.value.getMonth()&&e===this.value.getFullYear())return"selected-date"}const n=this.startDate&&t===this.startDate.getDate()&&i===this.startDate.getMonth()&&e===this.startDate.getFullYear(),a=this.endDate&&t===this.endDate.getDate()&&i===this.endDate.getMonth()&&e===this.endDate.getFullYear();return n?"range-start":a?"range-end":""},c=(t,i,e,s)=>{if(!s)return!1;if(this.startDate&&this.endDate){const s=new Date(e,i,t);return s>=this.startDate&&s<=this.endDate}return!1};return i`
+import{__decorate as t}from"tslib";import{x as i,A as e}from"../index-0a3007c5.esm.js";import{query as s,state as n,customElement as a}from"lit/decorators.js";import{s as h}from"./nile-calendar.css.esm.js";import{classMap as l}from"lit/directives/class-map.js";import{w as r}from"../internal/watch.esm.js";import{N as d}from"../internal/nile-element.esm.js";import"../nile-popup/nile-popup.esm.js";import{n as o}from"../property-09139d3c.esm.js";import"lit";import"../nile-popup/nile-popup.css.esm.js";let u=class extends d{constructor(){super(...arguments),this.currentMonth=(new Date).getMonth(),this.currentYear=(new Date).getFullYear(),this.dropDownOpened=!1,this.allowedDates={},this.valueAttribute=null,this.formattedDate=null,this.startDate=null,this.endDate=null,this.isSelectingStart=!0,this.range=!1,this.type="absolute",this.selectedTimeZone="local",this.validAllowedDates=!0,this.hideInput=!1,this.hideDurationFields=[],this.hideTimeZone=!1,this.showManualInputs=!1}static get styles(){return[h]}firstUpdated(){const t=this.getAttribute("allowed-dates");if(null!==t)try{this.allowedDates=JSON.parse(t)}catch(t){console.error("Error parsing allowed-dates attribute:",t)}else this.validAllowedDates=!1}checkValidAllowedDate(){if(0==Object.keys(this.allowedDates).length)return void(this.validAllowedDates=!1);this.hideInput=!0;new Date(Date.UTC(this.allowedDates?.startDate?.slice(0,4),this.allowedDates?.startDate?.slice(5,7)-1,this.allowedDates?.startDate?.slice(8,10)))>new Date(Date.UTC(this.allowedDates?.endDate?.slice(0,4),this.allowedDates?.endDate?.slice(5,7)-1,this.allowedDates?.endDate?.slice(8,10)))?(console.error("StartDate must be greater than endDate"),this.validAllowedDates=!1):this.validAllowedDates=!0}valueChanged(){if(this.range&&this.value)return this.rangeValue=this.value,void(this.value=null);if(this.value&&!isNaN(this.value.getTime())){const t=this.value.getTimezoneOffset(),i=new Date(this.value.getTime()-60*t*1e3);isNaN(i.getTime())||(this.valueAttribute=i.toISOString().split("T")[0],this.formattedDate=`${String(i.getDate()).padStart(2,"0")}/${String(i.getMonth()+1).padStart(2,"0")}/${i.getFullYear()}`)}}updated(t){if(super.updated(t),t.has("valueAttribute")){const t=new Date(this.valueAttribute||"");if(!isNaN(t.getTime())){const i=t.getTimezoneOffset();this.value=new Date(t.getTime()-60*i*1e3),this.currentMonth=this.value.getMonth(),this.currentYear=this.value.getFullYear()}}}static get observedAttributes(){return["value","range"]}attributeChangedCallback(t,i,e){"value"===t?(this.valueAttribute=e,this.initializeValue()):"range"===t&&(this.range=null!==e)}initializeValue(){if(this.range)try{const t=JSON.parse(this.valueAttribute||"");this.startDate=new Date(t.startDate),this.endDate=new Date(t.endDate),this.startDate=new Date(this.startDate.getTime()),this.endDate=new Date(this.endDate.getTime()),this.rangeValue={startDate:this.startDate,endDate:this.endDate},this.value=null}catch(t){}else if(this.valueAttribute){let t;t=new Date(this.valueAttribute),t=new Date(t.getTime()-6e4*t.getTimezoneOffset()),isNaN(t.getTime())||(this.value=t,this.currentMonth=this.value.getMonth(),this.currentYear=this.value.getFullYear(),this.rangeValue=null)}this.requestUpdate()}connectedCallback(){if(super.connectedCallback(),this.initializeValue(),this.valueAttribute){const t=new Date(this.valueAttribute);isNaN(t.getTime())||(this.value=t,this.currentMonth=this.value.getMonth(),this.currentYear=this.value.getFullYear())}this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}getDaysArray(t,i){const e=new Date(t,i+1,0).getDate();return Array.from({length:e},((t,i)=>i+1))}nextMonth(){11===this.currentMonth?(this.currentMonth=0,this.currentYear++):this.currentMonth++,this.requestUpdate()}prevMonth(){0===this.currentMonth?(this.currentMonth=11,this.currentYear--):this.currentMonth--,this.requestUpdate()}selectDate(t,i,e){const s=new Date(e,i,t);if(this.range)if(this.startDate&&this.endDate&&(this.startDate=null,this.endDate=null),this.isSelectingStart)this.startDate=s,this.endDate&&s>this.endDate&&(this.endDate=null),this.isSelectingStart=!1;else if(this.isSelectingStart=!0,this.startDate&&s<this.startDate)this.startDate=s,this.endDate=null,this.isSelectingStart=!1;else{const t=s;t.setHours(23,59,59,999),this.endDate=t}else this.value=s,this.emit("nile-changed",{value:this.value}),this.dropdown&&this.dropdown.hide();this.requestUpdate()}confimRange(){this.startDate&&this.endDate&&("local"!==this.selectedTimeZone&&(this.startDate=this.convertTZ(this.startDate,this.selectedTimeZone),this.endDate=this.convertTZ(this.endDate,this.selectedTimeZone)),this.emit("nile-changed",{startDate:this.startDate,endDate:this.endDate}),this.dropdown&&this.dropdown.hide(),this.rangeValue={startDate:this.startDate,endDate:this.endDate})}convertTZ(t,i){return new Date(("string"==typeof t?new Date(t):t).toLocaleString("en-US",{timeZone:i}))}isCurrentDate(t,i,e){const s=new Date;return t===s.getDate()&&i+1===s.getMonth()+1&&e===s.getFullYear()}isAllowedDate(t,i,e){if(!this.validAllowedDates)return!0;const s=new Date(Date.UTC(e,i,t)),n=new Date(Date.UTC(this.allowedDates?.startDate?.slice(0,4),this.allowedDates?.startDate?.slice(5,7)-1,this.allowedDates?.startDate?.slice(8,10))),a=new Date(Date.UTC(this.allowedDates?.endDate?.slice(0,4),this.allowedDates?.endDate?.slice(5,7)-1,this.allowedDates?.endDate?.slice(8,10)));a.setUTCHours(23,59,59,999);return s>=n&&s<=a}renderMonth(t,s,n){const a=new Date(t,s,1).getDay(),h=new Date(t,s+1,0).getDay(),r=this.getDaysArray(0===s?t-1:t,0===s?11:s-1),d=this.getDaysArray(11===s?t+1:t,11===s?0:s+1),o=r.slice(r.length-a),u=d.slice(0,6-h),c=[...o,...n,...u],v=(t,i,e,s)=>{if(!s)return"";if(!this.range&&this.value){if(t===this.value.getDate()&&i===this.value.getMonth()&&e===this.value.getFullYear())return"selected-date"}const n=this.startDate&&t===this.startDate.getDate()&&i===this.startDate.getMonth()&&e===this.startDate.getFullYear(),a=this.endDate&&t===this.endDate.getDate()&&i===this.endDate.getMonth()&&e===this.endDate.getFullYear();return n?"range-start":a?"range-end":""},p=(t,i,e,s)=>{if(!s)return!1;if(this.startDate&&this.endDate){const s=new Date(e,i,t);return s>=this.startDate&&s<=this.endDate}return!1};return i`
       <div class="calendar">
         <div class="calendar-header">
           <nile-icon
@@ -9,7 +9,7 @@ import{__decorate as t}from"tslib";import{x as i}from"../index-0a3007c5.esm.js";
           >
           </nile-icon>
           <span
-            >${new Date(t,e).toLocaleString("default",{month:"long"})}
+            >${new Date(t,s).toLocaleString("default",{month:"long"})}
             ${t}</span
           >
           <nile-icon
@@ -20,39 +20,37 @@ import{__decorate as t}from"tslib";import{x as i}from"../index-0a3007c5.esm.js";
           >
           </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">
-          ${o.map(((n,a)=>{const h=a>=d.length&&a<d.length+s.length;return i` <div
-              class="day
-              ${this.isAllowedDate(n,e,t)?"":"not-allowed"}
-              ${u(n,e,t,h)} ${c(n,e,t,h)} ${c(n,e,t,h)?"in-range":""} ${h?"":"filler"}
-                ${this.isCurrentDate(n,e,t)&&h?"current-date":""}
-                "
-              @click="${()=>{h&&this.selectDate(n,e,t)}}"
+        <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>
+
+          ${c.map(((a,h)=>{const r=h>=o.length&&h<o.length+n.length,d=v(a,s,t,r);"selected-date"==d&&console.log(a);const u={day_date:!0,"not-allowed":!this.isAllowedDate(a,s,t),"in-range":p(a,s,t,r),filler:!r};return d&&(u[d]=!0),i` 
+            <div
+              class=${l(u)}
+              @click="${()=>{r&&this.selectDate(a,s,t)}}"
             >
-              ${n}
+              <span style="position:relative;">
+                ${a}
+                ${this.isCurrentDate(a,s,t)&&r?i`<div class="current__date__dot"></div>`:e}
+              </span>
             </div>`}))}
         </div>
       </div>
     `}formatDate(t){if(!t)return"";return`${String(t.getDate()).padStart(2,"0")}/${String(t.getMonth()+1).padStart(2,"0")}/${t.getFullYear()}`}formatDateRange(t){return t?t.startDate&&t.endDate?`${this.formatDate(t.startDate)} - ${this.formatDate(t.endDate)}`:"":t}handleStartDateInput(t){const i=this.parseDate(t.detail.value);this.isValidDateInput(i)||(this.startDate=null),i&&(!this.endDate||i<=this.endDate)?this.startDate=i:(this.startDate=null,this.endDate=null),this.requestUpdate()}handleEndDateInput(t){const i=this.parseDate(t.detail.value);this.isValidDateInput(i)||(this.endDate=null),i&&(!this.startDate||i>=this.startDate)?this.endDate=i:this.endDate=null,this.requestUpdate()}parseDate(t){const[i,e,s]=t.split("/").map(Number),n=new Date(s,e-1,i);return isNaN(n.getTime())?null:n}isValidDateInput(t){return/^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/\d{4}$/.test(t)}formatTime(t){if(!t)return"";return`${String(t.getHours()).padStart(2,"0")}:${String(t.getMinutes()).padStart(2,"0")}:${String(t.getSeconds()).padStart(2,"0")}`}isValidTimeInput(t){return/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/.test(t)}parseTime(t,i){if(!this.isValidTimeInput(t))return null;const[e,s,n]=t.split(":").map(Number),a=new Date(i.getTime());return a.setHours(e,s,n),a}handleStartTimeInput(t){if(!this.startDate)return void(this.startDate=null);const i=this.parseTime(t.detail.value,this.startDate);i?this.startDate=i:this.startDate.setHours(0,0,0),this.requestUpdate()}handleEndTimeInput(t){if(!this.endDate)return void(this.endDate=null);const i=this.parseTime(t.detail.value,this.endDate);i?this.endDate=i:this.endDate.setHours(0,0,0),this.requestUpdate()}setType(t){this.type=t}createRelativePeriod(t,i){const e=new Date,s=new Date;switch(t){case"minutes":s.setMinutes(s.getMinutes()-i);break;case"hours":s.setHours(s.getHours()-i);break;case"days":s.setDate(s.getDate()-i);break;case"weeks":s.setDate(s.getDate()-7*i);break;case"months":s.setMonth(s.getMonth()-i)}return this.startDate=new Date(s.getTime()),this.endDate=new Date(e.getTime()),this.requestUpdate(),{startDate:this.startDate,endDate:this.endDate}}handleTimeValueClick(t,i,e){this.createRelativePeriod(t,i),this.selectedUnit=t,this.selectedValue=i,this.requestUpdate()}renderTimeValues(t,e){return e.map((e=>i`
           <div
-            class="time-value ${this.selectedUnit===t&&this.selectedValue===e?"time-value--selected":""}"
+            class="duration__value ${this.selectedUnit===t&&this.selectedValue===e?"duration__value--selected":""}"
             @click=${i=>this.handleTimeValueClick(t,e,i)}
           >
             ${e}
           </div>
-        `))}handleDurationChange(t){this.selectedValue=Number(t.detail.value),this.selectedUnit&&this.selectedValue&&this.handleTimeValueClick(this.selectedUnit,this.selectedValue,t)}handleUnitChange(t){this.selectedUnit=t.detail.value,this.selectedUnit&&this.selectedValue&&this.handleTimeValueClick(this.selectedUnit,this.selectedValue,t)}handleTimeZoneChange(t){this.selectedTimeZone=t.detail.value,this.requestUpdate()}onTypeChange(t){this.type=t.detail.value}render(){this.getDaysArray(this.currentYear,this.currentMonth);const t=(this.currentMonth+1)%12,e=11===this.currentMonth?this.currentYear+1:this.currentYear;return this.getDaysArray(e,t),i`
+        `))}handleDurationChange(t){this.selectedValue=Number(t.detail.value),this.selectedUnit&&this.selectedValue&&this.handleTimeValueClick(this.selectedUnit,this.selectedValue,t)}handleUnitChange(t){this.selectedUnit=t.detail.value,this.selectedUnit&&this.selectedValue&&this.handleTimeValueClick(this.selectedUnit,this.selectedValue,t)}handleTimeZoneChange(t){this.selectedTimeZone=t.detail.value,this.requestUpdate()}onTypeChange(t){this.type=t.detail.value}render(){return i`
       <div
-        class="base ${this.range?"base__range":""} ${"relative"===this.type?"base__relative":""}"
+        class=${l({base:!0,base__range:this.range})}
       >
         <div class="calendar-config ${this.range?"":"hidden"}">
           <div class="calendar-switcher">
@@ -63,124 +61,126 @@ import{__decorate as t}from"tslib";import{x as i}from"../index-0a3007c5.esm.js";
           </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>
+        ${"relative"==this.type?this.renderRelativeCalendar():""}
+        ${"absolute"==this.type?this.renderAbsoluteCalendar():""}
 
-        <div
-          class="calendar-wrapper  ${"absolute"!==this.type?"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 class="unit-container ${"relative"!==this.type?"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>
+      </div>
+    `}renderAbsoluteCalendar(){return i`
+    <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?i`
+    <div class="calender-input ${this.showManualInputs?"":"hidden"}" >
+        <div class="from">
+          <!-- ${this.hideInput?"":i`
+            <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&&"relative"===this.type?i`
-          <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?"":i`
+          <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>
+    `:""}
+    `}renderRelativeCalendar(){return i`
+    <div class="units-wrapper">
+      <div class="unit-container">
+        ${this.hideDurationFields?.includes("minutes")?"":i`
+        <div class="duration-name">Minutes</div>
+        <div class="duration-units">
+          ${this.renderTimeValues("minutes",[1,5,15,30,45])}
         </div>
-        `:""}
-        ${this.range&&"absolute"===this.type?i`
-          <div class="calender-input ${this.showManualInputs?"":"hidden"}" >
-            <div>
-                  <span class="manual-input-label">From </span>
-                  <div class="from">
-                    <!-- ${this.hideInput?i``:i`<nile-input class="manual-input" value="${this.formatDate(this.startDate)}" placeholder="DD/MM/YYYY" @nile-change="${this.handleStartDateInput}">
-                      </nile-input>`} -->
-
-                        <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?i``:i`<nile-input class="manual-input" value="${this.formatDate(this.endDate)}" placeholder="DD/MM/YYYY" @nile-change="${this.handleEndDateInput}"></nile-input>`} -->
-
-                      <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("hours")?"":i`
+        <div class="duration-name">Hours</div>
+        <div class="duration-units">
+          ${this.renderTimeValues("hours",[1,2,3,6,8,12])}
         </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("days")?"":i`
+        <div class="duration-name">Days</div>
+        <div class="duration-units">
+          ${this.renderTimeValues("days",[1,2,3,4,5,6])}
+        </div>
+        `}
+        
+        ${this.hideDurationFields?.includes("weeks")?"":i`
+        <div class="duration-name">Weeks</div>
+        <div class="duration-units">
+          ${this.renderTimeValues("weeks",[1,2,4,6])}
+        </div>
+        `}
+        
+        ${this.hideDurationFields?.includes("months")?"":i`
+        <div class="duration-name">Months</div>
+        <div class="duration-units">
+          ${this.renderTimeValues("months",[3,6,12,15])}
         </div>
-        `:""}
+        `}
+      </div>
+    </div>
+    
+    ${this.range?i`
+    <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>
-    `}};t([e("nile-dropdown")],r.prototype,"dropdown",void 0),t([d({type:Boolean,reflect:!0})],r.prototype,"dropDownOpened",void 0),t([d({type:Object})],r.prototype,"value",void 0),t([d({type:Object,attribute:"allowed-dates"})],r.prototype,"allowedDates",void 0),t([d({type:Object})],r.prototype,"rangeValue",void 0),t([d({type:String,attribute:"value"})],r.prototype,"valueAttribute",void 0),t([d({type:String,attribute:"value"})],r.prototype,"formattedDate",void 0),t([d({type:Object})],r.prototype,"startDate",void 0),t([d({type:Object})],r.prototype,"endDate",void 0),t([d({type:Boolean})],r.prototype,"isSelectingStart",void 0),t([d({type:Boolean})],r.prototype,"range",void 0),t([d({type:String})],r.prototype,"type",void 0),t([d({type:String})],r.prototype,"selectedUnit",void 0),t([d({type:Number})],r.prototype,"selectedValue",void 0),t([d({type:String})],r.prototype,"selectedTimeZone",void 0),t([s()],r.prototype,"validAllowedDates",void 0),t([h("allowedDates")],r.prototype,"checkValidAllowedDate",null),t([s()],r.prototype,"hideInput",void 0),t([d({type:Array,attribute:"hide-duration-fields"})],r.prototype,"hideDurationFields",void 0),t([d({type:Boolean,attribute:"hide-time-zone"})],r.prototype,"hideTimeZone",void 0),t([d({type:Boolean,attribute:"show-manual-inputs",reflect:!0})],r.prototype,"showManualInputs",void 0),t([h("value")],r.prototype,"valueChanged",null),r=t([n("nile-calendar")],r);export{r as N};
+    </div>
+    `:""}
+    `}};t([s("nile-dropdown")],u.prototype,"dropdown",void 0),t([o({type:Boolean,reflect:!0})],u.prototype,"dropDownOpened",void 0),t([o({type:Object})],u.prototype,"value",void 0),t([o({type:Object,attribute:"allowed-dates"})],u.prototype,"allowedDates",void 0),t([o({type:Object})],u.prototype,"rangeValue",void 0),t([o({type:String,attribute:"value"})],u.prototype,"valueAttribute",void 0),t([o({type:String,attribute:"value"})],u.prototype,"formattedDate",void 0),t([o({type:Object})],u.prototype,"startDate",void 0),t([o({type:Object})],u.prototype,"endDate",void 0),t([o({type:Boolean})],u.prototype,"isSelectingStart",void 0),t([o({type:Boolean})],u.prototype,"range",void 0),t([o({type:String})],u.prototype,"type",void 0),t([o({type:String})],u.prototype,"selectedUnit",void 0),t([o({type:Number})],u.prototype,"selectedValue",void 0),t([o({type:String})],u.prototype,"selectedTimeZone",void 0),t([n()],u.prototype,"validAllowedDates",void 0),t([r("allowedDates")],u.prototype,"checkValidAllowedDate",null),t([n()],u.prototype,"hideInput",void 0),t([o({type:Array,attribute:"hide-duration-fields"})],u.prototype,"hideDurationFields",void 0),t([o({type:Boolean,attribute:"hide-time-zone"})],u.prototype,"hideTimeZone",void 0),t([o({type:Boolean,attribute:"show-manual-inputs",reflect:!0})],u.prototype,"showManualInputs",void 0),t([r("value")],u.prototype,"valueChanged",null),u=t([a("nile-calendar")],u);export{u as N};

package/dist/nile-card/nile-card.test.cjs.js

@@ -0,0 +1,2 @@
+function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["../fixture-1a9fb5f1.cjs.js","lit/static-html.js","lit/html.js","lit/directive-helpers.js","lit","lit/directives/unsafe-html.js","./nile-card.cjs.js","tslib","../index-c7ad3b47.cjs.js","lit/decorators.js","./nile-card.css.cjs.js","lit/directives/class-map.js","../internal/slot.cjs.js","../internal/nile-element.cjs.js"],function(_export,_context){"use strict";var e,s,i,_templateObject,_templateObject2,_templateObject3;function _regeneratorRuntime(){"use strict";/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */_regeneratorRuntime=function _regeneratorRuntime(){return e;};var t,e={},r=Object.prototype,n=r.hasOwnProperty,o=Object.defineProperty||function(t,e,r){t[e]=r.value;},i="function"==typeof Symbol?Symbol:{},a=i.iterator||"@@iterator",c=i.asyncIterator||"@@asyncIterator",u=i.toStringTag||"@@toStringTag";function define(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e];}try{define({},"");}catch(t){define=function define(t,e,r){return t[e]=r;};}function wrap(t,e,r,n){var i=e&&e.prototype instanceof Generator?e:Generator,a=Object.create(i.prototype),c=new Context(n||[]);return o(a,"_invoke",{value:makeInvokeMethod(t,r,c)}),a;}function tryCatch(t,e,r){try{return{type:"normal",arg:t.call(e,r)};}catch(t){return{type:"throw",arg:t};}}e.wrap=wrap;var h="suspendedStart",l="suspendedYield",f="executing",s="completed",y={};function Generator(){}function GeneratorFunction(){}function GeneratorFunctionPrototype(){}var p={};define(p,a,function(){return this;});var d=Object.getPrototypeOf,v=d&&d(d(values([])));v&&v!==r&&n.call(v,a)&&(p=v);var g=GeneratorFunctionPrototype.prototype=Generator.prototype=Object.create(p);function defineIteratorMethods(t){["next","throw","return"].forEach(function(e){define(t,e,function(t){return this._invoke(e,t);});});}function AsyncIterator(t,e){function invoke(r,o,i,a){var c=tryCatch(t[r],t,o);if("throw"!==c.type){var u=c.arg,h=u.value;return h&&"object"==_typeof(h)&&n.call(h,"__await")?e.resolve(h.__await).then(function(t){invoke("next",t,i,a);},function(t){invoke("throw",t,i,a);}):e.resolve(h).then(function(t){u.value=t,i(u);},function(t){return invoke("throw",t,i,a);});}a(c.arg);}var r;o(this,"_invoke",{value:function value(t,n){function callInvokeWithMethodAndArg(){return new e(function(e,r){invoke(t,n,e,r);});}return r=r?r.then(callInvokeWithMethodAndArg,callInvokeWithMethodAndArg):callInvokeWithMethodAndArg();}});}function makeInvokeMethod(e,r,n){var o=h;return function(i,a){if(o===f)throw Error("Generator is already running");if(o===s){if("throw"===i)throw a;return{value:t,done:!0};}for(n.method=i,n.arg=a;;){var c=n.delegate;if(c){var u=maybeInvokeDelegate(c,n);if(u){if(u===y)continue;return u;}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(o===h)throw o=s,n.arg;n.dispatchException(n.arg);}else"return"===n.method&&n.abrupt("return",n.arg);o=f;var p=tryCatch(e,r,n);if("normal"===p.type){if(o=n.done?s:l,p.arg===y)continue;return{value:p.arg,done:n.done};}"throw"===p.type&&(o=s,n.method="throw",n.arg=p.arg);}};}function maybeInvokeDelegate(e,r){var n=r.method,o=e.iterator[n];if(o===t)return r.delegate=null,"throw"===n&&e.iterator["return"]&&(r.method="return",r.arg=t,maybeInvokeDelegate(e,r),"throw"===r.method)||"return"!==n&&(r.method="throw",r.arg=new TypeError("The iterator does not provide a '"+n+"' method")),y;var i=tryCatch(o,e.iterator,r.arg);if("throw"===i.type)return r.method="throw",r.arg=i.arg,r.delegate=null,y;var a=i.arg;return a?a.done?(r[e.resultName]=a.value,r.next=e.nextLoc,"return"!==r.method&&(r.method="next",r.arg=t),r.delegate=null,y):a:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,y);}function pushTryEntry(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e);}function resetTryEntry(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e;}function Context(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(pushTryEntry,this),this.reset(!0);}function values(e){if(e||""===e){var r=e[a];if(r)return r.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var o=-1,i=function next(){for(;++o<e.length;)if(n.call(e,o))return next.value=e[o],next.done=!1,next;return next.value=t,next.done=!0,next;};return i.next=i;}}throw new TypeError(_typeof(e)+" is not iterable");}return GeneratorFunction.prototype=GeneratorFunctionPrototype,o(g,"constructor",{value:GeneratorFunctionPrototype,configurable:!0}),o(GeneratorFunctionPrototype,"constructor",{value:GeneratorFunction,configurable:!0}),GeneratorFunction.displayName=define(GeneratorFunctionPrototype,u,"GeneratorFunction"),e.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===GeneratorFunction||"GeneratorFunction"===(e.displayName||e.name));},e.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,GeneratorFunctionPrototype):(t.__proto__=GeneratorFunctionPrototype,define(t,u,"GeneratorFunction")),t.prototype=Object.create(g),t;},e.awrap=function(t){return{__await:t};},defineIteratorMethods(AsyncIterator.prototype),define(AsyncIterator.prototype,c,function(){return this;}),e.AsyncIterator=AsyncIterator,e.async=function(t,r,n,o,i){void 0===i&&(i=Promise);var a=new AsyncIterator(wrap(t,r,n,o),i);return e.isGeneratorFunction(r)?a:a.next().then(function(t){return t.done?t.value:a.next();});},defineIteratorMethods(g),define(g,u,"Generator"),define(g,a,function(){return this;}),define(g,"toString",function(){return"[object Generator]";}),e.keys=function(t){var e=Object(t),r=[];for(var n in e)r.push(n);return r.reverse(),function next(){for(;r.length;){var t=r.pop();if(t in e)return next.value=t,next.done=!1,next;}return next.done=!0,next;};},e.values=values,Context.prototype={constructor:Context,reset:function reset(e){if(this.prev=0,this.next=0,this.sent=this._sent=t,this.done=!1,this.delegate=null,this.method="next",this.arg=t,this.tryEntries.forEach(resetTryEntry),!e)for(var r in this)"t"===r.charAt(0)&&n.call(this,r)&&!isNaN(+r.slice(1))&&(this[r]=t);},stop:function stop(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval;},dispatchException:function dispatchException(e){if(this.done)throw e;var r=this;function handle(n,o){return a.type="throw",a.arg=e,r.next=n,o&&(r.method="next",r.arg=t),!!o;}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],a=i.completion;if("root"===i.tryLoc)return handle("end");if(i.tryLoc<=this.prev){var c=n.call(i,"catchLoc"),u=n.call(i,"finallyLoc");if(c&&u){if(this.prev<i.catchLoc)return handle(i.catchLoc,!0);if(this.prev<i.finallyLoc)return handle(i.finallyLoc);}else if(c){if(this.prev<i.catchLoc)return handle(i.catchLoc,!0);}else{if(!u)throw Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return handle(i.finallyLoc);}}}},abrupt:function abrupt(t,e){for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break;}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,y):this.complete(a);},complete:function complete(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),y;},finish:function finish(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),resetTryEntry(r),y;}},"catch":function _catch(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;resetTryEntry(r);}return o;}}throw Error("illegal catch attempt");},delegateYield:function delegateYield(e,r,n){return this.delegate={iterator:values(e),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=t),y;}},e;}function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}return{setters:[function(_fixture004CjsJs){e=_fixture004CjsJs.f;s=_fixture004CjsJs.a;},function(_litStaticHtmlJs){i=_litStaticHtmlJs.html;},function(_litHtmlJs){},function(_litDirectiveHelpersJs){},function(_lit){},function(_litDirectivesUnsafeHtmlJs){},function(_nileCardCjsJs){},function(_tslib){},function(_index001CjsJs){},function(_litDecoratorsJs){},function(_nileCardCssCjsJs){},function(_litDirectivesClassMapJs){},function(_internalSlotCjsJs){},function(_internalNileElementCjsJs){}],execute:function execute(){describe("Nile Card",function(){it("should render the card properly",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(){var a;return _regeneratorRuntime().wrap(function _callee$(_context2){while(1)switch(_context2.prev=_context2.next){case 0:_context2.next=2;return e(i(_templateObject||(_templateObject=_taggedTemplateLiteral(["<nile-card>\n      <div style=\"display: flex;\">\n        <img\n          class=\"alert-prefix-img\"\n          src=\"https://assets.aqueralabs.com/logos/aws.png\"\n        />\n        <nile-icon name=\"drag\" class=\"drag-icon\"> </nile-icon>\n      </div>\n      <div class=\"amazon-service\">\n        Amazon web service Scalable Cloud Infrastructure\n      </div>\n      <div class=\"service-description\">Build, Deploy, and Manage Websites</div>\n      <div slot=\"footer\" class=\"footer-link\">\n        https://api.aquera.io/scim/5efdcsd\n      </div>\n    </nile-card>"]))));case 2:a=_context2.sent;s(a).shadowDom.to.equalSnapshot();case 4:case"end":return _context2.stop();}},_callee);}))),it("should not render the card footer ,  if footer is not there",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(){var a;return _regeneratorRuntime().wrap(function _callee2$(_context3){while(1)switch(_context3.prev=_context3.next){case 0:_context3.next=2;return e(i(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["<nile-card>\n      <div style=\"display: flex;\">\n        <img\n          class=\"alert-prefix-img\"\n          src=\"https://assets.aqueralabs.com/logos/aws.png\"\n        />\n        <nile-icon name=\"drag\" class=\"drag-icon\"> </nile-icon>\n      </div>\n      <div class=\"amazon-service\">\n        Amazon web service Scalable Cloud Infrastructure\n      </div>\n      <div class=\"service-description\">Build, Deploy, and Manage Websites</div>\n    </nile-card>"]))));case 2:a=_context3.sent.shadowRoot.querySelector('div[part="footer"]');s(a).to["null"];case 4:case"end":return _context3.stop();}},_callee2);}))),it("should  render the card header ,  if header is there",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3(){var a;return _regeneratorRuntime().wrap(function _callee3$(_context4){while(1)switch(_context4.prev=_context4.next){case 0:_context4.next=2;return e(i(_templateObject3||(_templateObject3=_taggedTemplateLiteral([" <nile-card>\n      <div class=\"card-header\" slot=\"header\">\n        <img\n          class=\"alert-prefix-img\"\n          src=\"https://assets.aqueralabs.com/logos/aws.png\"\n          height=\"32\"\n          width=\"32\"\n        />\n        <div class=\"card-header-text\">\n          <span class=\"card-header-text-heading\">Title</span>\n          <span class=\"card-header-text-subheading\">Support Text</span>\n        </div>\n        <nile-slide-toggle></nile-slide-toggle>\n        <nile-icon name=\"dropdown\" class=\"drag-icon\" size=\"20\"> </nile-icon>\n      </div>\n      <div class=\"card-body\">You can use this space as description fo...</div>\n      <div slot=\"footer\" class=\"footer-link\">\n        <nile-avatar name=\"Aquera Labs\" isRounded></nile-avatar>\n        <span class=\"right-side\">\n          <nile-icon name=\"calendar\"></nile-icon>\n          Hello\n        </span>\n      </div>\n    </nile-card>"]))));case 2:a=_context4.sent.shadowRoot.querySelector('slot[name="header"]');s(a).to.exist;case 4:case"end":return _context4.stop();}},_callee3);})));});}};});
+//# sourceMappingURL=nile-card.test.cjs.js.map

package/dist/nile-card/nile-card.test.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-card.test.cjs.js","sources":["../../../src/nile-card/nile-card.test.ts"],"sourcesContent":["import { fixture, html, expect, oneEvent } from '@open-wc/testing';\nimport './nile-card';\nimport { NileCard } from './nile-card';\n\ndescribe('Nile Card', () => {\n  it('should render the card properly', async () => {\n    const el = await fixture<NileCard>(html`<nile-card>\n      <div style=\"display: flex;\">\n        <img\n          class=\"alert-prefix-img\"\n          src=\"https://assets.aqueralabs.com/logos/aws.png\"\n        />\n        <nile-icon name=\"drag\" class=\"drag-icon\"> </nile-icon>\n      </div>\n      <div class=\"amazon-service\">\n        Amazon web service Scalable Cloud Infrastructure\n      </div>\n      <div class=\"service-description\">Build, Deploy, and Manage Websites</div>\n      <div slot=\"footer\" class=\"footer-link\">\n        https://api.aquera.io/scim/5efdcsd\n      </div>\n    </nile-card>`);\n    expect(el).shadowDom.to.equalSnapshot();\n  });\n\n  it('should not render the card footer ,  if footer is not there', async () => {\n    const el = await fixture<NileCard>(html`<nile-card>\n      <div style=\"display: flex;\">\n        <img\n          class=\"alert-prefix-img\"\n          src=\"https://assets.aqueralabs.com/logos/aws.png\"\n        />\n        <nile-icon name=\"drag\" class=\"drag-icon\"> </nile-icon>\n      </div>\n      <div class=\"amazon-service\">\n        Amazon web service Scalable Cloud Infrastructure\n      </div>\n      <div class=\"service-description\">Build, Deploy, and Manage Websites</div>\n    </nile-card>`);\n\n    const footerDiv = el.shadowRoot!.querySelector('div[part=\"footer\"]');\n    expect(footerDiv).to.null;\n  });\n\n  it('should  render the card header ,  if header is there', async () => {\n    const el = await fixture<NileCard>(html` <nile-card>\n      <div class=\"card-header\" slot=\"header\">\n        <img\n          class=\"alert-prefix-img\"\n          src=\"https://assets.aqueralabs.com/logos/aws.png\"\n          height=\"32\"\n          width=\"32\"\n        />\n        <div class=\"card-header-text\">\n          <span class=\"card-header-text-heading\">Title</span>\n          <span class=\"card-header-text-subheading\">Support Text</span>\n        </div>\n        <nile-slide-toggle></nile-slide-toggle>\n        <nile-icon name=\"dropdown\" class=\"drag-icon\" size=\"20\"> </nile-icon>\n      </div>\n      <div class=\"card-body\">You can use this space as description fo...</div>\n      <div slot=\"footer\" class=\"footer-link\">\n        <nile-avatar name=\"Aquera Labs\" isRounded></nile-avatar>\n        <span class=\"right-side\">\n          <nile-icon name=\"calendar\"></nile-icon>\n          Hello\n        </span>\n      </div>\n    </nile-card>`);\n\n    const headerDiv = el.shadowRoot!.querySelector('slot[name=\"header\"]');\n    expect(headerDiv).to.exist;\n  });\n});\n"],"names":["describe","it","_asyncToGenerator","_regeneratorRuntime","mark","async","fixture","html","_templateObject","_taggedTemplateLiteral","el","expect","shadowDom","to","equalSnapshot","_context2","stop","_callee","_templateObject2","shadowRoot","footerDiv","querySelector","null","_context3","_callee2","_templateObject3","headerDiv","exist","_context4","_callee3"],"mappings":"mhTAIAA,QAAAA,CAAS,WAAa,CAAA,UAAA,CACpBC,EAAG,CAAA,iCAAA,cAAAC,iBAAA,cAAAC,mBAAA,GAAAC,IAAA,CAAmCC,SAAAA,QAAAA,MAAAA,CAAAA,QAAAA,mBAAAA,GAAAA,IAAAA,UAAAA,SAAAA,SAAAA,iBAAAA,SAAAA,CAAAA,IAAAA,CAAAA,SAAAA,CAAAA,IAAAA,SAAAA,SAAAA,CAAAA,IAAAA,SACnBC,CAAAA,CAAAA,CAAkBC,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,mlBAAjCC,CAAWJ,CAAAA,SAAAA,CAAAA,IAAAA,CAgBjBK,CAAOD,CAAAA,CAAAA,CAAAA,CAAIE,SAAUC,CAAAA,EAAAA,CAAGC,aAAe,CAAA,CAAA,yBAAAC,SAAA,CAAAC,IAAA,MAAAC,OAAA,GAAA,EAAA,CAAA,CAGzChB,EAAG,CAAA,6DAAA,cAAAC,iBAAA,cAAAC,mBAAA,GAAAC,IAAA,CAA+DC,SAAAA,SAAAA,MAAAA,CAAAA,QAAAA,mBAAAA,GAAAA,IAAAA,UAAAA,UAAAA,SAAAA,iBAAAA,SAAAA,CAAAA,IAAAA,CAAAA,SAAAA,CAAAA,IAAAA,SAAAA,SAAAA,CAAAA,IAAAA,SAC/CC,CAAAA,CAAAA,CAAkBC,CAAI,CAAAW,gBAAA,GAAAA,gBAAA,CAAAT,sBAAA,6dAclBU,CAAAA,QAAfC,CAdWd,CAAAA,SAAAA,CAAAA,IAAAA,CAcIa,UAAAA,CAAYE,aAAc,CAAA,oBAAA,EAC/CV,CAAOS,CAAAA,CAAAA,CAAAA,CAAWP,EAAGS,QAAI,yBAAAC,SAAA,CAAAP,IAAA,MAAAQ,QAAA,GAG3BvB,EAAAA,CAAAA,CAAAA,EAAAA,CAAG,sDAAwDI,cAAAA,iBAAAA,cAAAA,mBAAAA,GAAAA,IAAAA,CAAAA,SAAAA,SAAAA,MAAAA,CAAAA,QAAAA,mBAAAA,GAAAA,IAAAA,UAAAA,UAAAA,SAAAA,iBAAAA,SAAAA,CAAAA,IAAAA,CAAAA,SAAAA,CAAAA,IAAAA,SAAAA,SAAAA,CAAAA,IAAAA,SACxCC,CAAAA,EAAkBC,CAAI,CAAAkB,gBAAA,GAAAA,gBAAA,CAAAhB,sBAAA,q7BAyBlBU,CAAAA,QAAfO,CAAAA,CAAAA,SAAAA,CAAAA,IAAAA,CAAeP,UAAAA,CAAYE,cAAc,qBAC/CV,EAAAA,CAAAA,CAAOe,CAAWb,CAAAA,CAAAA,EAAAA,CAAGc,KAAK,yBAAAC,SAAA,CAAAZ,IAAA,MAAAa,QAAA,GAC1B,EAAA,CAAA,EAAA,CAAA,CAAA"}

package/dist/nile-card/nile-card.test.esm.js

@@ -0,0 +1,51 @@
+import{f as e,a as s}from"../fixture-81e5a936.esm.js";import{html as i}from"lit/static-html.js";import"lit/html.js";import"lit/directive-helpers.js";import"lit";import"lit/directives/unsafe-html.js";import"./nile-card.esm.js";import"tslib";import"../index-0a3007c5.esm.js";import"lit/decorators.js";import"./nile-card.css.esm.js";import"lit/directives/class-map.js";import"../internal/slot.esm.js";import"../internal/nile-element.esm.js";describe("Nile Card",(()=>{it("should render the card properly",(async()=>{const a=await e(i`<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>`);s(a).shadowDom.to.equalSnapshot()})),it("should not render the card footer ,  if footer is not there",(async()=>{const a=(await e(i`<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>`)).shadowRoot.querySelector('div[part="footer"]');s(a).to.null})),it("should  render the card header ,  if header is there",(async()=>{const a=(await e(i` <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>`)).shadowRoot.querySelector('slot[name="header"]');s(a).to.exist}))}));