otimus-library 0.3.61 → 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 +56 -7
- package/fesm2022/otimus-library.mjs.map +1 -1
- package/index.d.ts +11 -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,15 @@ 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();
|
|
2969
|
+
this.ocCurrentDateChange = new EventEmitter();
|
|
2967
2970
|
this.currentMonth = new Date();
|
|
2968
2971
|
this.weeks = [];
|
|
2969
2972
|
this.weekDays = [];
|
|
@@ -2973,7 +2976,12 @@ class OcCalendarComponent {
|
|
|
2973
2976
|
this.generateCalendar();
|
|
2974
2977
|
}
|
|
2975
2978
|
ngOnChanges(changes) {
|
|
2976
|
-
if (changes['ocStartDate'] ||
|
|
2979
|
+
if (changes['ocStartDate'] ||
|
|
2980
|
+
changes['ocEndDate'] ||
|
|
2981
|
+
changes['ocMinDate'] ||
|
|
2982
|
+
changes['ocMaxDate'] ||
|
|
2983
|
+
changes['ocSelectedDates'] ||
|
|
2984
|
+
changes['ocCurrentDate']) {
|
|
2977
2985
|
this.generateCalendar();
|
|
2978
2986
|
}
|
|
2979
2987
|
}
|
|
@@ -2990,6 +2998,19 @@ class OcCalendarComponent {
|
|
|
2990
2998
|
this.ocStartDate = day.date;
|
|
2991
2999
|
this.ocDateSelected.emit(day.date);
|
|
2992
3000
|
}
|
|
3001
|
+
else if (this.ocSelectionMode === 'multiple') {
|
|
3002
|
+
this.ocCurrentDate = day.date;
|
|
3003
|
+
this.ocCurrentDateChange.emit(day.date);
|
|
3004
|
+
const existingIndex = this.ocSelectedDates.findIndex((d) => this.isSameDate(d, day.date));
|
|
3005
|
+
if (existingIndex >= 0) {
|
|
3006
|
+
this.ocSelectedDates.splice(existingIndex, 1);
|
|
3007
|
+
}
|
|
3008
|
+
else {
|
|
3009
|
+
this.ocSelectedDates.push(day.date);
|
|
3010
|
+
}
|
|
3011
|
+
this.ocSelectedDates = [...this.ocSelectedDates];
|
|
3012
|
+
this.ocMultipleDatesSelected.emit(this.ocSelectedDates);
|
|
3013
|
+
}
|
|
2993
3014
|
else {
|
|
2994
3015
|
if (this.ocSelectDaysCount && this.ocSelectDaysCount > 0) {
|
|
2995
3016
|
const { start, end } = this.getConsecutiveDaysRange(day.date, this.ocSelectDaysCount);
|
|
@@ -3034,23 +3055,43 @@ class OcCalendarComponent {
|
|
|
3034
3055
|
const startDate = new Date(startOfMonth);
|
|
3035
3056
|
startDate.setDate(startDate.getDate() - startDay);
|
|
3036
3057
|
this.weeks = [];
|
|
3058
|
+
const today = new Date();
|
|
3037
3059
|
for (let week = 0; week < 6; week++) {
|
|
3038
3060
|
const days = [];
|
|
3039
3061
|
for (let day = 0; day < 7; day++) {
|
|
3040
3062
|
const date = new Date(startDate);
|
|
3041
3063
|
date.setDate(startDate.getDate() + week * 7 + day);
|
|
3064
|
+
const isMultipleSelected = this.isDateInMultipleSelection(date);
|
|
3065
|
+
const isCurrentDate = this.ocCurrentDate
|
|
3066
|
+
? this.isSameDate(date, this.ocCurrentDate)
|
|
3067
|
+
: this.isLastSelectedDate(date);
|
|
3042
3068
|
days.push({
|
|
3043
3069
|
date,
|
|
3044
3070
|
isCurrentMonth: date.getMonth() === this.currentMonth.getMonth(),
|
|
3045
|
-
isSelected: this.
|
|
3046
|
-
|
|
3071
|
+
isSelected: this.ocSelectionMode === 'multiple'
|
|
3072
|
+
? isCurrentDate
|
|
3073
|
+
: this.isSameDate(date, this.ocStartDate) ||
|
|
3074
|
+
this.isSameDate(date, this.ocEndDate),
|
|
3047
3075
|
isInRange: this.isDateInRange(date),
|
|
3048
3076
|
isDisabled: this.isDateDisabled(date),
|
|
3077
|
+
isToday: this.isSameDate(date, today),
|
|
3078
|
+
isPreviouslySelected: this.ocSelectionMode === 'multiple' &&
|
|
3079
|
+
isMultipleSelected &&
|
|
3080
|
+
!isCurrentDate,
|
|
3049
3081
|
});
|
|
3050
3082
|
}
|
|
3051
3083
|
this.weeks.push(days);
|
|
3052
3084
|
}
|
|
3053
3085
|
}
|
|
3086
|
+
isDateInMultipleSelection(date) {
|
|
3087
|
+
return this.ocSelectedDates.some((d) => this.isSameDate(d, date));
|
|
3088
|
+
}
|
|
3089
|
+
isLastSelectedDate(date) {
|
|
3090
|
+
if (this.ocSelectedDates.length === 0)
|
|
3091
|
+
return false;
|
|
3092
|
+
const lastDate = this.ocSelectedDates[this.ocSelectedDates.length - 1];
|
|
3093
|
+
return this.isSameDate(date, lastDate);
|
|
3094
|
+
}
|
|
3054
3095
|
isSameDate(a, b) {
|
|
3055
3096
|
if (!a || !b)
|
|
3056
3097
|
return false;
|
|
@@ -3114,20 +3155,24 @@ class OcCalendarComponent {
|
|
|
3114
3155
|
this.weekDays = weekDaysMap[this.ocLanguage];
|
|
3115
3156
|
}
|
|
3116
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 }); }
|
|
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" }] }); }
|
|
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" }] }); }
|
|
3118
3159
|
}
|
|
3119
3160
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcCalendarComponent, decorators: [{
|
|
3120
3161
|
type: Component,
|
|
3121
3162
|
args: [{ selector: 'oc-calendar', standalone: true, host: {
|
|
3122
3163
|
'[style.width]': 'computedWidth',
|
|
3123
3164
|
'[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"] }]
|
|
3165
|
+
}, 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
3166
|
}], ctorParameters: () => [{ type: StyleThemeService }], propDecorators: { ocSelectionMode: [{
|
|
3126
3167
|
type: Input
|
|
3127
3168
|
}], ocStartDate: [{
|
|
3128
3169
|
type: Input
|
|
3129
3170
|
}], ocEndDate: [{
|
|
3130
3171
|
type: Input
|
|
3172
|
+
}], ocSelectedDates: [{
|
|
3173
|
+
type: Input
|
|
3174
|
+
}], ocCurrentDate: [{
|
|
3175
|
+
type: Input
|
|
3131
3176
|
}], ocMinDate: [{
|
|
3132
3177
|
type: Input
|
|
3133
3178
|
}], ocMaxDate: [{
|
|
@@ -3156,6 +3201,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
3156
3201
|
type: Output
|
|
3157
3202
|
}], ocRangeSelected: [{
|
|
3158
3203
|
type: Output
|
|
3204
|
+
}], ocMultipleDatesSelected: [{
|
|
3205
|
+
type: Output
|
|
3206
|
+
}], ocCurrentDateChange: [{
|
|
3207
|
+
type: Output
|
|
3159
3208
|
}] } });
|
|
3160
3209
|
|
|
3161
3210
|
/*
|