otimus-library 0.3.62 → 0.3.64
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/fesm2022/otimus-library.mjs +15 -5
- package/fesm2022/otimus-library.mjs.map +1 -1
- package/index.d.ts +3 -1
- package/package.json +1 -1
|
@@ -2966,6 +2966,7 @@ class OcCalendarComponent {
|
|
|
2966
2966
|
this.ocDateSelected = new EventEmitter();
|
|
2967
2967
|
this.ocRangeSelected = new EventEmitter();
|
|
2968
2968
|
this.ocMultipleDatesSelected = new EventEmitter();
|
|
2969
|
+
this.ocCurrentDateChange = new EventEmitter();
|
|
2969
2970
|
this.currentMonth = new Date();
|
|
2970
2971
|
this.weeks = [];
|
|
2971
2972
|
this.weekDays = [];
|
|
@@ -2979,7 +2980,8 @@ class OcCalendarComponent {
|
|
|
2979
2980
|
changes['ocEndDate'] ||
|
|
2980
2981
|
changes['ocMinDate'] ||
|
|
2981
2982
|
changes['ocMaxDate'] ||
|
|
2982
|
-
changes['ocSelectedDates']
|
|
2983
|
+
changes['ocSelectedDates'] ||
|
|
2984
|
+
changes['ocCurrentDate']) {
|
|
2983
2985
|
this.generateCalendar();
|
|
2984
2986
|
}
|
|
2985
2987
|
}
|
|
@@ -2997,6 +2999,8 @@ class OcCalendarComponent {
|
|
|
2997
2999
|
this.ocDateSelected.emit(day.date);
|
|
2998
3000
|
}
|
|
2999
3001
|
else if (this.ocSelectionMode === 'multiple') {
|
|
3002
|
+
this.ocCurrentDate = day.date;
|
|
3003
|
+
this.ocCurrentDateChange.emit(day.date);
|
|
3000
3004
|
const existingIndex = this.ocSelectedDates.findIndex((d) => this.isSameDate(d, day.date));
|
|
3001
3005
|
if (existingIndex >= 0) {
|
|
3002
3006
|
this.ocSelectedDates.splice(existingIndex, 1);
|
|
@@ -3058,12 +3062,14 @@ class OcCalendarComponent {
|
|
|
3058
3062
|
const date = new Date(startDate);
|
|
3059
3063
|
date.setDate(startDate.getDate() + week * 7 + day);
|
|
3060
3064
|
const isMultipleSelected = this.isDateInMultipleSelection(date);
|
|
3061
|
-
const
|
|
3065
|
+
const isCurrentDate = this.ocCurrentDate
|
|
3066
|
+
? this.isSameDate(date, this.ocCurrentDate)
|
|
3067
|
+
: this.isLastSelectedDate(date);
|
|
3062
3068
|
days.push({
|
|
3063
3069
|
date,
|
|
3064
3070
|
isCurrentMonth: date.getMonth() === this.currentMonth.getMonth(),
|
|
3065
3071
|
isSelected: this.ocSelectionMode === 'multiple'
|
|
3066
|
-
?
|
|
3072
|
+
? isCurrentDate
|
|
3067
3073
|
: this.isSameDate(date, this.ocStartDate) ||
|
|
3068
3074
|
this.isSameDate(date, this.ocEndDate),
|
|
3069
3075
|
isInRange: this.isDateInRange(date),
|
|
@@ -3071,7 +3077,7 @@ class OcCalendarComponent {
|
|
|
3071
3077
|
isToday: this.isSameDate(date, today),
|
|
3072
3078
|
isPreviouslySelected: this.ocSelectionMode === 'multiple' &&
|
|
3073
3079
|
isMultipleSelected &&
|
|
3074
|
-
!
|
|
3080
|
+
!isCurrentDate,
|
|
3075
3081
|
});
|
|
3076
3082
|
}
|
|
3077
3083
|
this.weeks.push(days);
|
|
@@ -3149,7 +3155,7 @@ class OcCalendarComponent {
|
|
|
3149
3155
|
this.weekDays = weekDaysMap[this.ocLanguage];
|
|
3150
3156
|
}
|
|
3151
3157
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcCalendarComponent, deps: [{ token: StyleThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3152
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcCalendarComponent, isStandalone: true, selector: "oc-calendar", inputs: { ocSelectionMode: "ocSelectionMode", ocStartDate: "ocStartDate", ocEndDate: "ocEndDate", ocSelectedDates: "ocSelectedDates", ocMinDate: "ocMinDate", ocMaxDate: "ocMaxDate", ocWeekStartsOn: "ocWeekStartsOn", ocWidth: "ocWidth", ocMaxWidth: "ocMaxWidth", ocLanguage: "ocLanguage", ocSelectWholeWeek: "ocSelectWholeWeek", ocSelectDaysCount: "ocSelectDaysCount", ocStyle: "ocStyle" }, outputs: { ocDateSelected: "ocDateSelected", ocRangeSelected: "ocRangeSelected", ocMultipleDatesSelected: "ocMultipleDatesSelected" }, host: { properties: { "style.width": "this.computedWidth", "style.max-width": "this.computedMaxWidth" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"oc-calendar\" [ngClass]=\"ocStyle\">\n <!-- Existing date selector -->\n <div class=\"oc-calendar-header\">\n <oc-date-select\n [ocValue]=\"(currentMonth | date: 'yyyy-MM-dd')!\"\n ocType=\"month\"\n ocSkipType=\"month\"\n (ocChange)=\"onMonthChange($event)\"\n />\n </div>\n\n <!-- Weekdays -->\n <div class=\"oc-calendar-weekdays\">\n @for (d of weekDays; track d) {\n <span>{{ d }}</span>\n }\n </div>\n\n <!-- Calendar grid -->\n <div class=\"oc-calendar-weeks\">\n @for (week of weeks; track $index) {\n <div class=\"oc-calendar-week\">\n @for (day of week; track day.date.getTime()) {\n <button\n class=\"oc-calendar-day\"\n [class.is-outside]=\"!day.isCurrentMonth\"\n [class.is-selected]=\"day.isSelected\"\n [class.is-in-range]=\"day.isInRange\"\n [class.is-disabled]=\"day.isDisabled\"\n [class.is-today]=\"day.isToday\"\n [class.is-previously-selected]=\"day.isPreviouslySelected\"\n [disabled]=\"day.isDisabled\"\n (click)=\"selectDay(day)\"\n >\n {{ day.date.getDate() }}\n </button>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".shui.oc-calendar .oc-calendar-weekdays,.shui .oc-calendar .oc-calendar-weekdays{color:#7d7d7d}.shui.oc-calendar .oc-calendar-day,.shui .oc-calendar .oc-calendar-day{color:#000;position:relative;border-radius:50%}.shui.oc-calendar .oc-calendar-day.is-outside,.shui .oc-calendar .oc-calendar-day.is-outside{color:#c8c8c8;opacity:.5}.shui.oc-calendar .oc-calendar-day.is-today,.shui .oc-calendar .oc-calendar-day.is-today{color:#0169b2;font-weight:700}.shui.oc-calendar .oc-calendar-day.is-selected,.shui .oc-calendar .oc-calendar-day.is-selected{background:#0169b2;color:#fff}.shui.oc-calendar .oc-calendar-day.is-previously-selected,.shui .oc-calendar .oc-calendar-day.is-previously-selected{background:#0169b24d;color:#0169b2}.shui.oc-calendar .oc-calendar-day.is-in-range,.shui .oc-calendar .oc-calendar-day.is-in-range{background:#0000001a;color:#000}.shui.oc-calendar .oc-calendar-day:hover:not(.is-selected):not(.is-previously-selected),.shui .oc-calendar .oc-calendar-day:hover:not(.is-selected):not(.is-previously-selected){background:#ebebeb}:host{display:block;width:320px}.oc-calendar{width:100%;font-family:system-ui,sans-serif}.oc-calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.oc-calendar-header button{border:none;background:none;font-size:20px;cursor:pointer}.oc-calendar-weekdays,.oc-calendar-week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}.oc-calendar-weekdays{font-size:12px;opacity:.6;margin-bottom:4px}.oc-calendar-weeks{display:flex;flex-direction:column;gap:4px}.oc-calendar-day{aspect-ratio:1/1;width:100%;border-radius:8px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}.oc-calendar-day.is-outside{opacity:.3}.oc-calendar-day.is-today{color:#5505a2;font-weight:700}.oc-calendar-day.is-selected{background:#5505a2;color:#fff}.oc-calendar-day.is-previously-selected{background:#5505a24d;color:#5505a2}.oc-calendar-day.is-in-range{background:#d1d5db}.oc-calendar-day:hover:not(.is-selected):not(.is-previously-selected){background:#00000014}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: OcDateSelectComponent, selector: "oc-date-select", inputs: ["ocValue", "ocType", "ocSkipType", "ocLanguage", "ocMaxDate", "ocMinDate"], outputs: ["ocValueChange", "ocChange"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
|
|
3158
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcCalendarComponent, isStandalone: true, selector: "oc-calendar", inputs: { ocSelectionMode: "ocSelectionMode", ocStartDate: "ocStartDate", ocEndDate: "ocEndDate", ocSelectedDates: "ocSelectedDates", ocCurrentDate: "ocCurrentDate", ocMinDate: "ocMinDate", ocMaxDate: "ocMaxDate", ocWeekStartsOn: "ocWeekStartsOn", ocWidth: "ocWidth", ocMaxWidth: "ocMaxWidth", ocLanguage: "ocLanguage", ocSelectWholeWeek: "ocSelectWholeWeek", ocSelectDaysCount: "ocSelectDaysCount", ocStyle: "ocStyle" }, outputs: { ocDateSelected: "ocDateSelected", ocRangeSelected: "ocRangeSelected", ocMultipleDatesSelected: "ocMultipleDatesSelected", ocCurrentDateChange: "ocCurrentDateChange" }, host: { properties: { "style.width": "this.computedWidth", "style.max-width": "this.computedMaxWidth" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"oc-calendar\" [ngClass]=\"ocStyle\">\n <!-- Existing date selector -->\n <div class=\"oc-calendar-header\">\n <oc-date-select\n [ocValue]=\"(currentMonth | date: 'yyyy-MM-dd')!\"\n ocType=\"month\"\n ocSkipType=\"month\"\n (ocChange)=\"onMonthChange($event)\"\n />\n </div>\n\n <!-- Weekdays -->\n <div class=\"oc-calendar-weekdays\">\n @for (d of weekDays; track d) {\n <span>{{ d }}</span>\n }\n </div>\n\n <!-- Calendar grid -->\n <div class=\"oc-calendar-weeks\">\n @for (week of weeks; track $index) {\n <div class=\"oc-calendar-week\">\n @for (day of week; track day.date.getTime()) {\n <button\n class=\"oc-calendar-day\"\n [class.is-outside]=\"!day.isCurrentMonth\"\n [class.is-selected]=\"day.isSelected\"\n [class.is-in-range]=\"day.isInRange\"\n [class.is-disabled]=\"day.isDisabled\"\n [class.is-today]=\"day.isToday\"\n [class.is-previously-selected]=\"day.isPreviouslySelected\"\n [disabled]=\"day.isDisabled\"\n (click)=\"selectDay(day)\"\n >\n {{ day.date.getDate() }}\n </button>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".shui.oc-calendar .oc-calendar-weekdays,.shui .oc-calendar .oc-calendar-weekdays{color:#7d7d7d}.shui.oc-calendar .oc-calendar-day,.shui .oc-calendar .oc-calendar-day{color:#000;position:relative;border-radius:50%}.shui.oc-calendar .oc-calendar-day.is-outside,.shui .oc-calendar .oc-calendar-day.is-outside{color:#c8c8c8;opacity:.5}.shui.oc-calendar .oc-calendar-day.is-today,.shui .oc-calendar .oc-calendar-day.is-today{color:#0169b2;font-weight:700}.shui.oc-calendar .oc-calendar-day.is-selected,.shui .oc-calendar .oc-calendar-day.is-selected{background:#0169b2;color:#fff}.shui.oc-calendar .oc-calendar-day.is-previously-selected,.shui .oc-calendar .oc-calendar-day.is-previously-selected{background:#0169b24d;color:#0169b2}.shui.oc-calendar .oc-calendar-day.is-in-range,.shui .oc-calendar .oc-calendar-day.is-in-range{background:#0000001a;color:#000}.shui.oc-calendar .oc-calendar-day:hover:not(.is-selected):not(.is-previously-selected),.shui .oc-calendar .oc-calendar-day:hover:not(.is-selected):not(.is-previously-selected){background:#ebebeb}:host{display:block;width:320px}.oc-calendar{width:100%;font-family:system-ui,sans-serif}.oc-calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.oc-calendar-header button{border:none;background:none;font-size:20px;cursor:pointer}.oc-calendar-weekdays,.oc-calendar-week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}.oc-calendar-weekdays{font-size:12px;opacity:.6;margin-bottom:4px}.oc-calendar-weeks{display:flex;flex-direction:column;gap:4px}.oc-calendar-day{aspect-ratio:1/1;width:100%;border-radius:8px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}.oc-calendar-day.is-outside{opacity:.3}.oc-calendar-day.is-today{color:#5505a2;font-weight:700}.oc-calendar-day.is-selected{background:#5505a2;color:#fff}.oc-calendar-day.is-previously-selected{background:#5505a24d;color:#5505a2}.oc-calendar-day.is-in-range{background:#d1d5db}.oc-calendar-day:hover:not(.is-selected):not(.is-previously-selected){background:#00000014}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: OcDateSelectComponent, selector: "oc-date-select", inputs: ["ocValue", "ocType", "ocSkipType", "ocLanguage", "ocMaxDate", "ocMinDate"], outputs: ["ocValueChange", "ocChange"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
|
|
3153
3159
|
}
|
|
3154
3160
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcCalendarComponent, decorators: [{
|
|
3155
3161
|
type: Component,
|
|
@@ -3165,6 +3171,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
3165
3171
|
type: Input
|
|
3166
3172
|
}], ocSelectedDates: [{
|
|
3167
3173
|
type: Input
|
|
3174
|
+
}], ocCurrentDate: [{
|
|
3175
|
+
type: Input
|
|
3168
3176
|
}], ocMinDate: [{
|
|
3169
3177
|
type: Input
|
|
3170
3178
|
}], ocMaxDate: [{
|
|
@@ -3195,6 +3203,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
3195
3203
|
type: Output
|
|
3196
3204
|
}], ocMultipleDatesSelected: [{
|
|
3197
3205
|
type: Output
|
|
3206
|
+
}], ocCurrentDateChange: [{
|
|
3207
|
+
type: Output
|
|
3198
3208
|
}] } });
|
|
3199
3209
|
|
|
3200
3210
|
/*
|