@up_si_vale/sivale-componentes-angular 1.0.0
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/README.md +81 -0
- package/ng-package.json +9 -0
- package/package.json +40 -0
- package/src/lib/atoms/button/button.component.html +21 -0
- package/src/lib/atoms/button/button.component.scss +242 -0
- package/src/lib/atoms/button/button.component.ts +43 -0
- package/src/lib/atoms/checkbox/checkbox.component.scss +131 -0
- package/src/lib/atoms/checkbox/checkbox.component.ts +130 -0
- package/src/lib/atoms/date-picker/date-picker.component.html +295 -0
- package/src/lib/atoms/date-picker/date-picker.component.scss +1002 -0
- package/src/lib/atoms/date-picker/date-picker.component.ts +942 -0
- package/src/lib/atoms/input/input.component.ts +239 -0
- package/src/lib/atoms/loader/loader.component.scss +144 -0
- package/src/lib/atoms/loader/loader.component.ts +44 -0
- package/src/lib/atoms/radio/radio.component.scss +115 -0
- package/src/lib/atoms/radio/radio.component.ts +103 -0
- package/src/lib/atoms/textarea/textarea.component.ts +155 -0
- package/src/lib/directives/asset-source.directive.ts +64 -0
- package/src/lib/directives/icon-source.directive.ts +74 -0
- package/src/lib/directives/no-leading-space.directive.ts +18 -0
- package/src/lib/directives/only-letters.directive.ts +21 -0
- package/src/lib/directives/only-number.directive.ts +15 -0
- package/src/lib/directives/rfc.directive.ts +60 -0
- package/src/lib/directives/tooltip.directive.ts +211 -0
- package/src/lib/models/snackbar.models.ts +16 -0
- package/src/lib/molecules/copy-input/copy-input.component.html +29 -0
- package/src/lib/molecules/copy-input/copy-input.component.scss +101 -0
- package/src/lib/molecules/copy-input/copy-input.component.ts +41 -0
- package/src/lib/molecules/multiselect/multiselect.component.scss +298 -0
- package/src/lib/molecules/multiselect/multiselect.component.ts +487 -0
- package/src/lib/molecules/option/option.component.ts +45 -0
- package/src/lib/molecules/phone-input/phone-input.component.scss +78 -0
- package/src/lib/molecules/phone-input/phone-input.component.ts +43 -0
- package/src/lib/molecules/select/select.component.ts +482 -0
- package/src/lib/molecules/snackbar/snackbar.component.scss +201 -0
- package/src/lib/molecules/snackbar/snackbar.component.ts +321 -0
- package/src/lib/services/snackbar.service.ts +103 -0
- package/src/lib/tokens/asset-base-url.token.ts +10 -0
- package/src/public-api.ts +38 -0
- package/tsconfig.json +31 -0
|
@@ -0,0 +1,295 @@
|
|
|
1
|
+
<div class="date-picker-wrapper">
|
|
2
|
+
<label *ngIf="label" [for]="id">{{ label }}</label>
|
|
3
|
+
|
|
4
|
+
<div class="date-picker-container">
|
|
5
|
+
<div
|
|
6
|
+
#trigger
|
|
7
|
+
class="date-picker-input"
|
|
8
|
+
[class.error]="hasError"
|
|
9
|
+
[class.disabled]="disabled"
|
|
10
|
+
[class.open]="isOpen"
|
|
11
|
+
[class.icon-right]="iconPosition === 'right'"
|
|
12
|
+
(click)="toggleDropdown($event)">
|
|
13
|
+
|
|
14
|
+
<svg *ngIf="iconPosition === 'left'" class="calendar-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
15
|
+
<path d="M6.66667 1.66667V4.16667M13.3333 1.66667V4.16667M2.5 7.5H17.5M4.16667 3.33333H15.8333C16.7538 3.33333 17.5 4.07953 17.5 5V16.6667C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6667V5C2.5 4.07953 3.24619 3.33333 4.16667 3.33333Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
16
|
+
</svg>
|
|
17
|
+
|
|
18
|
+
<span class="date-picker-placeholder" *ngIf="!getDisplayValue()">
|
|
19
|
+
{{ placeholder }}
|
|
20
|
+
</span>
|
|
21
|
+
<span class="date-picker-value" *ngIf="getDisplayValue()">
|
|
22
|
+
{{ getDisplayValue() }}
|
|
23
|
+
</span>
|
|
24
|
+
|
|
25
|
+
<svg *ngIf="iconPosition === 'right'" class="calendar-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
26
|
+
<path d="M6.66667 1.66667V4.16667M13.3333 1.66667V4.16667M2.5 7.5H17.5M4.16667 3.33333H15.8333C16.7538 3.33333 17.5 4.07953 17.5 5V16.6667C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6667V5C2.5 4.07953 3.24619 3.33333 4.16667 3.33333Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
27
|
+
</svg>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
|
|
31
|
+
<div *ngIf="hasError && errorMessage" class="field-error">
|
|
32
|
+
{{ errorMessage }}
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
<!-- Dropdown content (rendered with fixed position) -->
|
|
37
|
+
<div *ngIf="isOpen" class="date-picker-overlay">
|
|
38
|
+
<div #dropdown class="date-picker-dropdown" [class.open]="isOpen" [class.range-mode]="rangeMode" [ngStyle]="getDropdownStyle()">
|
|
39
|
+
<div class="date-picker-content">
|
|
40
|
+
<!-- Sidebar with filters (only for range mode) -->
|
|
41
|
+
<div class="filter-sidebar" *ngIf="rangeMode">
|
|
42
|
+
<div
|
|
43
|
+
*ngFor="let option of filterOptions"
|
|
44
|
+
class="filter-option"
|
|
45
|
+
[class.active]="selectedFilter === option.value"
|
|
46
|
+
(click)="selectFilter(option.value)">
|
|
47
|
+
{{ option.label }}
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<!-- Main content (calendars + footer) -->
|
|
52
|
+
<div class="date-picker-main">
|
|
53
|
+
<!-- Calendars -->
|
|
54
|
+
<div class="calendars-container">
|
|
55
|
+
<!-- Left Calendar (or single calendar in single mode) -->
|
|
56
|
+
<div class="calendar">
|
|
57
|
+
<div class="calendar-header">
|
|
58
|
+
<button
|
|
59
|
+
type="button"
|
|
60
|
+
class="nav-button"
|
|
61
|
+
[disabled]="!canNavigatePreviousMonth()"
|
|
62
|
+
[class.disabled]="!canNavigatePreviousMonth()"
|
|
63
|
+
(click)="previousMonth()">
|
|
64
|
+
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
65
|
+
<path d="M7.5 2L3.5 6L7.5 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
66
|
+
</svg>
|
|
67
|
+
</button>
|
|
68
|
+
<div class="month-year-selector">
|
|
69
|
+
<button type="button" class="month-year" (click)="toggleLeftMonthPicker($event)">
|
|
70
|
+
{{ getMonthYear(leftMonthDate) }}
|
|
71
|
+
</button>
|
|
72
|
+
|
|
73
|
+
<!-- Month/Year Picker Dropdown -->
|
|
74
|
+
<div class="month-year-picker" *ngIf="showLeftMonthPicker" (click)="$event.stopPropagation()">
|
|
75
|
+
<div class="picker-section">
|
|
76
|
+
<div class="picker-title">Mes</div>
|
|
77
|
+
<div class="months-grid">
|
|
78
|
+
<button
|
|
79
|
+
type="button"
|
|
80
|
+
*ngFor="let month of months; let i = index"
|
|
81
|
+
class="month-option"
|
|
82
|
+
[class.active]="i === leftMonthDate.getMonth()"
|
|
83
|
+
[class.disabled]="isMonthDisabled(i, leftMonthDate)"
|
|
84
|
+
[disabled]="isMonthDisabled(i, leftMonthDate)"
|
|
85
|
+
(click)="selectLeftMonth(i, $event)">
|
|
86
|
+
{{ month.substring(0, 3) }}
|
|
87
|
+
</button>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
<div class="picker-section">
|
|
91
|
+
<div class="picker-header">
|
|
92
|
+
<button
|
|
93
|
+
type="button"
|
|
94
|
+
class="year-nav-button"
|
|
95
|
+
[disabled]="!canNavigateLeftYearsPrevious()"
|
|
96
|
+
[class.disabled]="!canNavigateLeftYearsPrevious()"
|
|
97
|
+
(click)="previousLeftYearPage($event)">
|
|
98
|
+
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
99
|
+
<path d="M6.25 2.5L3.75 5L6.25 7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
100
|
+
</svg>
|
|
101
|
+
</button>
|
|
102
|
+
<div class="picker-title">{{ getLeftYearRangeLabel() }}</div>
|
|
103
|
+
<button
|
|
104
|
+
type="button"
|
|
105
|
+
class="year-nav-button"
|
|
106
|
+
[disabled]="!canNavigateLeftYearsNext()"
|
|
107
|
+
[class.disabled]="!canNavigateLeftYearsNext()"
|
|
108
|
+
(click)="nextLeftYearPage($event)">
|
|
109
|
+
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
110
|
+
<path d="M3.75 2.5L6.25 5L3.75 7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
111
|
+
</svg>
|
|
112
|
+
</button>
|
|
113
|
+
</div>
|
|
114
|
+
<div class="years-grid">
|
|
115
|
+
<button
|
|
116
|
+
type="button"
|
|
117
|
+
*ngFor="let year of getLeftYears()"
|
|
118
|
+
class="year-option"
|
|
119
|
+
[class.active]="year === leftMonthDate.getFullYear()"
|
|
120
|
+
[class.disabled]="isYearDisabled(year)"
|
|
121
|
+
[disabled]="isYearDisabled(year)"
|
|
122
|
+
(click)="selectLeftYear(year, $event)">
|
|
123
|
+
{{ year }}
|
|
124
|
+
</button>
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
<button
|
|
130
|
+
type="button"
|
|
131
|
+
class="nav-button"
|
|
132
|
+
[disabled]="!canNavigateNextMonth()"
|
|
133
|
+
[class.disabled]="!canNavigateNextMonth()"
|
|
134
|
+
(click)="nextMonth()">
|
|
135
|
+
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
136
|
+
<path d="M4.5 2L8.5 6L4.5 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
137
|
+
</svg>
|
|
138
|
+
</button>
|
|
139
|
+
</div>
|
|
140
|
+
|
|
141
|
+
<div class="calendar-grid">
|
|
142
|
+
<div class="weekday-header" *ngFor="let day of weekDays">
|
|
143
|
+
{{ day }}
|
|
144
|
+
</div>
|
|
145
|
+
|
|
146
|
+
<div
|
|
147
|
+
*ngFor="let day of leftCalendarDays; trackBy: trackByDate"
|
|
148
|
+
class="calendar-day"
|
|
149
|
+
[class.other-month]="!day.isCurrentMonth"
|
|
150
|
+
[class.today]="day.isToday"
|
|
151
|
+
[class.selected]="day.isSelected"
|
|
152
|
+
[class.in-range]="rangeMode && isInRange(day.date)"
|
|
153
|
+
[class.range-start]="day.isRangeStart"
|
|
154
|
+
[class.range-end]="day.isRangeEnd"
|
|
155
|
+
[class.disabled]="day.isDisabled"
|
|
156
|
+
(click)="onDayClick(day)"
|
|
157
|
+
(mouseenter)="onDayHover(day)"
|
|
158
|
+
(mouseleave)="onDayLeave()">
|
|
159
|
+
<span>{{ day.date.getDate() }}</span>
|
|
160
|
+
</div>
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
|
|
164
|
+
<!-- Right Calendar (only for range mode) -->
|
|
165
|
+
<div class="calendar" *ngIf="rangeMode">
|
|
166
|
+
<div class="calendar-header">
|
|
167
|
+
<div class="nav-button-placeholder"></div>
|
|
168
|
+
<div class="month-year-selector">
|
|
169
|
+
<button type="button" class="month-year" (click)="toggleRightMonthPicker($event)">
|
|
170
|
+
{{ getMonthYear(rightMonthDate) }}
|
|
171
|
+
</button>
|
|
172
|
+
|
|
173
|
+
<!-- Month/Year Picker Dropdown -->
|
|
174
|
+
<div class="month-year-picker" *ngIf="showRightMonthPicker" (click)="$event.stopPropagation()">
|
|
175
|
+
<div class="picker-section">
|
|
176
|
+
<div class="picker-title">Mes</div>
|
|
177
|
+
<div class="months-grid">
|
|
178
|
+
<button
|
|
179
|
+
type="button"
|
|
180
|
+
*ngFor="let month of months; let i = index"
|
|
181
|
+
class="month-option"
|
|
182
|
+
[class.active]="i === rightMonthDate.getMonth()"
|
|
183
|
+
[class.disabled]="isMonthDisabled(i, rightMonthDate)"
|
|
184
|
+
[disabled]="isMonthDisabled(i, rightMonthDate)"
|
|
185
|
+
(click)="selectRightMonth(i, $event)">
|
|
186
|
+
{{ month.substring(0, 3) }}
|
|
187
|
+
</button>
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
<div class="picker-section">
|
|
191
|
+
<div class="picker-header">
|
|
192
|
+
<button
|
|
193
|
+
type="button"
|
|
194
|
+
class="year-nav-button"
|
|
195
|
+
[disabled]="!canNavigateRightYearsPrevious()"
|
|
196
|
+
[class.disabled]="!canNavigateRightYearsPrevious()"
|
|
197
|
+
(click)="previousRightYearPage($event)">
|
|
198
|
+
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
199
|
+
<path d="M6.25 2.5L3.75 5L6.25 7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
200
|
+
</svg>
|
|
201
|
+
</button>
|
|
202
|
+
<div class="picker-title">{{ getRightYearRangeLabel() }}</div>
|
|
203
|
+
<button
|
|
204
|
+
type="button"
|
|
205
|
+
class="year-nav-button"
|
|
206
|
+
[disabled]="!canNavigateRightYearsNext()"
|
|
207
|
+
[class.disabled]="!canNavigateRightYearsNext()"
|
|
208
|
+
(click)="nextRightYearPage($event)">
|
|
209
|
+
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
210
|
+
<path d="M3.75 2.5L6.25 5L3.75 7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
211
|
+
</svg>
|
|
212
|
+
</button>
|
|
213
|
+
</div>
|
|
214
|
+
<div class="years-grid">
|
|
215
|
+
<button
|
|
216
|
+
type="button"
|
|
217
|
+
*ngFor="let year of getRightYears()"
|
|
218
|
+
class="year-option"
|
|
219
|
+
[class.active]="year === rightMonthDate.getFullYear()"
|
|
220
|
+
[class.disabled]="isYearDisabled(year)"
|
|
221
|
+
[disabled]="isYearDisabled(year)"
|
|
222
|
+
(click)="selectRightYear(year, $event)">
|
|
223
|
+
{{ year }}
|
|
224
|
+
</button>
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
</div>
|
|
228
|
+
</div>
|
|
229
|
+
<button
|
|
230
|
+
type="button"
|
|
231
|
+
class="nav-button"
|
|
232
|
+
[disabled]="!canNavigateNextMonth()"
|
|
233
|
+
[class.disabled]="!canNavigateNextMonth()"
|
|
234
|
+
(click)="nextMonth()">
|
|
235
|
+
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
236
|
+
<path d="M4.5 2L8.5 6L4.5 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
237
|
+
</svg>
|
|
238
|
+
</button>
|
|
239
|
+
</div>
|
|
240
|
+
|
|
241
|
+
<div class="calendar-grid">
|
|
242
|
+
<div class="weekday-header" *ngFor="let day of weekDays">
|
|
243
|
+
{{ day }}
|
|
244
|
+
</div>
|
|
245
|
+
|
|
246
|
+
<div
|
|
247
|
+
*ngFor="let day of rightCalendarDays; trackBy: trackByDate"
|
|
248
|
+
class="calendar-day"
|
|
249
|
+
[class.other-month]="!day.isCurrentMonth"
|
|
250
|
+
[class.today]="day.isToday"
|
|
251
|
+
[class.selected]="day.isSelected"
|
|
252
|
+
[class.in-range]="isInRange(day.date)"
|
|
253
|
+
[class.range-start]="day.isRangeStart"
|
|
254
|
+
[class.range-end]="day.isRangeEnd"
|
|
255
|
+
[class.disabled]="day.isDisabled"
|
|
256
|
+
(click)="onDayClick(day)"
|
|
257
|
+
(mouseenter)="onDayHover(day)"
|
|
258
|
+
(mouseleave)="onDayLeave()">
|
|
259
|
+
<span>{{ day.date.getDate() }}</span>
|
|
260
|
+
</div>
|
|
261
|
+
</div>
|
|
262
|
+
</div>
|
|
263
|
+
</div>
|
|
264
|
+
|
|
265
|
+
<!-- Footer with dates and actions (only for range mode) -->
|
|
266
|
+
<div class="footer" *ngIf="rangeMode">
|
|
267
|
+
<div class="selected-dates">
|
|
268
|
+
<div class="date-display">
|
|
269
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
270
|
+
<path d="M5.33333 1.33333V3.33333M10.6667 1.33333V3.33333M2 6H14M3.33333 2.66667H12.6667C13.403 2.66667 14 3.26362 14 4V13.3333C14 14.0697 13.403 14.6667 12.6667 14.6667H3.33333C2.59695 14.6667 2 14.0697 2 13.3333V4C2 3.26362 2.59695 2.66667 3.33333 2.66667Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
271
|
+
</svg>
|
|
272
|
+
<span class="date-text">{{ getStartDateDisplay() }}</span>
|
|
273
|
+
</div>
|
|
274
|
+
<span class="date-separator">-</span>
|
|
275
|
+
<div class="date-display">
|
|
276
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
277
|
+
<path d="M5.33333 1.33333V3.33333M10.6667 1.33333V3.33333M2 6H14M3.33333 2.66667H12.6667C13.403 2.66667 14 3.26362 14 4V13.3333C14 14.0697 13.403 14.6667 12.6667 14.6667H3.33333C2.59695 14.6667 2 14.0697 2 13.3333V4C2 3.26362 2.59695 2.66667 3.33333 2.66667Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
278
|
+
</svg>
|
|
279
|
+
<span class="date-text">{{ getEndDateDisplay() }}</span>
|
|
280
|
+
</div>
|
|
281
|
+
</div>
|
|
282
|
+
|
|
283
|
+
<div class="action-buttons">
|
|
284
|
+
<button type="button" class="btn-cancel" (click)="cancel()">
|
|
285
|
+
Cancelar
|
|
286
|
+
</button>
|
|
287
|
+
<button type="button" class="btn-apply" (click)="apply()">
|
|
288
|
+
Aplicar
|
|
289
|
+
</button>
|
|
290
|
+
</div>
|
|
291
|
+
</div>
|
|
292
|
+
</div>
|
|
293
|
+
</div>
|
|
294
|
+
</div>
|
|
295
|
+
</div>
|