@aquera/nile-elements 0.1.57-beta-1.7 → 0.1.57-beta-1.9

package/dist/nile-calendar/nile-calendar.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-calendar.css.cjs.js","sources":["../../../src/nile-calendar/nile-calendar.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * DatePicker CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .base {\n    background-color: white;\n    border-radius: 8px;\n  width: 288px;\n    box-shadow: 0px 8px 8px -4px var(--nile-colors-neutral-400);\n    box-shadow: 0px 20px 24px -4px var(--nile-colors-dark-100);\n  }\n\n  .calendar-container {\n    font-family: var(--nile-font-family-serif);\n    width: 100%;\n    height: auto;\n    text-align: center;\n    background: white;\n    border-radius: 8px;\n  }\n\n  .calendar-wrapper {\n    background: white;\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n    border-radius: 8px;\n  }\n\n  .calendar-header {\n    display: flex;\n    justify-content: space-between;\n    padding: 10px;\n    padding: 22px 20px;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  .calendar-header__month-navigation {\n    cursor: pointer;\n  }\n\n  /* Date CSS_START */\n\n  .days_container {\n\t\tdisplay: grid;\n    padding: 0 12px 12px 12px;\n\t\tgrid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n\t\tgrid-row-gap: var(--nile-spacing-spacing-xs, 3px);\n  }\n\n  .day_date ,.day_name{\n\t\tfont-family: var( --nile-font-family-serif);\n\t\tfont-style: normal;\n\t\tfont-size: 12px;\n\t\tline-height: 20px;\n\t\ttext-align: center;\n\n\t\t/* width: 40px;\n\t\theight: 30px; */\n\t\tpadding: 5px 8px;\n\t\tdisplay:grid;\n\t\tplace-items:center;\n  }\n\n  .day_name{\n    font-weight:500;\n    font-family: var(--nile-font-family-serif-colfax-medium);\n  }\n\n  .day_date{\n    font-weight:400;\n    user-select:none;\n  }\n\n\t.current__date__dot{\n\t\tbackground-color:var(--nile-colors-primary-600);\n\t\tposition:absolute;\n\t\tborder-radius:50%;\n\t\theight:5px;\n\t\twidth:5px;\n\t\tleft:25%;\n\t\ttop:90%;\n\t}\n\n  .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot{\n\t\tbackground-color:var(--nile-colors-primary-600);\n  }\n\n\n  .day_date:hover {\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .filler {\n    color: var(--nile-colors-dark-500);\n    pointer-events: none;\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: 4px;\n    background: var(--nile-colors-blue-400);\n  }\n\n  .selected-date:hover {\n    background: var(--nile-colors-primary-600);\n  }\n\n  .selected-date,\n  .range-start,\n  .range-end {\n    border-radius: 4px;\n    background: var(--nile-colors-blue-400);\n    color: var(--nile-colors-dark-900);\n    font-family: var(--nile-font-family-serif-colfax-medium);\n  }\n\n  .selected-date:hover,\n  .range-start:hover,\n  .range-end:hover,\n  .day_date.in-range:hover {\n    background: var(--nile-colors-blue-500);\n  }\n\n  .range-start.in-range {\n    background: var(--nile-colors-blue-400);\n    border-radius: 4px 0 0 4px;\n    color: var(--nile-colors-dark-900);\n    font-family: var(--nile-font-family-serif-colfax-medium);\n  }\n\n  .range-end {\n    background: var(--nile-colors-blue-400);\n    border-radius: 0 4px 4px 0;\n    color: var(--nile-colors-dark-900);\n    font-size: 12px;\n    font-weight: 500;\n    letter-spacing: 0.2px;\n    font-family: var(--nile-font-family-serif-colfax-medium);\n  }\n\n  .range-middle {\n    background: var(--nile-colors-primary-600);\n    color: white;\n    border-radius: 0;\n  }\n\n  .day_date.selected {\n    background: var(--nile-colors-primary-600);\n    color: white;\n    border-radius: 4px;\n  }\n\n  .day_date.in-range:not(.range-start,.range-end, .selected-date) {\n    background: var(--nile-colors-neutral-100);\n  }\n\n  .selected-date {\n    border-radius: 4px;\n    background: var(--nile-colors-blue-400);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .not-allowed{\n    color: var(--nile-colors-dark-500);\n    pointer-events: none;\n  }\n\n  /* Date CSS_END */\n\n  .calender-input {\n    box-sizing:border-box;\n    padding: 0 16px;\n    width:100%;\n    justify-content: space-between;\n    display: flex;\n    gap:8px;\n    flex-wrap: wrap;\n  }\n\n  .from {\n    display: flex;\n    justify-content: space-between;\n    gap: 8px;\n    width: auto;\n  }\n\n  .manual-input-label {\n    color: var(--nile-colors-dark-500);\n    font-family: Colfax-regular;\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  }\n\n  .button-container {\n    width: 100%;\n    display:flex;\n    justify-content: end;\n    gap:10px;\n    padding: 12px 16px 16px 16px;\n    box-sizing: border-box;\n  }\n\n  .calendar-config {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .calendar-switcher {\n    width: 100%;\n    margin-top: 12px;\n  }\n\n  nile-tab::part(base){\n\npadding-bottom: 12px;\njustify-content: center;\n}\n\n  .units-wrapper{\n    width:min-content;\n    margin:auto;\n  }\n\n  .unit-container{\n display: flex;\n  flex-direction: column;\n  gap: 24px;\n  }\n \n \n\n\n\n\n\n  .duration-name{\n    display:flex;\n    align-items:center;\n    font-family:  var( --nile-font-family-serif);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 20px; \n  }\n  \n  .duration-units{\n    display:flex;\n    font-family:  var( --nile-font-family-serif);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    gap: 6px;\n  }\n\n  .duration__value{\n    display: grid;\n    place-items:center;\n    width: 34px;\n    height: 34px;\n    cursor: pointer;\n    border-radius: 4px;\n    border: 1px solid var(--nile-colors-neutral-500);\n  }\n\n  .duration__value:hover{\n    background: var(--nile-colors-neutral-400);\n  }\n\n  .duration__value--selected{\n    background-color:var(--nile-colors-blue-400);\n    color: black;\n    font-weight: 500;\n    border: 1px solid transparent;\n    font-family: var(--nile-font-family-serif-colfax-medium);\n  }\n\n  .duration__value--selected:hover{\n    background:var(--nile-colors-blue-500);\n    font-weight: 500;\n    font-family: var(--nile-font-family-serif-colfax-medium);\n  }\n\n  nile-input::part(input)::-webkit-inner-spin-button,\n  nile-input::part(input)::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n  }\n\n  .hidden {\n    display: none !important;\n  }\n\n  .unit-input-container {\n    display: flex;\n    justify-content: space-between;\n    gap: 8px;\n    padding: 0 16px;\n    padding-top: 16px;\n  }\n\n  .duration-input,.time-input,.manual-input {\n    width: 125px;\n  }\n\n\nnile-dropdown[open] > span[slot=\"trigger\"] .calendar-header__caret {\n  transform: rotate(180deg);\n}\n\n\n.calendar-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 14px;\n  letter-spacing: 0.2px;\n  font-feature-settings: 'liga' off, 'clig' off;\n}\n\n.calendar-header__center {\n  display: flex;\n  align-items: center;\n  gap: 6px; \n}\n\n.calendar-header__trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 1;\n  background: transparent;\n  color: var(--nile-colors-dark-900);\n}\n\n.calendar-header__caret {\n  width: 1em;\n  height: 1em;\n  transition: transform 0.2s ease;\n  transform-origin: center;\n}\n\n .calendar-menu {\n  max-height: 194px;\n  overflow-y: auto;\n  width: 66px;\n  background: red;\n }\n\n \n\n .month-scroll-wrapper {\n    max-height: 196px;\n    overflow-y: auto;\n    width: 62px;\n    overflow-x: hidden;\n  }\n\n  .month-dropdown nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n\n  .year-scroll-wrapper {\n    max-height: 196px;\n    overflow-y: auto;\n    width: 65px;\n    overflow-x: hidden;\n  }\n\n  .year-dropdown nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .month-dropdown nile-menu-item::part(base) {\n    padding: 0px 12px;\n   }\n   .year-dropdown nile-menu-item::part(base) {\n    padding: 0px 12px;\n   }\nnile-menu-item[selected]{\n  background: var(--nile-colors-primary-100);\n}\n\nnile-menu-item[selected]::part(base):hover {\n  background: var(--nile-colors-primary-100);\n  border-radius: 0px;\n}\n\n\nnile-icon[disabled] {\n  opacity: 0.4;\n  pointer-events: none;\n}\n\n.units-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n  padding: 16px;\n  width: auto;\n}\n\n \n  \n.duration-name {\n  font-weight: 600;\n  font-size: 16px;\n  margin-bottom: 8px;\n}\n \n\n   \n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-calendar.css.cjs.js","sources":["../../../src/nile-calendar/nile-calendar.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * DatePicker CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .base {\n    background-color: white;\n    border-radius: 8px;\n    width: 300px;\n    box-shadow: 0px 8px 8px -4px var(--nile-colors-neutral-400);\n    box-shadow: 0px 20px 24px -4px var(--nile-colors-dark-100);\n  }\n\n  .calendar-container {\n    font-family: var(--nile-font-family-serif);\n    width: 100%;\n    height: auto;\n    text-align: center;\n    background: white;\n    border-radius: 8px;\n  }\n\n  .calendar-wrapper {\n    background: white;\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n    border-radius: 8px;\n  }\n\n  .calendar-header {\n    display: flex;\n    justify-content: space-between;\n    padding: 10px;\n    padding: 22px 20px;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  .calendar-header__month-navigation {\n    cursor: pointer;\n  }\n\n  /* Date CSS_START */\n\n  .days_container {\n\t\tdisplay: grid;\n    padding: 0 12px 12px 12px;\n\t\tgrid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n\t\tgrid-row-gap: var(--nile-spacing-spacing-xs, 3px);\n  }\n\n  .day_date ,.day_name{\n\t\tfont-family: var( --nile-font-family-serif);\n\t\tfont-style: normal;\n\t\tfont-size: 14px;\n\t\tline-height: 20px;\n\t\ttext-align: center;\n\n\t\t/* width: 40px;\n\t\theight: 30px; */\n\t\tpadding: 5px 8px;\n\t\tdisplay:grid;\n\t\tplace-items:center;\n  }\n\n  .day_name{\n    font-weight:500;\n  }\n\n  .day_date{\n    font-weight:400;\n    user-select:none;\n  }\n\n\t.current__date__dot{\n\t\tbackground-color:white;\n\t\tposition:absolute;\n\t\tborder-radius:50%;\n\t\theight:5px;\n\t\twidth:5px;\n\t\tleft:25%;\n\t\ttop:90%;\n\t}\n\n  .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot{\n\t\tbackground-color:var(--nile-colors-primary-600);\n  }\n\n\n  .day_date:hover {\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .filler {\n    color: var(--nile-colors-dark-500);\n    pointer-events: none;\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: 4px;\n    background: var(--nile-colors-primary-600);\n  }\n\n  .selected-date:hover {\n    background: var(--nile-colors-primary-600);\n  }\n\n  .selected-date,\n  .range-start,\n  .range-end {\n    border-radius: 4px;\n    background: var(--nile-colors-primary-600);\n    color: white;\n  }\n\n  .selected-date:hover,\n  .range-start:hover,\n  .range-end:hover,\n  .day_date.in-range:hover {\n    background: var(--nile-colors-primary-700);\n  }\n\n  .range-start.in-range {\n    background: var(--nile-colors-primary-600);\n    border-radius: 4px 0 0 4px;\n    color: white;\n  }\n\n  .range-end {\n    background: var(--nile-colors-primary-600);\n    border-radius: 0 4px 4px 0;\n    color: white;\n  }\n\n  .range-middle {\n    background: var(--nile-colors-primary-600);\n    color: white;\n    border-radius: 0;\n  }\n\n  .day_date.selected {\n    background: var(--nile-colors-primary-600);\n    color: white;\n    border-radius: 4px;\n  }\n\n  .day_date.in-range:not(.range-start,.range-end, .selected-date) {\n    background: var(--nile-colors-neutral-400);\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: 4px;\n    background: var(--nile-colors-primary-600);\n  }\n\n  .not-allowed{\n    color: var(--nile-colors-dark-500);\n    pointer-events: none;\n  }\n\n  /* Date CSS_END */\n\n  .calender-input {\n    box-sizing:border-box;\n    padding: 0 16px;\n    width:100%;\n    justify-content: space-between;\n    display: flex;\n    gap:8px;\n    flex-wrap: wrap;\n  }\n\n  .from {\n    display: flex;\n    justify-content: space-between;\n    gap: 8px;\n    width: auto;\n  }\n\n  .manual-input-label {\n    color: var(--nile-colors-dark-500);\n    font-family: Colfax-regular;\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  }\n\n  .button-container {\n    width: 100%;\n    display:flex;\n    justify-content: end;\n    gap:10px;\n    padding: 12px 16px 16px 16px;\n    box-sizing: border-box;\n  }\n\n  .calendar-config {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .calendar-switcher {\n    width: 100%;\n    margin: 0 12px;\n    margin-top: 16px;\n  }\n\n  .units-wrapper{\n    width:min-content;\n    margin:auto;\n  }\n\n  .unit-container{\n    display:grid;\n    grid-template-columns: auto auto;\n    row-gap:var(--nile-spacing-spacing-2xl);\n    column-gap: var(--nile-spacing-spacing-sm);\n    padding: 16px;\n    padding-bottom: 0;\n  }\n  \n  .duration-name{\n    display:flex;\n    align-items:center;\n    font-family:  var( --nile-font-family-serif);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 20px; \n  }\n  \n  .duration-units{\n    display:flex;\n    font-family:  var( --nile-font-family-serif);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n  }\n\n  .duration__value{\n    display: grid;\n    place-items:center;\n    width: 34px;\n    height: 34px;\n    cursor: pointer;\n    border-radius: 4px;\n  }\n\n  .duration__value:hover{\n    background: var(--nile-colors-neutral-100);\n  }\n\n  .duration__value--selected{\n    background-color:var(--nile-colors-primary-600);\n    color: white;\n  }\n\n  .duration__value--selected:hover{\n    background:var(--nile-colors-primary-700);\n  }\n\n  nile-input::part(input)::-webkit-inner-spin-button,\n  nile-input::part(input)::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n  }\n\n  .hidden {\n    display: none !important;\n  }\n\n  .unit-input-container {\n    display: flex;\n    justify-content: space-between;\n    gap: 8px;\n    padding: 0 16px;\n    padding-top: 16px;\n  }\n\n  .duration-input,.time-input,.manual-input {\n    width: 125px;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

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

@@ -1,11 +1,11 @@
-import{css as e}from"lit";const a=e`
+import{css as e}from"lit";const r=e`
   :host {
   }
 
   .base {
     background-color: white;
     border-radius: 8px;
-  width: 288px;
+    width: 300px;
     box-shadow: 0px 8px 8px -4px var(--nile-colors-neutral-400);
     box-shadow: 0px 20px 24px -4px var(--nile-colors-dark-100);
   }
@@ -54,7 +54,7 @@ import{css as e}from"lit";const a=e`
   .day_date ,.day_name{
 		font-family: var( --nile-font-family-serif);
 		font-style: normal;
-		font-size: 12px;
+		font-size: 14px;
 		line-height: 20px;
 		text-align: center;
 
@@ -67,7 +67,6 @@ import{css as e}from"lit";const a=e`
 
   .day_name{
     font-weight:500;
-    font-family: var(--nile-font-family-serif-colfax-medium);
   }
 
   .day_date{
@@ -76,7 +75,7 @@ import{css as e}from"lit";const a=e`
   }
 
 	.current__date__dot{
-		background-color:var(--nile-colors-primary-600);
+		background-color:white;
 		position:absolute;
 		border-radius:50%;
 		height:5px;
@@ -102,7 +101,7 @@ import{css as e}from"lit";const a=e`
   .selected-date {
     color: white;
     border-radius: 4px;
-    background: var(--nile-colors-blue-400);
+    background: var(--nile-colors-primary-600);
   }
 
   .selected-date:hover {
@@ -113,33 +112,27 @@ import{css as e}from"lit";const a=e`
   .range-start,
   .range-end {
     border-radius: 4px;
-    background: var(--nile-colors-blue-400);
-    color: var(--nile-colors-dark-900);
-    font-family: var(--nile-font-family-serif-colfax-medium);
+    background: var(--nile-colors-primary-600);
+    color: white;
   }
 
   .selected-date:hover,
   .range-start:hover,
   .range-end:hover,
   .day_date.in-range:hover {
-    background: var(--nile-colors-blue-500);
+    background: var(--nile-colors-primary-700);
   }
 
   .range-start.in-range {
-    background: var(--nile-colors-blue-400);
+    background: var(--nile-colors-primary-600);
     border-radius: 4px 0 0 4px;
-    color: var(--nile-colors-dark-900);
-    font-family: var(--nile-font-family-serif-colfax-medium);
+    color: white;
   }
 
   .range-end {
-    background: var(--nile-colors-blue-400);
+    background: var(--nile-colors-primary-600);
     border-radius: 0 4px 4px 0;
-    color: var(--nile-colors-dark-900);
-    font-size: 12px;
-    font-weight: 500;
-    letter-spacing: 0.2px;
-    font-family: var(--nile-font-family-serif-colfax-medium);
+    color: white;
   }
 
   .range-middle {
@@ -155,13 +148,13 @@ import{css as e}from"lit";const a=e`
   }
 
   .day_date.in-range:not(.range-start,.range-end, .selected-date) {
-    background: var(--nile-colors-neutral-100);
+    background: var(--nile-colors-neutral-400);
   }
 
   .selected-date {
+    color: white;
     border-radius: 4px;
-    background: var(--nile-colors-blue-400);
-    color: var(--nile-colors-dark-900);
+    background: var(--nile-colors-primary-600);
   }
 
   .not-allowed{
@@ -214,32 +207,24 @@ import{css as e}from"lit";const a=e`
 
   .calendar-switcher {
     width: 100%;
-    margin-top: 12px;
+    margin: 0 12px;
+    margin-top: 16px;
   }
 
-  nile-tab::part(base){
-
-padding-bottom: 12px;
-justify-content: center;
-}
-
   .units-wrapper{
     width:min-content;
     margin:auto;
   }
 
   .unit-container{
- display: flex;
-  flex-direction: column;
-  gap: 24px;
+    display:grid;
+    grid-template-columns: auto auto;
+    row-gap:var(--nile-spacing-spacing-2xl);
+    column-gap: var(--nile-spacing-spacing-sm);
+    padding: 16px;
+    padding-bottom: 0;
   }
- 
- 
-
-
-
-
-
+  
   .duration-name{
     display:flex;
     align-items:center;
@@ -257,7 +242,6 @@ justify-content: center;
     font-style: normal;
     font-weight: 400;
     line-height: 20px;
-    gap: 6px;
   }
 
   .duration__value{
@@ -267,25 +251,19 @@ justify-content: center;
     height: 34px;
     cursor: pointer;
     border-radius: 4px;
-    border: 1px solid var(--nile-colors-neutral-500);
   }
 
   .duration__value:hover{
-    background: var(--nile-colors-neutral-400);
+    background: var(--nile-colors-neutral-100);
   }
 
   .duration__value--selected{
-    background-color:var(--nile-colors-blue-400);
-    color: black;
-    font-weight: 500;
-    border: 1px solid transparent;
-    font-family: var(--nile-font-family-serif-colfax-medium);
+    background-color:var(--nile-colors-primary-600);
+    color: white;
   }
 
   .duration__value--selected:hover{
-    background:var(--nile-colors-blue-500);
-    font-weight: 500;
-    font-family: var(--nile-font-family-serif-colfax-medium);
+    background:var(--nile-colors-primary-700);
   }
 
   nile-input::part(input)::-webkit-inner-spin-button,
@@ -308,121 +286,4 @@ justify-content: center;
   .duration-input,.time-input,.manual-input {
     width: 125px;
   }
-
-
-nile-dropdown[open] > span[slot="trigger"] .calendar-header__caret {
-  transform: rotate(180deg);
-}
-
-
-.calendar-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 14px;
-  letter-spacing: 0.2px;
-  font-feature-settings: 'liga' off, 'clig' off;
-}
-
-.calendar-header__center {
-  display: flex;
-  align-items: center;
-  gap: 6px; 
-}
-
-.calendar-header__trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 1;
-  background: transparent;
-  color: var(--nile-colors-dark-900);
-}
-
-.calendar-header__caret {
-  width: 1em;
-  height: 1em;
-  transition: transform 0.2s ease;
-  transform-origin: center;
-}
-
- .calendar-menu {
-  max-height: 194px;
-  overflow-y: auto;
-  width: 66px;
-  background: red;
- }
-
- 
-
- .month-scroll-wrapper {
-    max-height: 196px;
-    overflow-y: auto;
-    width: 62px;
-    overflow-x: hidden;
-  }
-
-  .month-dropdown nile-menu {
-    overflow-y: auto;
-    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
-    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
-  }
-
-
-  .year-scroll-wrapper {
-    max-height: 196px;
-    overflow-y: auto;
-    width: 65px;
-    overflow-x: hidden;
-  }
-
-  .year-dropdown nile-menu {
-    overflow-y: auto;
-    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
-    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
-  }
-
-  .month-dropdown nile-menu-item::part(base) {
-    padding: 0px 12px;
-   }
-   .year-dropdown nile-menu-item::part(base) {
-    padding: 0px 12px;
-   }
-nile-menu-item[selected]{
-  background: var(--nile-colors-primary-100);
-}
-
-nile-menu-item[selected]::part(base):hover {
-  background: var(--nile-colors-primary-100);
-  border-radius: 0px;
-}
-
-
-nile-icon[disabled] {
-  opacity: 0.4;
-  pointer-events: none;
-}
-
-.units-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 18px;
-  padding: 16px;
-  width: auto;
-}
-
- 
-  
-.duration-name {
-  font-weight: 600;
-  font-size: 16px;
-  margin-bottom: 8px;
-}
- 
-
-   
-`;export{a as s};
+`;export{r as s};

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

@@ -1,13 +1,12 @@
-import{__decorate as t}from"tslib";import{html as i,nothing as e}from"lit";import{property as s,state as n,customElement as a}from"lit/decorators.js";import{s as l}from"./nile-calendar.css.esm.js";import{classMap as r}from"lit/directives/class-map.js";import{w as h}from"../internal/watch.esm.js";import{N as d}from"../internal/nile-element.esm.js";let o=class extends d{constructor(){super(...arguments),this.valueAttribute=null,this.allowedDates=JSON.stringify({}),this.range=!1,this.hideTypes=!1,this.doubleClickUnselect=!1,this.allowClear=!1,this.type="absolute",this.hideDurationFields=[],this.showManualInputs=!1,this.startDate=null,this.endDate=null,this.isSelectingStart=!0,this.hideInput=!1,this.currentMonth=(new Date).getMonth(),this.currentYear=(new Date).getFullYear(),this.allowedDatesLocal=null}static get styles(){return[l]}connectedCallback(){super.connectedCallback(),this.initializeValue(),this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}updated(t){if(super.updated(t),t.has("valueAttribute")){this.valueAttribute||(this.value=null,this.startDate=null,this.endDate=null,this.isSelectingStart=!0);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()}this.initializeValue()}}get monthNames(){return Array.from({length:12},((t,i)=>new Date(0,i).toLocaleString("default",{month:"short"})))}get yearOptions(){const t=this.startYear??2e3,i=this.endYear??2050;return t>i?[]:Array.from({length:i-t+1},((i,e)=>t+e))}onMonthSelected(t){this.currentMonth=t,this.emit("nile-month-change",{month:t})}onYearSelected(t){this.currentYear=t,this.emit("nile-year-change",{year:t})}checkValidAllowedDate(){let t;try{t=JSON.parse(this.allowedDates)}catch(i){t=null}if(!t||0==Object.keys(t).length)return void(this.allowedDatesLocal=null);this.hideInput=!0;this.getUTCDate(t.startDate)>this.getUTCDate(t.endDate)?console.error("StartDate must be greater than endDate"):this.allowedDatesLocal=t}isPrevDisabled(){return 0===this.currentMonth&&void 0!==this.startYear&&this.currentYear<=this.startYear}isNextDisabled(){return 11===this.currentMonth&&void 0!==this.endYear&&this.currentYear>=this.endYear}render(){return i`
+import{__decorate as t}from"tslib";import{html as i,nothing as e}from"lit";import{property as s,state as n,customElement as a}from"lit/decorators.js";import{s as l}from"./nile-calendar.css.esm.js";import{classMap as h}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";let o=class extends d{constructor(){super(...arguments),this.valueAttribute=null,this.allowedDates=JSON.stringify({}),this.range=!1,this.hideTypes=!1,this.doubleClickUnselect=!1,this.allowClear=!1,this.type="absolute",this.hideDurationFields=[],this.showManualInputs=!1,this.startDate=null,this.endDate=null,this.isSelectingStart=!0,this.hideInput=!1,this.currentMonth=(new Date).getMonth(),this.currentYear=(new Date).getFullYear(),this.allowedDatesLocal=null}static get styles(){return[l]}connectedCallback(){super.connectedCallback(),this.initializeValue(),this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}updated(t){if(super.updated(t),t.has("valueAttribute")){this.valueAttribute||(this.value=null,this.startDate=null,this.endDate=null,this.isSelectingStart=!0);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()}this.initializeValue()}}checkValidAllowedDate(){let t;try{t=JSON.parse(this.allowedDates)}catch(i){t=null}if(!t||0==Object.keys(t).length)return void(this.allowedDatesLocal=null);this.hideInput=!0;this.getUTCDate(t.startDate)>this.getUTCDate(t.endDate)?console.error("StartDate must be greater than endDate"):this.allowedDatesLocal=t}render(){return i`
       <div
-        class=${r({base:!0,base__range:this.range})}
-        part="calendar-root"
+        class=${h({base:!0,base__range:this.range})}
       >
-        <div class=${r({"calendar-config":!0,hidden:!this.range||this.range&&this.hideTypes})} part="calendar-config">
-          <div class="calendar-switcher" part="calendar-switcher">
+        <div class=${h({"calendar-config":!0,hidden:!this.range||this.range&&this.hideTypes})}>
+          <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>
@@ -16,30 +15,25 @@ import{__decorate as t}from"tslib";import{html as i,nothing as e}from"lit";impor
         ${"absolute"==this.type?this.renderAbsoluteCalendar():""}
 
         ${this.range?i`
-        <div class="button-container" part="calendar-footer">
+        <div class="button-container">
           ${this.allowClear?i`
             <nile-button 
             class="clear-button"
             variant="secondary"
             ?disabled="${!this.startDate||!this.endDate}"
             @click="${this.clearDate}"
-            role="button"
-            tabindex="0"
-            @keydown="${t=>{"Enter"!==t.key&&" "!==t.key||this.clearDate()}}"
-            > Reset</nile-button>`:e}
+            > Clear</nile-button>`:e}
           <nile-button 
           class="apply-button"  
           ?disabled="${!this.startDate||!this.endDate}"  
           @click="${this.confimRange}"
-          role="button"
-        tabindex="0"
-        @keydown="${t=>{"Enter"!==t.key&&" "!==t.key||this.confimRange()}}"> Apply</nile-button>
+          > Apply</nile-button>
         </div>
         `:""}
       </div>
     `}renderAbsoluteCalendar(){return i`
-    <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,this.getDaysArray(this.currentYear,this.currentMonth))}
       </div>
     </div>
@@ -68,172 +62,93 @@ import{__decorate as t}from"tslib";import{html as i,nothing as e}from"lit";impor
     <div class="units-wrapper">
       <div class="unit-container">
         ${this.hideDurationFields?.includes("minutes")?"":i`
-        <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")?"":i`
-        <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")?"":i`
-        <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")?"":i`
-        <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")?"":i`
-        <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?i`
     <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}"
           @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="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="months" class="${this.hideDurationFields?.includes("months")?"hidden":""}"> Months </nile-option>
         </nile-select>
       </div>
-
     </div>
-  </div>
     `:""}
     `}renderTimeValues(t,e){return e.map((e=>i`
           <div
-          tabindex="0"
-          @keydown="${i=>{"Enter"!==i.key&&" "!==i.key||this.handleTimeValueClick(t,e,i)}}"
-          class="duration__value ${this.selectedUnit===t&&this.selectedValue===e?"duration__value--selected":""}"
-          @click=${i=>this.handleTimeValueClick(t,e,i)}
+            class="duration__value ${this.selectedUnit===t&&this.selectedValue===e?"duration__value--selected":""}"
+            @click=${i=>this.handleTimeValueClick(t,e,i)}
           >${e}
-          </div>`))}renderMonth(t,s,n){const a=new Date(t,s,1).getDay(),l=new Date(t,s+1,0).getDay(),h=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=h.slice(h.length-a),c=d.slice(0,6-l),u=[...o,...n,...c],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>`))}renderMonth(t,s,n){const a=new Date(t,s,1).getDay(),l=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-l),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" 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="${t=>{"Enter"!==t.key&&" "!==t.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(t,s).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(((t,e)=>i`
-  <nile-menu-item
-    class="month-menu-item"
-    ?selected="${e===s}"
-    id="${e===s?"selected-month-item":""}"
-    @click="${()=>this.onMonthSelected(e)}"
-  >
-    ${t}
-  </nile-menu-item>
-`))}
-  </div>
-</nile-menu>
-      </nile-dropdown>
-
-      <!-- YEAR DROPDOWN -->
-      <nile-dropdown class="year-dropdown" >
-        <span
-          slot="trigger"
-          class="calendar-header__trigger"
-          role="button"
-        >
-          ${t}
-          <nile-icon name="arrowdropdown" color="black" class="calendar-header__caret"></nile-icon>
-        </span>
-        <nile-menu>
-        <div class="year-scroll-wrapper">
-          ${this.yearOptions.map((e=>i`
-              <nile-menu-item
-                class="year-menu-item"
-                ?selected="${e===t}"
-                @click="${()=>this.onYearSelected(e)}"
-              >
-                ${e}
-
-              </nile-menu-item>
-            `))}
-          </div>
-        </nile-menu>
-      </nile-dropdown>
-      </div>
+          <span
+            >${new Date(t,s).toLocaleString("default",{month:"long"})}
+            ${t}</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="${t=>{"Enter"!==t.key&&" "!==t.key||this.nextMonth()}}"
+            @click="${this.nextMonth}"
           >
           </nile-icon>
         </div>
@@ -246,18 +161,16 @@ import{__decorate as t}from"tslib";import{html as i,nothing as e}from"lit";impor
           <div class="day_name">Fr</div>
           <div class="day_name">Sa</div>
 
-          ${u.map(((a,l)=>{const h=l>=o.length&&l<o.length+n.length,d=v(a,s,t,h),c={day_date:!0,"not-allowed":!this.isAllowedDate(a,s,t),"in-range":p(a,s,t,h),filler:!h};return d&&(c[d]=!0),i` 
+          ${c.map(((a,l)=>{const r=l>=o.length&&l<o.length+n.length,d=v(a,s,t,r),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
-            part="calendar-day"
-              class=${r(c)}
-              tabindex="${h&&this.isAllowedDate(a,s,t)?"0":"-1"}"
-  @click="${()=>{h&&this.selectDate(a,s,t)}}"
-  @keydown="${i=>{"Enter"!==i.key&&" "!==i.key||!h||this.selectDate(a,s,t)}}" >
+              class=${h(u)}
+              @click="${()=>{r&&this.selectDate(a,s,t)}}"
+            >
               <span style="position:relative;">
                 ${a}
-                ${((t,i,e)=>{const s=new Date;return t===s.getDate()&&i+1===s.getMonth()+1&&e===s.getFullYear()})(a,s,t)&&h?i`<div class="current__date__dot" part="current-date-dot"></div>`:e}
+                ${((t,i,e)=>{const s=new Date;return t===s.getDate()&&i+1===s.getMonth()+1&&e===s.getFullYear()})(a,s,t)&&r?i`<div class="current__date__dot"></div>`:e}
               </span>
             </div>`}))}
         </div>
       </div>
-    `}isAllowedDate(t,i,e){if(!this.allowedDatesLocal)return!0;const s=new Date(Date.UTC(e,i,t)),n=this.getUTCDate(this.allowedDatesLocal.startDate),a=this.getUTCDate(this.allowedDatesLocal.endDate);a.setUTCHours(23,59,59,999);return s>=n&&s<=a}clearDate(){this.range?(this.valueAttribute="",this.startDate=null,this.endDate=null):this.value=null,this.emit("nile-clear")}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{if(String(this.value)==String(s)&&this.doubleClickUnselect)return void this.clearDate();this.value=s,this.emitChangedData({value:this.value})}}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.value=null}catch(t){}else if(this.valueAttribute){let 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())}}handleDurationChange(t){t.stopPropagation(),t.detail.value=t.detail.value.replace(/e/gi,"");const i=Number(t.detail.value);i&&(this.selectedValue=i,this.selectedUnit&&this.selectedValue&&this.handleTimeValueClick(this.selectedUnit,this.selectedValue,t))}handleUnitChange(t){t.stopPropagation(),this.selectedUnit=t.detail.value,this.selectedUnit&&this.selectedValue&&this.handleTimeValueClick(this.selectedUnit,this.selectedValue,t)}handleTimeValueClick(t,i,e){this.createRelativePeriod(t,i),this.selectedUnit=t,this.selectedValue=i}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()),{startDate:this.startDate,endDate:this.endDate}}handleStartTimeInput(t){if(t.stopPropagation(),!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(t.stopPropagation(),!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()}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}isValidTimeInput(t){return/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/.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")}`}nextMonth(){if(11===this.currentMonth){const t=this.currentYear+1;if(void 0!==this.endYear&&t>this.endYear)return;this.currentMonth=0,this.currentYear=t}else this.currentMonth++}prevMonth(){if(0===this.currentMonth){const t=this.currentYear-1;if(void 0!==this.startYear&&t<this.startYear)return;this.currentMonth=11,this.currentYear=t}else this.currentMonth--}confimRange(){this.startDate&&this.endDate&&this.emitChangedData({startDate:this.startDate,endDate:this.endDate})}onTypeChange(t){this.type=t.detail.value,this.emit("nile-type-change",{value:this.type})}getUTCDate(t){return new Date(Date.UTC(t.slice(0,4),t.slice(5,7)-1,t.slice(8,10)))}emitChangedData(t){this.emit("nile-changed",t),this.emit("nile-change",t)}getDaysArray(t,i){const e=new Date(t,i+1,0).getDate();return Array.from({length:e},((t,i)=>i+1))}};t([s({type:String,attribute:"value"})],o.prototype,"valueAttribute",void 0),t([s({type:String,attribute:!0,reflect:!0})],o.prototype,"allowedDates",void 0),t([s({type:Boolean,reflect:!0})],o.prototype,"range",void 0),t([s({type:Boolean,attribute:!0,reflect:!0})],o.prototype,"hideTypes",void 0),t([s({type:Boolean,reflect:!0})],o.prototype,"doubleClickUnselect",void 0),t([s({type:Boolean,reflect:!0})],o.prototype,"allowClear",void 0),t([s({type:String,reflect:!0})],o.prototype,"type",void 0),t([s({type:String})],o.prototype,"selectedUnit",void 0),t([s({type:Number})],o.prototype,"selectedValue",void 0),t([s({type:Array,attribute:"hide-duration-fields"})],o.prototype,"hideDurationFields",void 0),t([s({type:Boolean})],o.prototype,"showManualInputs",void 0),t([n()],o.prototype,"startDate",void 0),t([n()],o.prototype,"endDate",void 0),t([n()],o.prototype,"isSelectingStart",void 0),t([n()],o.prototype,"hideInput",void 0),t([n()],o.prototype,"value",void 0),t([n()],o.prototype,"currentMonth",void 0),t([n()],o.prototype,"currentYear",void 0),t([n()],o.prototype,"allowedDatesLocal",void 0),t([s({type:Number})],o.prototype,"startYear",void 0),t([s({type:Number})],o.prototype,"endYear",void 0),t([h("allowedDates")],o.prototype,"checkValidAllowedDate",null),o=t([a("nile-calendar")],o);export{o as N};
+    `}isAllowedDate(t,i,e){if(!this.allowedDatesLocal)return!0;const s=new Date(Date.UTC(e,i,t)),n=this.getUTCDate(this.allowedDatesLocal.startDate),a=this.getUTCDate(this.allowedDatesLocal.endDate);a.setUTCHours(23,59,59,999);return s>=n&&s<=a}clearDate(){this.range?(this.valueAttribute="",this.startDate=null,this.endDate=null):this.value=null,this.emit("nile-clear")}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{if(String(this.value)==String(s)&&this.doubleClickUnselect)return void this.clearDate();this.value=s,this.emitChangedData({value:this.value})}}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.value=null}catch(t){}else if(this.valueAttribute){let 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())}}handleDurationChange(t){t.stopPropagation(),t.detail.value=t.detail.value.replace(/e/gi,"");const i=Number(t.detail.value);i&&(this.selectedValue=i,this.selectedUnit&&this.selectedValue&&this.handleTimeValueClick(this.selectedUnit,this.selectedValue,t))}handleUnitChange(t){t.stopPropagation(),this.selectedUnit=t.detail.value,this.selectedUnit&&this.selectedValue&&this.handleTimeValueClick(this.selectedUnit,this.selectedValue,t)}handleTimeValueClick(t,i,e){this.createRelativePeriod(t,i),this.selectedUnit=t,this.selectedValue=i}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()),{startDate:this.startDate,endDate:this.endDate}}handleStartTimeInput(t){if(t.stopPropagation(),!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(t.stopPropagation(),!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()}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}isValidTimeInput(t){return/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/.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")}`}nextMonth(){11===this.currentMonth?(this.currentMonth=0,this.currentYear++):this.currentMonth++}prevMonth(){0===this.currentMonth?(this.currentMonth=11,this.currentYear--):this.currentMonth--}confimRange(){this.startDate&&this.endDate&&this.emitChangedData({startDate:this.startDate,endDate:this.endDate})}onTypeChange(t){this.type=t.detail.value,this.emit("nile-type-change",{value:this.type})}getUTCDate(t){return new Date(Date.UTC(t.slice(0,4),t.slice(5,7)-1,t.slice(8,10)))}emitChangedData(t){this.emit("nile-changed",t),this.emit("nile-change",t)}getDaysArray(t,i){const e=new Date(t,i+1,0).getDate();return Array.from({length:e},((t,i)=>i+1))}};t([s({type:String,attribute:"value"})],o.prototype,"valueAttribute",void 0),t([s({type:String,attribute:!0,reflect:!0})],o.prototype,"allowedDates",void 0),t([s({type:Boolean,reflect:!0})],o.prototype,"range",void 0),t([s({type:Boolean,attribute:!0,reflect:!0})],o.prototype,"hideTypes",void 0),t([s({type:Boolean,reflect:!0})],o.prototype,"doubleClickUnselect",void 0),t([s({type:Boolean,reflect:!0})],o.prototype,"allowClear",void 0),t([s({type:String,reflect:!0})],o.prototype,"type",void 0),t([s({type:String})],o.prototype,"selectedUnit",void 0),t([s({type:Number})],o.prototype,"selectedValue",void 0),t([s({type:Array,attribute:"hide-duration-fields"})],o.prototype,"hideDurationFields",void 0),t([s({type:Boolean})],o.prototype,"showManualInputs",void 0),t([n()],o.prototype,"startDate",void 0),t([n()],o.prototype,"endDate",void 0),t([n()],o.prototype,"isSelectingStart",void 0),t([n()],o.prototype,"hideInput",void 0),t([n()],o.prototype,"value",void 0),t([n()],o.prototype,"currentMonth",void 0),t([n()],o.prototype,"currentYear",void 0),t([n()],o.prototype,"allowedDatesLocal",void 0),t([r("allowedDates")],o.prototype,"checkValidAllowedDate",null),o=t([a("nile-calendar")],o);export{o as N};