@aquera/nile-elements 1.2.1-beta-1.6 → 1.2.1-beta-1.7

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.
Files changed (43) hide show
  1. package/demo/index.html +83 -100
  2. package/demo/variables.css +2 -3
  3. package/dist/index.js +369 -656
  4. package/dist/nile-calendar/nile-calendar.cjs.js +1 -1
  5. package/dist/nile-calendar/nile-calendar.cjs.js.map +1 -1
  6. package/dist/nile-calendar/nile-calendar.css.cjs.js +1 -1
  7. package/dist/nile-calendar/nile-calendar.css.cjs.js.map +1 -1
  8. package/dist/nile-calendar/nile-calendar.css.esm.js +38 -220
  9. package/dist/nile-calendar/nile-calendar.esm.js +98 -204
  10. package/dist/nile-select/nile-select.cjs.js +1 -1
  11. package/dist/nile-select/nile-select.cjs.js.map +1 -1
  12. package/dist/nile-select/nile-select.esm.js +4 -4
  13. package/dist/nile-select/virtual-scroll-helper.cjs.js +1 -1
  14. package/dist/nile-select/virtual-scroll-helper.cjs.js.map +1 -1
  15. package/dist/nile-select/virtual-scroll-helper.esm.js +1 -0
  16. package/dist/nile-virtual-select/nile-virtual-select.cjs.js +1 -1
  17. package/dist/nile-virtual-select/nile-virtual-select.cjs.js.map +1 -1
  18. package/dist/nile-virtual-select/nile-virtual-select.esm.js +1 -1
  19. package/dist/src/nile-calendar/nile-calendar.css.js +36 -218
  20. package/dist/src/nile-calendar/nile-calendar.css.js.map +1 -1
  21. package/dist/src/nile-calendar/nile-calendar.d.ts +0 -15
  22. package/dist/src/nile-calendar/nile-calendar.js +93 -318
  23. package/dist/src/nile-calendar/nile-calendar.js.map +1 -1
  24. package/dist/src/nile-rich-text-editor/utils.d.ts +0 -13
  25. package/dist/src/nile-rich-text-editor/utils.js +1 -537
  26. package/dist/src/nile-rich-text-editor/utils.js.map +1 -1
  27. package/dist/src/nile-select/nile-select.d.ts +1 -0
  28. package/dist/src/nile-select/nile-select.js +30 -9
  29. package/dist/src/nile-select/nile-select.js.map +1 -1
  30. package/dist/src/nile-select/virtual-scroll-helper.js +1 -0
  31. package/dist/src/nile-select/virtual-scroll-helper.js.map +1 -1
  32. package/dist/src/nile-virtual-select/nile-virtual-select.js +1 -0
  33. package/dist/src/nile-virtual-select/nile-virtual-select.js.map +1 -1
  34. package/dist/src/version.js +1 -1
  35. package/dist/src/version.js.map +1 -1
  36. package/dist/tsconfig.tsbuildinfo +1 -1
  37. package/package.json +1 -1
  38. package/src/nile-calendar/nile-calendar.css.ts +36 -218
  39. package/src/nile-calendar/nile-calendar.ts +106 -343
  40. package/src/nile-select/nile-select.ts +25 -15
  41. package/src/nile-select/virtual-scroll-helper.ts +2 -0
  42. package/src/nile-virtual-select/nile-virtual-select.ts +1 -0
  43. package/vscode-html-custom-data.json +17 -41
@@ -1,13 +1,12 @@
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.showMonthDropdown=!1,this.showYearDropdown=!1,this.dateFormat="MM/DD/YYYY",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:"long"})))}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}formatDate(t){if(!t)return"";const i=t.getFullYear(),e=String(t.getMonth()+1).padStart(2,"0"),s=String(t.getDate()).padStart(2,"0");let n=this.dateFormat;return n=n.replace(/YYYY/g,String(i)),n=n.replace(/MM/g,e),n=n.replace(/DD/g,s),n=n.replace(/YY/g,String(i).slice(-2)),n}parseDate(t,i){if(!t||!this.dateFormat)return null;const e=this.dateFormat.replace(/YYYY/,"(?<year>\\d{4})").replace(/YY/,"(?<year>\\d{2})").replace(/MM/,"(?<month>\\d{1,2})").replace(/DD/,"(?<day>\\d{1,2})"),s=new RegExp(`^${e}$`),n=t.match(s);if(!n||!n.groups)return null;const a=2===n.groups.year.length?Number(`20${n.groups.year}`):Number(n.groups.year),l=Number(n.groups.month)-1,r=Number(n.groups.day),h=new Date(i||new Date);return h.setFullYear(a,l,r),isNaN(h.getTime())?null:h}handleStartDateInput(t){t.stopPropagation();const i=this.parseDate(t.detail.value,this.startDate);i&&(this.startDate=i,this.currentMonth=i.getMonth(),this.currentYear=i.getFullYear(),this.requestUpdate())}handleEndDateInput(t){t.stopPropagation();const i=this.parseDate(t.detail.value,this.endDate);i&&(this.endDate=i,this.currentMonth=i.getMonth(),this.currentYear=i.getFullYear(),this.requestUpdate())}render(){return i`
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 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`
2
2
  <div
3
- class=${r({base:!0,base__range:this.range})}
4
- part="calendar-container"
3
+ class=${h({base:!0,base__range:this.range})}
5
4
  >
6
- <div class=${r({"calendar-config":!0,hidden:!this.range||this.range&&this.hideTypes})}>
7
- <div class="calendar-switcher" part="calendar-switcher">
5
+ <div class=${h({"calendar-config":!0,hidden:!this.range||this.range&&this.hideTypes})}>
6
+ <div class="calendar-switcher">
8
7
  <nile-tab-group centered @nile-tab-show="${this.onTypeChange}" value="${this.type}">
9
- <nile-tab slot="nav" panel="absolute" tabindex="0">Absolute</nile-tab>
10
- <nile-tab slot="nav" panel="relative" tabindex="0">Relative</nile-tab>
8
+ <nile-tab slot="nav" panel="absolute">Absolute</nile-tab>
9
+ <nile-tab slot="nav" panel="relative">Relative</nile-tab>
11
10
  </nile-tab-group>
12
11
  </div>
13
12
  </div>
@@ -16,155 +15,122 @@ import{__decorate as t}from"tslib";import{html as i,nothing as e}from"lit";impor
16
15
  ${"absolute"==this.type?this.renderAbsoluteCalendar():""}
17
16
 
18
17
  ${this.range?i`
19
- <div class="button-container" part="button-container">
18
+ <div class="button-container">
20
19
  ${this.allowClear?i`
21
20
  <nile-button
22
21
  class="clear-button"
23
22
  variant="secondary"
24
- role="button"
25
23
  ?disabled="${!this.startDate||!this.endDate}"
26
- @keydown="${t=>{"Enter"!==t.key&&" "!==t.key||this.clearDate()}}"
27
24
  @click="${this.clearDate}"
28
-
29
- > Reset</nile-button>`:e}
25
+ > Clear</nile-button>`:e}
30
26
  <nile-button
31
27
  class="apply-button"
32
28
  ?disabled="${!this.startDate||!this.endDate}"
33
29
  @click="${this.confimRange}"
34
- @keydown="${t=>{"Enter"!==t.key&&" "!==t.key||this.confimRange()}}"
35
30
  > Apply</nile-button>
36
31
  </div>
37
32
  `:""}
38
33
  </div>
39
34
  `}renderAbsoluteCalendar(){return i`
40
- <div class="calendar-wrapper" part="calendar-wrapper">
41
- <div class="calendar-container" >
35
+ <div class="calendar-wrapper">
36
+ <div class="calendar-container">
42
37
  ${this.renderMonth(this.currentYear,this.currentMonth,this.getDaysArray(this.currentYear,this.currentMonth))}
43
38
  </div>
44
39
  </div>
45
40
  ${this.range?i`
46
41
  <div class="calender-input ${this.showManualInputs?"":"hidden"}" >
47
42
  <div class="from">
48
- <nile-input
49
- label="From"
50
- class="manual-input date-input"
51
- placeholder="${this.dateFormat}"
52
- value="${this.formatDate(this.startDate)}"
53
- @nile-change="${this.handleStartDateInput}"
54
- ></nile-input>
55
-
56
- <nile-input
57
- class="manual-input time-input"
58
- placeholder="HH:MM:SS"
59
- value="${this.formatTime(this.startDate)}"
60
- @nile-change="${this.handleStartTimeInput}"
61
- ></nile-input>
62
- </div>
63
-
64
- <div class="from">
65
- <nile-input
66
- label="To"
67
- class="manual-input date-input"
68
- placeholder="${this.dateFormat}"
69
- value="${this.formatDate(this.endDate)}"
70
- @nile-change="${this.handleEndDateInput}"
71
- ></nile-input>
43
+ <nile-input
44
+ label="From"
45
+ class="manual-input"
46
+ value="${this.formatTime(this.startDate)}"
47
+ placeholder="HH:MM:SS" @nile-change="${this.handleStartTimeInput}"
48
+ > </nile-input>
49
+ </div>
72
50
 
73
- <nile-input
74
- class="manual-input time-input"
75
- placeholder="HH:MM:SS"
76
- value="${this.formatTime(this.endDate)}"
77
- @nile-change="${this.handleEndTimeInput}"
78
- ></nile-input>
79
- </div>
51
+ <div class="from">
52
+ <nile-input
53
+ label="To"
54
+ class="manual-input"
55
+ value="${this.formatTime(this.endDate)}"
56
+ placeholder="HH:MM:SS" @nile-change="${this.handleEndTimeInput}"
57
+ > </nile-input>
58
+ </div>
80
59
  </div>
81
60
  `:""}
82
61
  `}renderRelativeCalendar(){return i`
83
- <div class="units-wrapper">
84
- <div class="unit-container">
85
-
86
- ${this.hideDurationFields?.includes("minutes")?"":i`
87
- <div class="unit-group">
88
- <div class="duration-name">Minutes</div>
89
- <div class="duration-units">
90
- ${this.renderTimeValues("minutes",[1,5,15,30,45])}
91
- </div>
92
- </div>
93
- `}
94
-
95
- ${this.hideDurationFields?.includes("hours")?"":i`
96
- <div class="unit-group">
97
- <div class="duration-name">Hours</div>
98
- <div class="duration-units">
99
- ${this.renderTimeValues("hours",[1,2,3,6,8,12])}
100
- </div>
101
- </div>
102
- `}
103
-
104
- ${this.hideDurationFields?.includes("days")?"":i`
105
- <div class="unit-group">
106
- <div class="duration-name">Days</div>
107
- <div class="duration-units">
108
- ${this.renderTimeValues("days",[1,2,3,4,5,6])}
109
- </div>
110
- </div>
111
- `}
112
-
113
- ${this.hideDurationFields?.includes("weeks")?"":i`
114
- <div class="unit-group">
115
- <div class="duration-name">Weeks</div>
116
- <div class="duration-units">
117
- ${this.renderTimeValues("weeks",[1,2,4,6])}
118
- </div>
119
- </div>
120
- `}
121
-
122
- ${this.hideDurationFields?.includes("months")?"":i`
123
- <div class="unit-group">
124
- <div class="duration-name">Months</div>
125
- <div class="duration-units">
126
- ${this.renderTimeValues("months",[3,6,12,15])}
127
- </div>
128
- </div>
129
- `}
62
+ <div class="units-wrapper">
63
+ <div class="unit-container">
64
+ ${this.hideDurationFields?.includes("minutes")?"":i`
65
+ <div class="duration-name">Minutes</div>
66
+ <div class="duration-units">
67
+ ${this.renderTimeValues("minutes",[1,5,15,30,45])}
130
68
  </div>
131
- </div>
132
-
133
- ${this.range?i`
134
- <div>
135
- <div class="unit-input-container">
136
- <nile-input
137
- class="manual-input duration-input"
138
- label="Duration"
139
- inputmode="numeric"
140
- type="number"
141
- value="${this.selectedValue}"
142
- @nile-change="${this.handleDurationChange}"
143
- placeholder="Enter Value"
144
- ></nile-input>
145
-
146
- <nile-select
147
- class="manual-input time-input"
148
- label="Unit of time"
149
- value="${this.selectedUnit}"
150
- @nile-change="${this.handleUnitChange}"
151
- >
152
- <nile-option value="minutes" class="${this.hideDurationFields?.includes("minutes")?"hidden":""}">Minutes</nile-option>
153
- <nile-option value="hours" class="${this.hideDurationFields?.includes("hours")?"hidden":""}">Hours</nile-option>
154
- <nile-option value="days" class="${this.hideDurationFields?.includes("days")?"hidden":""}">Days</nile-option>
155
- <nile-option value="weeks" class="${this.hideDurationFields?.includes("weeks")?"hidden":""}">Weeks</nile-option>
156
- <nile-option value="months" class="${this.hideDurationFields?.includes("months")?"hidden":""}">Months</nile-option>
157
- </nile-select>
69
+ `}
70
+
71
+ ${this.hideDurationFields?.includes("hours")?"":i`
72
+ <div class="duration-name">Hours</div>
73
+ <div class="duration-units">
74
+ ${this.renderTimeValues("hours",[1,2,3,6,8,12])}
75
+ </div>
76
+ `}
77
+
78
+ ${this.hideDurationFields?.includes("days")?"":i`
79
+ <div class="duration-name">Days</div>
80
+ <div class="duration-units">
81
+ ${this.renderTimeValues("days",[1,2,3,4,5,6])}
82
+ </div>
83
+ `}
84
+
85
+ ${this.hideDurationFields?.includes("weeks")?"":i`
86
+ <div class="duration-name">Weeks</div>
87
+ <div class="duration-units">
88
+ ${this.renderTimeValues("weeks",[1,2,4,6])}
158
89
  </div>
90
+ `}
91
+
92
+ ${this.hideDurationFields?.includes("months")?"":i`
93
+ <div class="duration-name">Months</div>
94
+ <div class="duration-units">
95
+ ${this.renderTimeValues("months",[3,6,12,15])}
96
+ </div>
97
+ `}
159
98
  </div>
160
- `:""}
99
+ </div>
100
+
101
+ ${this.range?i`
102
+ <div>
103
+ <div class="unit-input-container">
104
+ <nile-input
105
+ class="manual-input duration-input"
106
+ label="Duration"
107
+ inputmode="numeric"
108
+ type="number"
109
+ value="${this.selectedValue}"
110
+ @nile-change="${this.handleDurationChange}"
111
+ placeholder="Enter Value"
112
+ ></nile-input>
113
+
114
+ <nile-select class="manual-input time-input"
115
+ label="Unit of time"
116
+ value="${this.selectedUnit}"
117
+ @nile-change="${this.handleUnitChange}"
118
+ >
119
+ <nile-option value="minutes" class="${this.hideDurationFields?.includes("minutes")?"hidden":""}">Minutes</nile-option>
120
+ <nile-option value="hours" class="${this.hideDurationFields?.includes("hours")?"hidden":""}"> Hours </nile-option>
121
+ <nile-option value="days" class="${this.hideDurationFields?.includes("days")?"hidden":""}">Days</nile-option>
122
+ <nile-option value="weeks" class="${this.hideDurationFields?.includes("weeks")?"hidden":""}">Weeks</nile-option>
123
+ <nile-option value="months" class="${this.hideDurationFields?.includes("months")?"hidden":""}"> Months </nile-option>
124
+ </nile-select>
125
+ </div>
126
+ </div>
127
+ `:""}
161
128
  `}renderTimeValues(t,e){return e.map((e=>i`
162
129
  <div
163
130
  class="duration__value ${this.selectedUnit===t&&this.selectedValue===e?"duration__value--selected":""}"
164
131
  @click=${i=>this.handleTimeValueClick(t,e,i)}
165
- @keydown="${i=>{"Enter"!==i.key&&" "!==i.key||this.handleTimeValueClick(t,e,i)}}"
166
132
  >${e}
167
- </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`
133
+ </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),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`
168
134
  <div class="calendar">
169
135
  <div class="calendar-header">
170
136
  <nile-icon
@@ -172,87 +138,18 @@ import{__decorate as t}from"tslib";import{html as i,nothing as e}from"lit";impor
172
138
  name="var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))"
173
139
  method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
174
140
  color="black"
175
- role="button"
176
- tabindex="${this.isPrevDisabled()?"-1":"0"}"
177
- @keydown="${t=>{"Enter"!==t.key&&" "!==t.key||this.prevMonth()}}"
178
141
  @click="${this.prevMonth}"
179
142
  >
180
143
  </nile-icon>
181
- <div class="calendar-header__center">
182
-
183
- ${this.showMonthDropdown||this.showYearDropdown?i`
184
- ${this.showMonthDropdown?i`
185
- <nile-dropdown class="month-dropdown">
186
- <span
187
- slot="trigger"
188
- class="calendar-header__trigger month-trigger"
189
- role="button"
190
- >
191
- ${new Date(t,s).toLocaleString("default",{month:"long"})}
192
- <nile-icon name="arrowdropdown" color="black" class="calendar-header__caret"></nile-icon>
193
- </span>
194
- <nile-menu>
195
- <div class="month-scroll-wrapper">
196
- ${this.monthNames.map(((t,e)=>i`
197
- <nile-menu-item
198
- class="month-menu-item"
199
- ?selected="${e===s}"
200
- @click="${()=>this.onMonthSelected(e)}"
201
- >
202
- ${t}
203
- </nile-menu-item>
204
- `))}
205
- </div>
206
- </nile-menu>
207
- </nile-dropdown>
208
- `:i`
209
- <span
210
- >${new Date(t,s).toLocaleString("default",{month:"long"})}</span
211
- >
212
- `}
213
- ${this.showYearDropdown?i`
214
- <nile-dropdown class="year-dropdown">
215
- <span
216
- slot="trigger"
217
- class="calendar-header__trigger"
218
- role="button"
219
- >
220
- ${t}
221
- <nile-icon name="arrowdropdown" color="black" class="calendar-header__caret"></nile-icon>
222
- </span>
223
- <nile-menu>
224
- <div class="year-scroll-wrapper">
225
- ${this.yearOptions.map((e=>i`
226
- <nile-menu-item
227
- class="year-menu-item"
228
- ?selected="${e===t}"
229
- @click="${()=>this.onYearSelected(e)}"
230
- >
231
- ${e}
232
- </nile-menu-item>
233
- `))}
234
- </div>
235
- </nile-menu>
236
- </nile-dropdown>
237
- `:i`
238
- <span>${t}</span>
239
- `}
240
- `:i`
241
- <span
242
- >${new Date(t,s).toLocaleString("default",{month:"long"})}
243
- ${t}</span
244
- >
245
- `}
246
- </div>
247
-
144
+ <span
145
+ >${new Date(t,s).toLocaleString("default",{month:"long"})}
146
+ ${t}</span
147
+ >
248
148
  <nile-icon
249
149
  class="calendar-header__month-navigation"
250
150
  name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))"
251
151
  method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
252
152
  color="black"
253
- role="button"
254
- tabindex="${this.isNextDisabled()?"-1":"0"}"
255
- @keydown="${t=>{"Enter"!==t.key&&" "!==t.key||this.nextMonth()}}"
256
153
  @click="${this.nextMonth}"
257
154
  >
258
155
  </nile-icon>
@@ -266,19 +163,16 @@ ${this.showMonthDropdown||this.showYearDropdown?i`
266
163
  <div class="day_name">Fr</div>
267
164
  <div class="day_name">Sa</div>
268
165
 
269
- ${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`
166
+ ${u.map(((a,l)=>{const r=l>=o.length&&l<o.length+n.length,d=v(a,s,t,r),c={day_date:!0,"not-allowed":!this.isAllowedDate(a,s,t),"in-range":p(a,s,t,r),filler:!r};return d&&(c[d]=!0),i`
270
167
  <div
271
- part="calendar-day-${a}"
272
- class=${r(c)}
273
- tabindex="${h&&this.isAllowedDate(a,s,t)?"0":"-1"}"
274
- @keydown="${i=>{"Enter"!==i.key&&" "!==i.key||this.selectDate(a,s,t)}}"
275
- @click="${()=>{h&&this.selectDate(a,s,t)}}"
168
+ class=${h(c)}
169
+ @click="${()=>{r&&this.selectDate(a,s,t)}}"
276
170
  >
277
171
  <span style="position:relative;">
278
172
  ${a}
279
- ${((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}
173
+ ${((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}
280
174
  </span>
281
175
  </div>`}))}
282
176
  </div>
283
177
  </div>
284
- `}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.selectedUnit=void 0,this.selectedValue=void 0,this.range&&"relative"===this.type&&(this.selectedUnit=void 0,this.selectedValue=void 0)):this.value=null,this.requestUpdate(),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([s({type:Number,attribute:!0,reflect:!0})],o.prototype,"startYear",void 0),t([s({type:Number,attribute:!0,reflect:!0})],o.prototype,"endYear",void 0),t([s({type:Boolean,attribute:!0,reflect:!0})],o.prototype,"showMonthDropdown",void 0),t([s({type:Boolean,attribute:!0,reflect:!0})],o.prototype,"showYearDropdown",void 0),t([s({type:String,reflect:!0,attribute:!0})],o.prototype,"dateFormat",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([h("allowedDates")],o.prototype,"checkValidAllowedDate",null),o=t([a("nile-calendar")],o);export{o as N};
178
+ `}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};