otimus-library 0.3.61 → 0.3.62
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 +46 -7
- package/fesm2022/otimus-library.mjs.map +1 -1
- package/index.d.ts +9 -3
- package/package.json +1 -1
|
@@ -2672,11 +2672,11 @@ class OcButtonMenuComponent {
|
|
|
2672
2672
|
};
|
|
2673
2673
|
}
|
|
2674
2674
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcButtonMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2675
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: OcButtonMenuComponent, isStandalone: true, selector: "oc-button-menu", inputs: { ocSize: "ocSize", ocColor: "ocColor", ocType: "ocType", ocMenu: "ocMenu" }, outputs: { ocClick: "ocClick", ocChange: "ocChange" }, ngImport: i0, template: "<div class=\"oc-button-menu\" [ngClass]=\"getStyleClass()\">\n <button class=\"oc button left-btn\" [type]=\"ocType\" (click)=\"ocClick.emit($event)\">\n <ng-content></ng-content>\n </button>\n <button (click)=\"menu.open()\" class=\"oc button menu right-btn\" [ngClass]=\"getStyleClass()\">\n <span class=\"material-symbols-outlined\">\n arrow_drop_down\n </span>\n <oc-menu class=\"oc-menu\" #menu [ocMenu]=\"ocMenu\" (ocChange)=\"ocChange.emit($event)\"></oc-menu>\n </button>\n</div>", styles: [".oc-button-menu{display:flex;gap:0}.oc-button-menu .left-btn{margin-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.oc-button-menu .right-btn{border-top-left-radius:0;border-bottom-left-radius:0;filter:brightness(.97);width:36px;padding-left:.3rem;padding-right:.3rem}.oc-menu{transform:translate(-50px) translateY(10px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: OcMenuComponent, selector: "oc-menu", inputs: ["ocMenu"], outputs: ["ocChange"] }] }); }
|
|
2675
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: OcButtonMenuComponent, isStandalone: true, selector: "oc-button-menu", inputs: { ocSize: "ocSize", ocColor: "ocColor", ocType: "ocType", ocMenu: "ocMenu" }, outputs: { ocClick: "ocClick", ocChange: "ocChange" }, ngImport: i0, template: "<div class=\"oc-button-menu\" [ngClass]=\"getStyleClass()\">\n <button class=\"oc button left-btn\" [type]=\"ocType\" (click)=\"ocClick.emit($event)\">\n <ng-content></ng-content>\n </button>\n <button (click)=\"menu.open()\" class=\"oc button menu right-btn\" [ngClass]=\"getStyleClass()\">\n <span class=\"material-symbols-outlined\">\n arrow_drop_down\n </span>\n <oc-menu class=\"oc-menu\" #menu [ocMenu]=\"ocMenu\" (ocChange)=\"ocChange.emit($event)\"></oc-menu>\n </button>\n</div>", styles: [".oc-button-menu{display:flex;gap:0}.oc-button-menu .left-btn{margin-right:0!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}.oc-button-menu .right-btn{border-top-left-radius:0!important;border-bottom-left-radius:0!important;filter:brightness(.97);width:36px;padding-left:.3rem;padding-right:.3rem}.oc-menu{transform:translate(-50px) translateY(10px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: OcMenuComponent, selector: "oc-menu", inputs: ["ocMenu"], outputs: ["ocChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2676
2676
|
}
|
|
2677
2677
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcButtonMenuComponent, decorators: [{
|
|
2678
2678
|
type: Component,
|
|
2679
|
-
args: [{ selector: 'oc-button-menu', standalone: true, imports: [CommonModule, OcMenuComponent], template: "<div class=\"oc-button-menu\" [ngClass]=\"getStyleClass()\">\n <button class=\"oc button left-btn\" [type]=\"ocType\" (click)=\"ocClick.emit($event)\">\n <ng-content></ng-content>\n </button>\n <button (click)=\"menu.open()\" class=\"oc button menu right-btn\" [ngClass]=\"getStyleClass()\">\n <span class=\"material-symbols-outlined\">\n arrow_drop_down\n </span>\n <oc-menu class=\"oc-menu\" #menu [ocMenu]=\"ocMenu\" (ocChange)=\"ocChange.emit($event)\"></oc-menu>\n </button>\n</div>", styles: [".oc-button-menu{display:flex;gap:0}.oc-button-menu .left-btn{margin-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.oc-button-menu .right-btn{border-top-left-radius:0;border-bottom-left-radius:0;filter:brightness(.97);width:36px;padding-left:.3rem;padding-right:.3rem}.oc-menu{transform:translate(-50px) translateY(10px)}\n"] }]
|
|
2679
|
+
args: [{ selector: 'oc-button-menu', standalone: true, imports: [CommonModule, OcMenuComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"oc-button-menu\" [ngClass]=\"getStyleClass()\">\n <button class=\"oc button left-btn\" [type]=\"ocType\" (click)=\"ocClick.emit($event)\">\n <ng-content></ng-content>\n </button>\n <button (click)=\"menu.open()\" class=\"oc button menu right-btn\" [ngClass]=\"getStyleClass()\">\n <span class=\"material-symbols-outlined\">\n arrow_drop_down\n </span>\n <oc-menu class=\"oc-menu\" #menu [ocMenu]=\"ocMenu\" (ocChange)=\"ocChange.emit($event)\"></oc-menu>\n </button>\n</div>", styles: [".oc-button-menu{display:flex;gap:0}.oc-button-menu .left-btn{margin-right:0!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}.oc-button-menu .right-btn{border-top-left-radius:0!important;border-bottom-left-radius:0!important;filter:brightness(.97);width:36px;padding-left:.3rem;padding-right:.3rem}.oc-menu{transform:translate(-50px) translateY(10px)}\n"] }]
|
|
2680
2680
|
}], propDecorators: { ocSize: [{
|
|
2681
2681
|
type: Input
|
|
2682
2682
|
}], ocColor: [{
|
|
@@ -2958,12 +2958,14 @@ class OcCalendarComponent {
|
|
|
2958
2958
|
constructor(styleThemeService) {
|
|
2959
2959
|
this.styleThemeService = styleThemeService;
|
|
2960
2960
|
this.ocSelectionMode = 'single';
|
|
2961
|
+
this.ocSelectedDates = [];
|
|
2961
2962
|
this.ocWeekStartsOn = 0;
|
|
2962
2963
|
this.ocLanguage = 'enus';
|
|
2963
2964
|
this.ocSelectWholeWeek = false;
|
|
2964
2965
|
this._ocStyle = 'otimus';
|
|
2965
2966
|
this.ocDateSelected = new EventEmitter();
|
|
2966
2967
|
this.ocRangeSelected = new EventEmitter();
|
|
2968
|
+
this.ocMultipleDatesSelected = new EventEmitter();
|
|
2967
2969
|
this.currentMonth = new Date();
|
|
2968
2970
|
this.weeks = [];
|
|
2969
2971
|
this.weekDays = [];
|
|
@@ -2973,7 +2975,11 @@ class OcCalendarComponent {
|
|
|
2973
2975
|
this.generateCalendar();
|
|
2974
2976
|
}
|
|
2975
2977
|
ngOnChanges(changes) {
|
|
2976
|
-
if (changes['ocStartDate'] ||
|
|
2978
|
+
if (changes['ocStartDate'] ||
|
|
2979
|
+
changes['ocEndDate'] ||
|
|
2980
|
+
changes['ocMinDate'] ||
|
|
2981
|
+
changes['ocMaxDate'] ||
|
|
2982
|
+
changes['ocSelectedDates']) {
|
|
2977
2983
|
this.generateCalendar();
|
|
2978
2984
|
}
|
|
2979
2985
|
}
|
|
@@ -2990,6 +2996,17 @@ class OcCalendarComponent {
|
|
|
2990
2996
|
this.ocStartDate = day.date;
|
|
2991
2997
|
this.ocDateSelected.emit(day.date);
|
|
2992
2998
|
}
|
|
2999
|
+
else if (this.ocSelectionMode === 'multiple') {
|
|
3000
|
+
const existingIndex = this.ocSelectedDates.findIndex((d) => this.isSameDate(d, day.date));
|
|
3001
|
+
if (existingIndex >= 0) {
|
|
3002
|
+
this.ocSelectedDates.splice(existingIndex, 1);
|
|
3003
|
+
}
|
|
3004
|
+
else {
|
|
3005
|
+
this.ocSelectedDates.push(day.date);
|
|
3006
|
+
}
|
|
3007
|
+
this.ocSelectedDates = [...this.ocSelectedDates];
|
|
3008
|
+
this.ocMultipleDatesSelected.emit(this.ocSelectedDates);
|
|
3009
|
+
}
|
|
2993
3010
|
else {
|
|
2994
3011
|
if (this.ocSelectDaysCount && this.ocSelectDaysCount > 0) {
|
|
2995
3012
|
const { start, end } = this.getConsecutiveDaysRange(day.date, this.ocSelectDaysCount);
|
|
@@ -3034,23 +3051,41 @@ class OcCalendarComponent {
|
|
|
3034
3051
|
const startDate = new Date(startOfMonth);
|
|
3035
3052
|
startDate.setDate(startDate.getDate() - startDay);
|
|
3036
3053
|
this.weeks = [];
|
|
3054
|
+
const today = new Date();
|
|
3037
3055
|
for (let week = 0; week < 6; week++) {
|
|
3038
3056
|
const days = [];
|
|
3039
3057
|
for (let day = 0; day < 7; day++) {
|
|
3040
3058
|
const date = new Date(startDate);
|
|
3041
3059
|
date.setDate(startDate.getDate() + week * 7 + day);
|
|
3060
|
+
const isMultipleSelected = this.isDateInMultipleSelection(date);
|
|
3061
|
+
const isLastSelected = this.isLastSelectedDate(date);
|
|
3042
3062
|
days.push({
|
|
3043
3063
|
date,
|
|
3044
3064
|
isCurrentMonth: date.getMonth() === this.currentMonth.getMonth(),
|
|
3045
|
-
isSelected: this.
|
|
3046
|
-
|
|
3065
|
+
isSelected: this.ocSelectionMode === 'multiple'
|
|
3066
|
+
? isLastSelected
|
|
3067
|
+
: this.isSameDate(date, this.ocStartDate) ||
|
|
3068
|
+
this.isSameDate(date, this.ocEndDate),
|
|
3047
3069
|
isInRange: this.isDateInRange(date),
|
|
3048
3070
|
isDisabled: this.isDateDisabled(date),
|
|
3071
|
+
isToday: this.isSameDate(date, today),
|
|
3072
|
+
isPreviouslySelected: this.ocSelectionMode === 'multiple' &&
|
|
3073
|
+
isMultipleSelected &&
|
|
3074
|
+
!isLastSelected,
|
|
3049
3075
|
});
|
|
3050
3076
|
}
|
|
3051
3077
|
this.weeks.push(days);
|
|
3052
3078
|
}
|
|
3053
3079
|
}
|
|
3080
|
+
isDateInMultipleSelection(date) {
|
|
3081
|
+
return this.ocSelectedDates.some((d) => this.isSameDate(d, date));
|
|
3082
|
+
}
|
|
3083
|
+
isLastSelectedDate(date) {
|
|
3084
|
+
if (this.ocSelectedDates.length === 0)
|
|
3085
|
+
return false;
|
|
3086
|
+
const lastDate = this.ocSelectedDates[this.ocSelectedDates.length - 1];
|
|
3087
|
+
return this.isSameDate(date, lastDate);
|
|
3088
|
+
}
|
|
3054
3089
|
isSameDate(a, b) {
|
|
3055
3090
|
if (!a || !b)
|
|
3056
3091
|
return false;
|
|
@@ -3114,20 +3149,22 @@ class OcCalendarComponent {
|
|
|
3114
3149
|
this.weekDays = weekDaysMap[this.ocLanguage];
|
|
3115
3150
|
}
|
|
3116
3151
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcCalendarComponent, deps: [{ token: StyleThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3117
|
-
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" } }, 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 [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-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" }] }); }
|
|
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" }] }); }
|
|
3118
3153
|
}
|
|
3119
3154
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcCalendarComponent, decorators: [{
|
|
3120
3155
|
type: Component,
|
|
3121
3156
|
args: [{ selector: 'oc-calendar', standalone: true, host: {
|
|
3122
3157
|
'[style.width]': 'computedWidth',
|
|
3123
3158
|
'[style.max-width]': 'computedMaxWidth',
|
|
3124
|
-
}, imports: [CommonModule, DatePipe, OcDateSelectComponent], 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 [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-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"] }]
|
|
3159
|
+
}, imports: [CommonModule, DatePipe, OcDateSelectComponent], 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"] }]
|
|
3125
3160
|
}], ctorParameters: () => [{ type: StyleThemeService }], propDecorators: { ocSelectionMode: [{
|
|
3126
3161
|
type: Input
|
|
3127
3162
|
}], ocStartDate: [{
|
|
3128
3163
|
type: Input
|
|
3129
3164
|
}], ocEndDate: [{
|
|
3130
3165
|
type: Input
|
|
3166
|
+
}], ocSelectedDates: [{
|
|
3167
|
+
type: Input
|
|
3131
3168
|
}], ocMinDate: [{
|
|
3132
3169
|
type: Input
|
|
3133
3170
|
}], ocMaxDate: [{
|
|
@@ -3156,6 +3193,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
3156
3193
|
type: Output
|
|
3157
3194
|
}], ocRangeSelected: [{
|
|
3158
3195
|
type: Output
|
|
3196
|
+
}], ocMultipleDatesSelected: [{
|
|
3197
|
+
type: Output
|
|
3159
3198
|
}] } });
|
|
3160
3199
|
|
|
3161
3200
|
/*
|