otimus-library 0.3.53 → 0.3.55
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 +52 -9
- package/fesm2022/otimus-library.mjs.map +1 -1
- package/index.d.ts +6 -2
- package/package.json +1 -1
|
@@ -2959,6 +2959,7 @@ class OcCalendarComponent {
|
|
|
2959
2959
|
this.ocSelectionMode = 'single';
|
|
2960
2960
|
this.ocWeekStartsOn = 0;
|
|
2961
2961
|
this.ocLanguage = 'enus';
|
|
2962
|
+
this.ocSelectWholeWeek = false;
|
|
2962
2963
|
this._ocStyle = 'otimus';
|
|
2963
2964
|
this.ocDateSelected = new EventEmitter();
|
|
2964
2965
|
this.ocRangeSelected = new EventEmitter();
|
|
@@ -2985,19 +2986,39 @@ class OcCalendarComponent {
|
|
|
2985
2986
|
this.ocDateSelected.emit(day.date);
|
|
2986
2987
|
}
|
|
2987
2988
|
else {
|
|
2988
|
-
if (
|
|
2989
|
-
|
|
2990
|
-
this.
|
|
2989
|
+
if (this.ocSelectDaysCount && this.ocSelectDaysCount > 0) {
|
|
2990
|
+
const { start, end } = this.getConsecutiveDaysRange(day.date, this.ocSelectDaysCount);
|
|
2991
|
+
this.ocStartDate = start;
|
|
2992
|
+
this.ocEndDate = end;
|
|
2993
|
+
this.ocRangeSelected.emit({
|
|
2994
|
+
start: start,
|
|
2995
|
+
end: end,
|
|
2996
|
+
});
|
|
2991
2997
|
}
|
|
2992
|
-
else if (
|
|
2993
|
-
|
|
2998
|
+
else if (this.ocSelectWholeWeek) {
|
|
2999
|
+
const { start, end } = this.getWeekRange(day.date);
|
|
3000
|
+
this.ocStartDate = start;
|
|
3001
|
+
this.ocEndDate = end;
|
|
2994
3002
|
this.ocRangeSelected.emit({
|
|
2995
|
-
start:
|
|
2996
|
-
end:
|
|
3003
|
+
start: start,
|
|
3004
|
+
end: end,
|
|
2997
3005
|
});
|
|
2998
3006
|
}
|
|
2999
3007
|
else {
|
|
3000
|
-
this.ocStartDate
|
|
3008
|
+
if (!this.ocStartDate || this.ocEndDate) {
|
|
3009
|
+
this.ocStartDate = day.date;
|
|
3010
|
+
this.ocEndDate = undefined;
|
|
3011
|
+
}
|
|
3012
|
+
else if (day.date >= this.ocStartDate) {
|
|
3013
|
+
this.ocEndDate = day.date;
|
|
3014
|
+
this.ocRangeSelected.emit({
|
|
3015
|
+
start: this.ocStartDate,
|
|
3016
|
+
end: this.ocEndDate,
|
|
3017
|
+
});
|
|
3018
|
+
}
|
|
3019
|
+
else {
|
|
3020
|
+
this.ocStartDate = day.date;
|
|
3021
|
+
}
|
|
3001
3022
|
}
|
|
3002
3023
|
}
|
|
3003
3024
|
this.generateCalendar();
|
|
@@ -3034,6 +3055,24 @@ class OcCalendarComponent {
|
|
|
3034
3055
|
a.getMonth() === b.getMonth() &&
|
|
3035
3056
|
a.getFullYear() === b.getFullYear());
|
|
3036
3057
|
}
|
|
3058
|
+
getWeekRange(date) {
|
|
3059
|
+
const dayOfWeek = (date.getDay() - this.ocWeekStartsOn + 7) % 7;
|
|
3060
|
+
const startOfWeek = new Date(date);
|
|
3061
|
+
startOfWeek.setDate(date.getDate() - dayOfWeek);
|
|
3062
|
+
startOfWeek.setHours(0, 0, 0, 0);
|
|
3063
|
+
const endOfWeek = new Date(startOfWeek);
|
|
3064
|
+
endOfWeek.setDate(startOfWeek.getDate() + 6);
|
|
3065
|
+
endOfWeek.setHours(0, 0, 0, 0);
|
|
3066
|
+
return { start: startOfWeek, end: endOfWeek };
|
|
3067
|
+
}
|
|
3068
|
+
getConsecutiveDaysRange(date, daysCount) {
|
|
3069
|
+
const start = new Date(date);
|
|
3070
|
+
start.setHours(0, 0, 0, 0);
|
|
3071
|
+
const end = new Date(start);
|
|
3072
|
+
end.setDate(start.getDate() + (daysCount - 1));
|
|
3073
|
+
end.setHours(0, 0, 0, 0);
|
|
3074
|
+
return { start, end };
|
|
3075
|
+
}
|
|
3037
3076
|
onMonthChange(value) {
|
|
3038
3077
|
const [year, month] = value.split('-');
|
|
3039
3078
|
this.currentMonth = new Date(Number(year), Number(month) - 1, 1);
|
|
@@ -3048,7 +3087,7 @@ class OcCalendarComponent {
|
|
|
3048
3087
|
this.weekDays = weekDaysMap[this.ocLanguage];
|
|
3049
3088
|
}
|
|
3050
3089
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcCalendarComponent, deps: [{ token: StyleThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3051
|
-
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", ocMinDate: "ocMinDate", ocMaxDate: "ocMaxDate", ocWeekStartsOn: "ocWeekStartsOn", ocWidth: "ocWidth", ocMaxWidth: "ocMaxWidth", ocLanguage: "ocLanguage", ocStyle: "ocStyle" }, outputs: { ocDateSelected: "ocDateSelected", ocRangeSelected: "ocRangeSelected" }, host: { properties: { "style.width": "this.computedWidth", "style.max-width": "this.computedMaxWidth" } }, 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 (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-selected,.shui .oc-calendar .oc-calendar-day.is-selected{background:#0169b2;color:#fff}.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),.shui .oc-calendar .oc-calendar-day:hover:not(.is-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-selected{background:#5505a2;color:#fff}.oc-calendar-day.is-in-range{background:#d1d5db}.oc-calendar-day:hover{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" }] }); }
|
|
3090
|
+
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", ocMinDate: "ocMinDate", ocMaxDate: "ocMaxDate", ocWeekStartsOn: "ocWeekStartsOn", ocWidth: "ocWidth", ocMaxWidth: "ocMaxWidth", ocLanguage: "ocLanguage", ocSelectWholeWeek: "ocSelectWholeWeek", ocSelectDaysCount: "ocSelectDaysCount", ocStyle: "ocStyle" }, outputs: { ocDateSelected: "ocDateSelected", ocRangeSelected: "ocRangeSelected" }, host: { properties: { "style.width": "this.computedWidth", "style.max-width": "this.computedMaxWidth" } }, 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 (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-selected,.shui .oc-calendar .oc-calendar-day.is-selected{background:#0169b2;color:#fff}.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),.shui .oc-calendar .oc-calendar-day:hover:not(.is-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-selected{background:#5505a2;color:#fff}.oc-calendar-day.is-in-range{background:#d1d5db}.oc-calendar-day:hover{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" }] }); }
|
|
3052
3091
|
}
|
|
3053
3092
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcCalendarComponent, decorators: [{
|
|
3054
3093
|
type: Component,
|
|
@@ -3074,6 +3113,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
3074
3113
|
type: Input
|
|
3075
3114
|
}], ocLanguage: [{
|
|
3076
3115
|
type: Input
|
|
3116
|
+
}], ocSelectWholeWeek: [{
|
|
3117
|
+
type: Input
|
|
3118
|
+
}], ocSelectDaysCount: [{
|
|
3119
|
+
type: Input
|
|
3077
3120
|
}], ocStyle: [{
|
|
3078
3121
|
type: Input
|
|
3079
3122
|
}], computedWidth: [{
|