otimus-library 0.3.60 → 0.3.61
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 +36 -9
- package/fesm2022/otimus-library.mjs.map +1 -1
- package/index.d.ts +6 -1
- package/package.json +1 -1
|
@@ -809,6 +809,7 @@ class OcChipComponent {
|
|
|
809
809
|
this.ocFontSize = '16px';
|
|
810
810
|
this.ocClick = new EventEmitter();
|
|
811
811
|
this.ocRemove = new EventEmitter();
|
|
812
|
+
this.ocStyleTheme = 'otimus';
|
|
812
813
|
}
|
|
813
814
|
ocEvent(event) {
|
|
814
815
|
event.stopPropagation();
|
|
@@ -823,11 +824,11 @@ class OcChipComponent {
|
|
|
823
824
|
this.ocRemove.emit();
|
|
824
825
|
}
|
|
825
826
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
826
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcChipComponent, isStandalone: true, selector: "oc-chip", inputs: { ocSelected: "ocSelected", ocType: "ocType", ocBg: "ocBg", ocBgHexColor: "ocBgHexColor", ocText: "ocText", ocFontSize: "ocFontSize" }, outputs: { ocClick: "ocClick", ocRemove: "ocRemove" }, ngImport: i0, template: "<button
|
|
827
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcChipComponent, isStandalone: true, selector: "oc-chip", inputs: { ocSelected: "ocSelected", ocType: "ocType", ocBg: "ocBg", ocBgHexColor: "ocBgHexColor", ocText: "ocText", ocFontSize: "ocFontSize" }, outputs: { ocClick: "ocClick", ocRemove: "ocRemove" }, ngImport: i0, template: "<button [ngClass]=\"{\n 'oc-chip': true,\n selected: ocSelected,\n 'not-selectable': ocType !== 'select' && ocType !== 'select_remove',\n tag: ocType === 'tag',\n remove: ocType === 'remove' || ocType === 'select_remove',\n 'green-bg': ocBg === 'green' && !ocBgHexColor,\n 'red-bg': ocBg === 'red' && !ocBgHexColor,\n 'yellow-bg': ocBg === 'yellow' && !ocBgHexColor,\n 'custom-hex-color': !!ocBgHexColor,\n 'shui': ocStyleTheme === 'shui'\n}\" type=\"button\" [ngStyle]=\"{\n 'font-size': ocFontSize,\n 'background-color': ocBgHexColor || null,\n }\" [title]=\"ocText\" (click)=\"ocType.includes('select') ? ocEvent($event) : null\">\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n @if (ocType.includes('remove')) {\n <span class=\"material-symbols-outlined\" (click)=\"ocRemoveEvent($event)\">close</span>\n }\n</button>", styles: [".oc-chip{background-color:#f7f7f7;color:#8f9596;border:2px solid #d1d5db;border-radius:16px;font-size:14px!important;font-weight:500;padding:3px 14px;transition:.3s ease!important;cursor:pointer;display:flex;align-items:center}.oc-chip:hover{filter:brightness(.95)}.oc-chip:active{filter:brightness(.85)}.oc-chip.custom-hex-color{border:none;color:#fff;padding:.375rem .75rem;border-radius:1rem;white-space:nowrap}:host-context(body.shui) .oc-chip.custom-hex-color{box-shadow:0 2px 4px #0000001a}:host-context(body.shui) .oc-chip.custom-hex-color:hover{filter:brightness(1.1);box-shadow:0 3px 6px #00000026}:host-context(body.shui) .oc-chip.custom-hex-color:active{filter:brightness(.95);box-shadow:0 1px 2px #0000001a}.selected{background-color:#ccfbe6dc;border:2px solid #00dda3;color:#00dda3}.selected.red-bg{color:#ed3a3a;border-color:#ed3a3a;background-color:#ffcaca}.selected.green-bg{color:#00dda3;border-color:#00dda3;background-color:#ccfbe6dc}.selected.yellow-bg{color:#ebbc2e;border-color:#ebbc2e;background-color:#fffaea}.not-selectable{border:none;background-color:#f7f7f7;color:#8f9596;cursor:default}.not-selectable:active{cursor:not-allowed}.material-symbols-outlined{font-size:.9rem;width:10px;height:10px}.remove{display:flex;align-items:center;gap:.5rem;padding-right:.5rem}.remove:hover{filter:brightness(1)}.remove span{display:flex;align-items:center;justify-content:center;padding:5px;cursor:pointer;border-radius:50%;transition:.1s ease}.remove span:hover{background-color:#d1d5db}\n", ":host-context(.shui) .oc-chip,.oc-chip.shui{border:1px solid #0169b2;color:#0169b2;background-color:#0169b20f}:host-context(.shui) .oc-chip:hover,.oc-chip.shui:hover{background-color:#0169b21a}:host-context(.shui) .oc-chip.selected,.oc-chip.shui.selected{background-color:#0169b2;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
827
828
|
}
|
|
828
829
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcChipComponent, decorators: [{
|
|
829
830
|
type: Component,
|
|
830
|
-
args: [{ selector: 'oc-chip', standalone: true, imports: [CommonModule], template: "<button
|
|
831
|
+
args: [{ selector: 'oc-chip', standalone: true, imports: [CommonModule], template: "<button [ngClass]=\"{\n 'oc-chip': true,\n selected: ocSelected,\n 'not-selectable': ocType !== 'select' && ocType !== 'select_remove',\n tag: ocType === 'tag',\n remove: ocType === 'remove' || ocType === 'select_remove',\n 'green-bg': ocBg === 'green' && !ocBgHexColor,\n 'red-bg': ocBg === 'red' && !ocBgHexColor,\n 'yellow-bg': ocBg === 'yellow' && !ocBgHexColor,\n 'custom-hex-color': !!ocBgHexColor,\n 'shui': ocStyleTheme === 'shui'\n}\" type=\"button\" [ngStyle]=\"{\n 'font-size': ocFontSize,\n 'background-color': ocBgHexColor || null,\n }\" [title]=\"ocText\" (click)=\"ocType.includes('select') ? ocEvent($event) : null\">\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n @if (ocType.includes('remove')) {\n <span class=\"material-symbols-outlined\" (click)=\"ocRemoveEvent($event)\">close</span>\n }\n</button>", styles: [".oc-chip{background-color:#f7f7f7;color:#8f9596;border:2px solid #d1d5db;border-radius:16px;font-size:14px!important;font-weight:500;padding:3px 14px;transition:.3s ease!important;cursor:pointer;display:flex;align-items:center}.oc-chip:hover{filter:brightness(.95)}.oc-chip:active{filter:brightness(.85)}.oc-chip.custom-hex-color{border:none;color:#fff;padding:.375rem .75rem;border-radius:1rem;white-space:nowrap}:host-context(body.shui) .oc-chip.custom-hex-color{box-shadow:0 2px 4px #0000001a}:host-context(body.shui) .oc-chip.custom-hex-color:hover{filter:brightness(1.1);box-shadow:0 3px 6px #00000026}:host-context(body.shui) .oc-chip.custom-hex-color:active{filter:brightness(.95);box-shadow:0 1px 2px #0000001a}.selected{background-color:#ccfbe6dc;border:2px solid #00dda3;color:#00dda3}.selected.red-bg{color:#ed3a3a;border-color:#ed3a3a;background-color:#ffcaca}.selected.green-bg{color:#00dda3;border-color:#00dda3;background-color:#ccfbe6dc}.selected.yellow-bg{color:#ebbc2e;border-color:#ebbc2e;background-color:#fffaea}.not-selectable{border:none;background-color:#f7f7f7;color:#8f9596;cursor:default}.not-selectable:active{cursor:not-allowed}.material-symbols-outlined{font-size:.9rem;width:10px;height:10px}.remove{display:flex;align-items:center;gap:.5rem;padding-right:.5rem}.remove:hover{filter:brightness(1)}.remove span{display:flex;align-items:center;justify-content:center;padding:5px;cursor:pointer;border-radius:50%;transition:.1s ease}.remove span:hover{background-color:#d1d5db}\n", ":host-context(.shui) .oc-chip,.oc-chip.shui{border:1px solid #0169b2;color:#0169b2;background-color:#0169b20f}:host-context(.shui) .oc-chip:hover,.oc-chip.shui:hover{background-color:#0169b21a}:host-context(.shui) .oc-chip.selected,.oc-chip.shui.selected{background-color:#0169b2;color:#fff}\n"] }]
|
|
831
832
|
}], propDecorators: { ocSelected: [{
|
|
832
833
|
type: Input
|
|
833
834
|
}], ocType: [{
|
|
@@ -2970,7 +2971,11 @@ class OcCalendarComponent {
|
|
|
2970
2971
|
ngOnInit() {
|
|
2971
2972
|
this.setWeekDays();
|
|
2972
2973
|
this.generateCalendar();
|
|
2973
|
-
|
|
2974
|
+
}
|
|
2975
|
+
ngOnChanges(changes) {
|
|
2976
|
+
if (changes['ocStartDate'] || changes['ocEndDate'] || changes['ocMinDate'] || changes['ocMaxDate']) {
|
|
2977
|
+
this.generateCalendar();
|
|
2978
|
+
}
|
|
2974
2979
|
}
|
|
2975
2980
|
previousMonth() {
|
|
2976
2981
|
this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() - 1, 1);
|
|
@@ -3039,10 +3044,8 @@ class OcCalendarComponent {
|
|
|
3039
3044
|
isCurrentMonth: date.getMonth() === this.currentMonth.getMonth(),
|
|
3040
3045
|
isSelected: this.isSameDate(date, this.ocStartDate) ||
|
|
3041
3046
|
this.isSameDate(date, this.ocEndDate),
|
|
3042
|
-
isInRange:
|
|
3043
|
-
|
|
3044
|
-
date > this.ocStartDate &&
|
|
3045
|
-
date < this.ocEndDate),
|
|
3047
|
+
isInRange: this.isDateInRange(date),
|
|
3048
|
+
isDisabled: this.isDateDisabled(date),
|
|
3046
3049
|
});
|
|
3047
3050
|
}
|
|
3048
3051
|
this.weeks.push(days);
|
|
@@ -3055,6 +3058,30 @@ class OcCalendarComponent {
|
|
|
3055
3058
|
a.getMonth() === b.getMonth() &&
|
|
3056
3059
|
a.getFullYear() === b.getFullYear());
|
|
3057
3060
|
}
|
|
3061
|
+
isDateInRange(date) {
|
|
3062
|
+
if (!this.ocStartDate || !this.ocEndDate)
|
|
3063
|
+
return false;
|
|
3064
|
+
const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
|
|
3065
|
+
const startOnly = new Date(this.ocStartDate.getFullYear(), this.ocStartDate.getMonth(), this.ocStartDate.getDate()).getTime();
|
|
3066
|
+
const endOnly = new Date(this.ocEndDate.getFullYear(), this.ocEndDate.getMonth(), this.ocEndDate.getDate()).getTime();
|
|
3067
|
+
return dateOnly > startOnly && dateOnly < endOnly;
|
|
3068
|
+
}
|
|
3069
|
+
isDateDisabled(date) {
|
|
3070
|
+
const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
|
3071
|
+
if (this.ocMinDate) {
|
|
3072
|
+
const minDateOnly = new Date(this.ocMinDate.getFullYear(), this.ocMinDate.getMonth(), this.ocMinDate.getDate());
|
|
3073
|
+
if (dateOnly < minDateOnly) {
|
|
3074
|
+
return true;
|
|
3075
|
+
}
|
|
3076
|
+
}
|
|
3077
|
+
if (this.ocMaxDate) {
|
|
3078
|
+
const maxDateOnly = new Date(this.ocMaxDate.getFullYear(), this.ocMaxDate.getMonth(), this.ocMaxDate.getDate());
|
|
3079
|
+
if (dateOnly > maxDateOnly) {
|
|
3080
|
+
return true;
|
|
3081
|
+
}
|
|
3082
|
+
}
|
|
3083
|
+
return false;
|
|
3084
|
+
}
|
|
3058
3085
|
getWeekRange(date) {
|
|
3059
3086
|
const dayOfWeek = (date.getDay() - this.ocWeekStartsOn + 7) % 7;
|
|
3060
3087
|
const startOfWeek = new Date(date);
|
|
@@ -3087,14 +3114,14 @@ class OcCalendarComponent {
|
|
|
3087
3114
|
this.weekDays = weekDaysMap[this.ocLanguage];
|
|
3088
3115
|
}
|
|
3089
3116
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcCalendarComponent, deps: [{ token: StyleThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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" }] }); }
|
|
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" }] }); }
|
|
3091
3118
|
}
|
|
3092
3119
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcCalendarComponent, decorators: [{
|
|
3093
3120
|
type: Component,
|
|
3094
3121
|
args: [{ selector: 'oc-calendar', standalone: true, host: {
|
|
3095
3122
|
'[style.width]': 'computedWidth',
|
|
3096
3123
|
'[style.max-width]': 'computedMaxWidth',
|
|
3097
|
-
}, 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 (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"] }]
|
|
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"] }]
|
|
3098
3125
|
}], ctorParameters: () => [{ type: StyleThemeService }], propDecorators: { ocSelectionMode: [{
|
|
3099
3126
|
type: Input
|
|
3100
3127
|
}], ocStartDate: [{
|