@aquera/nile-elements 0.1.57-beta-1.0 → 0.1.57-beta-1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/demo/index.html +92 -17
- package/dist/nile-calendar/nile-calendar.cjs.js +1 -1
- package/dist/nile-calendar/nile-calendar.cjs.js.map +1 -1
- package/dist/nile-calendar/nile-calendar.css.cjs.js +1 -1
- package/dist/nile-calendar/nile-calendar.css.cjs.js.map +1 -1
- package/dist/nile-calendar/nile-calendar.css.esm.js +1 -1
- package/dist/nile-calendar/nile-calendar.esm.js +35 -25
- package/dist/src/nile-calendar/nile-calendar.css.js +1 -1
- package/dist/src/nile-calendar/nile-calendar.css.js.map +1 -1
- package/dist/src/nile-calendar/nile-calendar.js +30 -20
- package/dist/src/nile-calendar/nile-calendar.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-calendar/nile-calendar.css.ts +1 -1
- package/src/nile-calendar/nile-calendar.ts +35 -24
|
@@ -1 +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 }\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 }\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 }\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
|
|
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 }\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 }\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 }\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 }\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: 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: 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 }\n\n .duration__value--selected:hover{\n background:var(--nile-colors-blue-500);\n font-weight: 500;\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: 60px;\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: 60px;\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"}
|
|
@@ -135,7 +135,6 @@ import{css as e}from"lit";const r=e`
|
|
|
135
135
|
color: var(--nile-colors-dark-900);
|
|
136
136
|
font-size: 12px;
|
|
137
137
|
font-weight: 500;
|
|
138
|
-
line-height: 12px;
|
|
139
138
|
letter-spacing: 0.2px;
|
|
140
139
|
}
|
|
141
140
|
|
|
@@ -400,6 +399,7 @@ nile-icon[disabled] {
|
|
|
400
399
|
flex-direction: column;
|
|
401
400
|
gap: 18px;
|
|
402
401
|
padding: 16px;
|
|
402
|
+
width: auto;
|
|
403
403
|
}
|
|
404
404
|
|
|
405
405
|
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
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
|
|
1
|
+
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`
|
|
2
2
|
<div
|
|
3
|
-
class=${
|
|
3
|
+
class=${r({base:!0,base__range:this.range})}
|
|
4
|
+
part="calendar-root"
|
|
4
5
|
>
|
|
5
|
-
<div class=${
|
|
6
|
-
<div class="calendar-switcher">
|
|
6
|
+
<div class=${r({"calendar-config":!0,hidden:!this.range||this.range&&this.hideTypes})} part="calendar-config">
|
|
7
|
+
<div class="calendar-switcher" part="calendar-switcher">
|
|
7
8
|
<nile-tab-group centered @nile-tab-show="${this.onTypeChange}" value="${this.type}">
|
|
8
9
|
<nile-tab slot="nav" panel="absolute">Absolute</nile-tab>
|
|
9
10
|
<nile-tab slot="nav" panel="relative">Relative</nile-tab>
|
|
@@ -15,7 +16,7 @@ import{__decorate as t}from"tslib";import{html as i,nothing as e}from"lit";impor
|
|
|
15
16
|
${"absolute"==this.type?this.renderAbsoluteCalendar():""}
|
|
16
17
|
|
|
17
18
|
${this.range?i`
|
|
18
|
-
<div class="button-container">
|
|
19
|
+
<div class="button-container" part="calendar-footer">
|
|
19
20
|
${this.allowClear?i`
|
|
20
21
|
<nile-button
|
|
21
22
|
class="clear-button"
|
|
@@ -32,8 +33,8 @@ import{__decorate as t}from"tslib";import{html as i,nothing as e}from"lit";impor
|
|
|
32
33
|
`:""}
|
|
33
34
|
</div>
|
|
34
35
|
`}renderAbsoluteCalendar(){return i`
|
|
35
|
-
<div class="calendar-wrapper">
|
|
36
|
-
<div class="calendar-container">
|
|
36
|
+
<div class="calendar-wrapper" part="calendar-wrapper">
|
|
37
|
+
<div class="calendar-container" part="calendar-container">
|
|
37
38
|
${this.renderMonth(this.currentYear,this.currentMonth,this.getDaysArray(this.currentYear,this.currentMonth))}
|
|
38
39
|
</div>
|
|
39
40
|
</div>
|
|
@@ -111,39 +112,47 @@ import{__decorate as t}from"tslib";import{html as i,nothing as e}from"lit";impor
|
|
|
111
112
|
|
|
112
113
|
${this.range?i`
|
|
113
114
|
<div>
|
|
114
|
-
|
|
115
|
+
<div>
|
|
116
|
+
<div class="unit-input-container" part="unit-input-container" style="display: flex; gap: 1rem; align-items: flex-end;">
|
|
117
|
+
|
|
118
|
+
<div class="input-wrapper" part="input-wrapper" style="flex: 1;">
|
|
115
119
|
<nile-input
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
120
|
+
class="manual-input duration-input"
|
|
121
|
+
label="Duration"
|
|
122
|
+
inputmode="numeric"
|
|
123
|
+
type="number"
|
|
124
|
+
value="${this.selectedValue}"
|
|
125
|
+
@nile-change="${this.handleDurationChange}"
|
|
126
|
+
placeholder="Enter Value"
|
|
123
127
|
></nile-input>
|
|
128
|
+
</div>
|
|
124
129
|
|
|
125
|
-
|
|
130
|
+
<div class="select-wrapper" part="select-wrapper" style="flex: 1;">
|
|
131
|
+
<nile-select
|
|
132
|
+
class="manual-input time-input"
|
|
126
133
|
label="Unit of time"
|
|
127
134
|
value="${this.selectedUnit}"
|
|
128
135
|
@nile-change="${this.handleUnitChange}"
|
|
129
136
|
>
|
|
130
137
|
<nile-option value="minutes" class="${this.hideDurationFields?.includes("minutes")?"hidden":""}">Minutes</nile-option>
|
|
131
|
-
<nile-option value="hours" class="${this.hideDurationFields?.includes("hours")?"hidden":""}">
|
|
138
|
+
<nile-option value="hours" class="${this.hideDurationFields?.includes("hours")?"hidden":""}">Hours</nile-option>
|
|
132
139
|
<nile-option value="days" class="${this.hideDurationFields?.includes("days")?"hidden":""}">Days</nile-option>
|
|
133
140
|
<nile-option value="weeks" class="${this.hideDurationFields?.includes("weeks")?"hidden":""}">Weeks</nile-option>
|
|
134
|
-
<nile-option value="months" class="${this.hideDurationFields?.includes("months")?"hidden":""}">
|
|
141
|
+
<nile-option value="months" class="${this.hideDurationFields?.includes("months")?"hidden":""}">Months</nile-option>
|
|
135
142
|
</nile-select>
|
|
136
143
|
</div>
|
|
144
|
+
|
|
137
145
|
</div>
|
|
146
|
+
</div>
|
|
138
147
|
`:""}
|
|
139
148
|
`}renderTimeValues(t,e){return e.map((e=>i`
|
|
140
149
|
<div
|
|
141
150
|
class="duration__value ${this.selectedUnit===t&&this.selectedValue===e?"duration__value--selected":""}"
|
|
142
151
|
@click=${i=>this.handleTimeValueClick(t,e,i)}
|
|
143
152
|
>${e}
|
|
144
|
-
</div>`))}renderMonth(t,s,n){const a=new Date(t,s,1).getDay(),l=new Date(t,s+1,0).getDay(),
|
|
153
|
+
</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`
|
|
145
154
|
<div class="calendar">
|
|
146
|
-
<div class="calendar-header">
|
|
155
|
+
<div class="calendar-header" part="calendar-header">
|
|
147
156
|
<nile-icon
|
|
148
157
|
class="calendar-header__month-navigation"
|
|
149
158
|
name="arrowleft"
|
|
@@ -228,16 +237,17 @@ import{__decorate as t}from"tslib";import{html as i,nothing as e}from"lit";impor
|
|
|
228
237
|
<div class="day_name">Fr</div>
|
|
229
238
|
<div class="day_name">Sa</div>
|
|
230
239
|
|
|
231
|
-
${u.map(((a,l)=>{const
|
|
240
|
+
${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`
|
|
232
241
|
<div
|
|
233
|
-
|
|
234
|
-
|
|
242
|
+
part="calendar-day"
|
|
243
|
+
class=${r(c)}
|
|
244
|
+
@click="${()=>{h&&this.selectDate(a,s,t)}}"
|
|
235
245
|
>
|
|
236
246
|
<span style="position:relative;">
|
|
237
247
|
${a}
|
|
238
|
-
${((t,i,e)=>{const s=new Date;return t===s.getDate()&&i+1===s.getMonth()+1&&e===s.getFullYear()})(a,s,t)&&
|
|
248
|
+
${((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}
|
|
239
249
|
</span>
|
|
240
250
|
</div>`}))}
|
|
241
251
|
</div>
|
|
242
252
|
</div>
|
|
243
|
-
`}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([
|
|
253
|
+
`}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};
|
|
@@ -145,7 +145,6 @@ export const styles = css `
|
|
|
145
145
|
color: var(--nile-colors-dark-900);
|
|
146
146
|
font-size: 12px;
|
|
147
147
|
font-weight: 500;
|
|
148
|
-
line-height: 12px;
|
|
149
148
|
letter-spacing: 0.2px;
|
|
150
149
|
}
|
|
151
150
|
|
|
@@ -410,6 +409,7 @@ nile-icon[disabled] {
|
|
|
410
409
|
flex-direction: column;
|
|
411
410
|
gap: 18px;
|
|
412
411
|
padding: 16px;
|
|
412
|
+
width: auto;
|
|
413
413
|
}
|
|
414
414
|
|
|
415
415
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-calendar.css.js","sourceRoot":"","sources":["../../../src/nile-calendar/nile-calendar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ZxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 }\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 }\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 }\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
|
|
1
|
+
{"version":3,"file":"nile-calendar.css.js","sourceRoot":"","sources":["../../../src/nile-calendar/nile-calendar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ZxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 }\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 }\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 }\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 }\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: 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: 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 }\n\n .duration__value--selected:hover{\n background:var(--nile-colors-blue-500);\n font-weight: 500;\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: 60px;\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: 60px;\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"]}
|
|
@@ -76,7 +76,7 @@ let NileCalendar = class NileCalendar extends NileElement {
|
|
|
76
76
|
return Array.from({ length: 12 }, (_, i) => new Date(0, i).toLocaleString('default', { month: 'short' }));
|
|
77
77
|
}
|
|
78
78
|
get yearOptions() {
|
|
79
|
-
const fallbackStart =
|
|
79
|
+
const fallbackStart = 2000;
|
|
80
80
|
const fallbackEnd = 2050;
|
|
81
81
|
const start = this.startYear ?? fallbackStart;
|
|
82
82
|
const end = this.endYear ?? fallbackEnd;
|
|
@@ -134,12 +134,13 @@ let NileCalendar = class NileCalendar extends NileElement {
|
|
|
134
134
|
base: true,
|
|
135
135
|
base__range: this.range,
|
|
136
136
|
})}
|
|
137
|
+
part="calendar-root"
|
|
137
138
|
>
|
|
138
139
|
<div class=${classMap({
|
|
139
140
|
"calendar-config": true,
|
|
140
141
|
"hidden": !this.range || (this.range && this.hideTypes)
|
|
141
|
-
})}>
|
|
142
|
-
<div class="calendar-switcher">
|
|
142
|
+
})} part="calendar-config">
|
|
143
|
+
<div class="calendar-switcher" part="calendar-switcher">
|
|
143
144
|
<nile-tab-group centered @nile-tab-show="${this.onTypeChange}" value="${this.type}">
|
|
144
145
|
<nile-tab slot="nav" panel="absolute">Absolute</nile-tab>
|
|
145
146
|
<nile-tab slot="nav" panel="relative">Relative</nile-tab>
|
|
@@ -151,7 +152,7 @@ let NileCalendar = class NileCalendar extends NileElement {
|
|
|
151
152
|
${this.type == 'absolute' ? this.renderAbsoluteCalendar() : ''}
|
|
152
153
|
|
|
153
154
|
${!this.range ? '' : html `
|
|
154
|
-
<div class="button-container">
|
|
155
|
+
<div class="button-container" part="calendar-footer">
|
|
155
156
|
${this.allowClear ?
|
|
156
157
|
html `
|
|
157
158
|
<nile-button
|
|
@@ -175,8 +176,8 @@ let NileCalendar = class NileCalendar extends NileElement {
|
|
|
175
176
|
*/
|
|
176
177
|
renderAbsoluteCalendar() {
|
|
177
178
|
return html `
|
|
178
|
-
<div class="calendar-wrapper">
|
|
179
|
-
<div class="calendar-container">
|
|
179
|
+
<div class="calendar-wrapper" part="calendar-wrapper">
|
|
180
|
+
<div class="calendar-container" part="calendar-container">
|
|
180
181
|
${this.renderMonth(this.currentYear, this.currentMonth, this.getDaysArray(this.currentYear, this.currentMonth))}
|
|
181
182
|
</div>
|
|
182
183
|
</div>
|
|
@@ -260,30 +261,38 @@ let NileCalendar = class NileCalendar extends NileElement {
|
|
|
260
261
|
|
|
261
262
|
${this.range ? html `
|
|
262
263
|
<div>
|
|
263
|
-
|
|
264
|
+
<div>
|
|
265
|
+
<div class="unit-input-container" part="unit-input-container" style="display: flex; gap: 1rem; align-items: flex-end;">
|
|
266
|
+
|
|
267
|
+
<div class="input-wrapper" part="input-wrapper" style="flex: 1;">
|
|
264
268
|
<nile-input
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
269
|
+
class="manual-input duration-input"
|
|
270
|
+
label="Duration"
|
|
271
|
+
inputmode="numeric"
|
|
272
|
+
type="number"
|
|
273
|
+
value="${this.selectedValue}"
|
|
274
|
+
@nile-change="${this.handleDurationChange}"
|
|
275
|
+
placeholder="Enter Value"
|
|
272
276
|
></nile-input>
|
|
277
|
+
</div>
|
|
273
278
|
|
|
274
|
-
|
|
279
|
+
<div class="select-wrapper" part="select-wrapper" style="flex: 1;">
|
|
280
|
+
<nile-select
|
|
281
|
+
class="manual-input time-input"
|
|
275
282
|
label="Unit of time"
|
|
276
283
|
value="${this.selectedUnit}"
|
|
277
284
|
@nile-change="${this.handleUnitChange}"
|
|
278
285
|
>
|
|
279
286
|
<nile-option value="minutes" class="${this.hideDurationFields?.includes('minutes') ? 'hidden' : ''}">Minutes</nile-option>
|
|
280
|
-
<nile-option value="hours" class="${this.hideDurationFields?.includes('hours') ? 'hidden' : ''}">
|
|
287
|
+
<nile-option value="hours" class="${this.hideDurationFields?.includes('hours') ? 'hidden' : ''}">Hours</nile-option>
|
|
281
288
|
<nile-option value="days" class="${this.hideDurationFields?.includes('days') ? 'hidden' : ''}">Days</nile-option>
|
|
282
289
|
<nile-option value="weeks" class="${this.hideDurationFields?.includes('weeks') ? 'hidden' : ''}">Weeks</nile-option>
|
|
283
|
-
<nile-option value="months" class="${this.hideDurationFields?.includes('months') ? 'hidden' : ''}">
|
|
290
|
+
<nile-option value="months" class="${this.hideDurationFields?.includes('months') ? 'hidden' : ''}">Months</nile-option>
|
|
284
291
|
</nile-select>
|
|
285
292
|
</div>
|
|
293
|
+
|
|
286
294
|
</div>
|
|
295
|
+
</div>
|
|
287
296
|
` : ''}
|
|
288
297
|
`;
|
|
289
298
|
}
|
|
@@ -353,7 +362,7 @@ let NileCalendar = class NileCalendar extends NileElement {
|
|
|
353
362
|
};
|
|
354
363
|
return html `
|
|
355
364
|
<div class="calendar">
|
|
356
|
-
<div class="calendar-header">
|
|
365
|
+
<div class="calendar-header" part="calendar-header">
|
|
357
366
|
<nile-icon
|
|
358
367
|
class="calendar-header__month-navigation"
|
|
359
368
|
name="arrowleft"
|
|
@@ -454,13 +463,14 @@ let NileCalendar = class NileCalendar extends NileElement {
|
|
|
454
463
|
classMapObj[datePlacement] = true;
|
|
455
464
|
return html `
|
|
456
465
|
<div
|
|
466
|
+
part="calendar-day"
|
|
457
467
|
class=${classMap(classMapObj)}
|
|
458
468
|
@click="${() => { if (isCurrentMonth)
|
|
459
469
|
this.selectDate(day, month, year); }}"
|
|
460
470
|
>
|
|
461
471
|
<span style="position:relative;">
|
|
462
472
|
${day}
|
|
463
|
-
${isCurrentDate(day, month, year) && isCurrentMonth ? html `<div class="current__date__dot"></div>` : nothing}
|
|
473
|
+
${isCurrentDate(day, month, year) && isCurrentMonth ? html `<div class="current__date__dot" part="current-date-dot"></div>` : nothing}
|
|
464
474
|
</span>
|
|
465
475
|
</div>`;
|
|
466
476
|
})}
|
|
@@ -724,7 +734,7 @@ let NileCalendar = class NileCalendar extends NileElement {
|
|
|
724
734
|
return new Date(Date.UTC(dateStr.slice(0, 4), dateStr.slice(5, 7) - 1, dateStr.slice(8, 10)));
|
|
725
735
|
}
|
|
726
736
|
emitChangedData(data) {
|
|
727
|
-
this.emit('nile-changed', data);
|
|
737
|
+
this.emit('nile-changed', data); // deprecated . Use nile-change instead.
|
|
728
738
|
this.emit('nile-change', data);
|
|
729
739
|
}
|
|
730
740
|
getDaysArray(year, month) {
|