otimus-library 0.3.53 → 0.3.54
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 +34 -10
- package/fesm2022/otimus-library.mjs.map +1 -1
- package/index.d.ts +3 -1
- 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,30 @@ class OcCalendarComponent {
|
|
|
2985
2986
|
this.ocDateSelected.emit(day.date);
|
|
2986
2987
|
}
|
|
2987
2988
|
else {
|
|
2988
|
-
if (
|
|
2989
|
-
|
|
2990
|
-
this.
|
|
2991
|
-
|
|
2992
|
-
else if (day.date >= this.ocStartDate) {
|
|
2993
|
-
this.ocEndDate = day.date;
|
|
2989
|
+
if (this.ocSelectWholeWeek) {
|
|
2990
|
+
const { start, end } = this.getWeekRange(day.date);
|
|
2991
|
+
this.ocStartDate = start;
|
|
2992
|
+
this.ocEndDate = end;
|
|
2994
2993
|
this.ocRangeSelected.emit({
|
|
2995
|
-
start:
|
|
2996
|
-
end:
|
|
2994
|
+
start: start,
|
|
2995
|
+
end: end,
|
|
2997
2996
|
});
|
|
2998
2997
|
}
|
|
2999
2998
|
else {
|
|
3000
|
-
this.ocStartDate
|
|
2999
|
+
if (!this.ocStartDate || this.ocEndDate) {
|
|
3000
|
+
this.ocStartDate = day.date;
|
|
3001
|
+
this.ocEndDate = undefined;
|
|
3002
|
+
}
|
|
3003
|
+
else if (day.date >= this.ocStartDate) {
|
|
3004
|
+
this.ocEndDate = day.date;
|
|
3005
|
+
this.ocRangeSelected.emit({
|
|
3006
|
+
start: this.ocStartDate,
|
|
3007
|
+
end: this.ocEndDate,
|
|
3008
|
+
});
|
|
3009
|
+
}
|
|
3010
|
+
else {
|
|
3011
|
+
this.ocStartDate = day.date;
|
|
3012
|
+
}
|
|
3001
3013
|
}
|
|
3002
3014
|
}
|
|
3003
3015
|
this.generateCalendar();
|
|
@@ -3034,6 +3046,16 @@ class OcCalendarComponent {
|
|
|
3034
3046
|
a.getMonth() === b.getMonth() &&
|
|
3035
3047
|
a.getFullYear() === b.getFullYear());
|
|
3036
3048
|
}
|
|
3049
|
+
getWeekRange(date) {
|
|
3050
|
+
const dayOfWeek = (date.getDay() - this.ocWeekStartsOn + 7) % 7;
|
|
3051
|
+
const startOfWeek = new Date(date);
|
|
3052
|
+
startOfWeek.setDate(date.getDate() - dayOfWeek);
|
|
3053
|
+
startOfWeek.setHours(0, 0, 0, 0);
|
|
3054
|
+
const endOfWeek = new Date(startOfWeek);
|
|
3055
|
+
endOfWeek.setDate(startOfWeek.getDate() + 6);
|
|
3056
|
+
endOfWeek.setHours(23, 59, 59, 999);
|
|
3057
|
+
return { start: startOfWeek, end: endOfWeek };
|
|
3058
|
+
}
|
|
3037
3059
|
onMonthChange(value) {
|
|
3038
3060
|
const [year, month] = value.split('-');
|
|
3039
3061
|
this.currentMonth = new Date(Number(year), Number(month) - 1, 1);
|
|
@@ -3048,7 +3070,7 @@ class OcCalendarComponent {
|
|
|
3048
3070
|
this.weekDays = weekDaysMap[this.ocLanguage];
|
|
3049
3071
|
}
|
|
3050
3072
|
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" }] }); }
|
|
3073
|
+
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", 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
3074
|
}
|
|
3053
3075
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcCalendarComponent, decorators: [{
|
|
3054
3076
|
type: Component,
|
|
@@ -3074,6 +3096,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
3074
3096
|
type: Input
|
|
3075
3097
|
}], ocLanguage: [{
|
|
3076
3098
|
type: Input
|
|
3099
|
+
}], ocSelectWholeWeek: [{
|
|
3100
|
+
type: Input
|
|
3077
3101
|
}], ocStyle: [{
|
|
3078
3102
|
type: Input
|
|
3079
3103
|
}], computedWidth: [{
|