otimus-library 0.3.60 → 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 +79 -13
- package/fesm2022/otimus-library.mjs.map +1 -1
- package/index.d.ts +15 -4
- 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: [{
|
|
@@ -2671,11 +2672,11 @@ class OcButtonMenuComponent {
|
|
|
2671
2672
|
};
|
|
2672
2673
|
}
|
|
2673
2674
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcButtonMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2674
|
-
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 }); }
|
|
2675
2676
|
}
|
|
2676
2677
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcButtonMenuComponent, decorators: [{
|
|
2677
2678
|
type: Component,
|
|
2678
|
-
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"] }]
|
|
2679
2680
|
}], propDecorators: { ocSize: [{
|
|
2680
2681
|
type: Input
|
|
2681
2682
|
}], ocColor: [{
|
|
@@ -2957,12 +2958,14 @@ class OcCalendarComponent {
|
|
|
2957
2958
|
constructor(styleThemeService) {
|
|
2958
2959
|
this.styleThemeService = styleThemeService;
|
|
2959
2960
|
this.ocSelectionMode = 'single';
|
|
2961
|
+
this.ocSelectedDates = [];
|
|
2960
2962
|
this.ocWeekStartsOn = 0;
|
|
2961
2963
|
this.ocLanguage = 'enus';
|
|
2962
2964
|
this.ocSelectWholeWeek = false;
|
|
2963
2965
|
this._ocStyle = 'otimus';
|
|
2964
2966
|
this.ocDateSelected = new EventEmitter();
|
|
2965
2967
|
this.ocRangeSelected = new EventEmitter();
|
|
2968
|
+
this.ocMultipleDatesSelected = new EventEmitter();
|
|
2966
2969
|
this.currentMonth = new Date();
|
|
2967
2970
|
this.weeks = [];
|
|
2968
2971
|
this.weekDays = [];
|
|
@@ -2970,7 +2973,15 @@ class OcCalendarComponent {
|
|
|
2970
2973
|
ngOnInit() {
|
|
2971
2974
|
this.setWeekDays();
|
|
2972
2975
|
this.generateCalendar();
|
|
2973
|
-
|
|
2976
|
+
}
|
|
2977
|
+
ngOnChanges(changes) {
|
|
2978
|
+
if (changes['ocStartDate'] ||
|
|
2979
|
+
changes['ocEndDate'] ||
|
|
2980
|
+
changes['ocMinDate'] ||
|
|
2981
|
+
changes['ocMaxDate'] ||
|
|
2982
|
+
changes['ocSelectedDates']) {
|
|
2983
|
+
this.generateCalendar();
|
|
2984
|
+
}
|
|
2974
2985
|
}
|
|
2975
2986
|
previousMonth() {
|
|
2976
2987
|
this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() - 1, 1);
|
|
@@ -2985,6 +2996,17 @@ class OcCalendarComponent {
|
|
|
2985
2996
|
this.ocStartDate = day.date;
|
|
2986
2997
|
this.ocDateSelected.emit(day.date);
|
|
2987
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
|
+
}
|
|
2988
3010
|
else {
|
|
2989
3011
|
if (this.ocSelectDaysCount && this.ocSelectDaysCount > 0) {
|
|
2990
3012
|
const { start, end } = this.getConsecutiveDaysRange(day.date, this.ocSelectDaysCount);
|
|
@@ -3029,25 +3051,41 @@ class OcCalendarComponent {
|
|
|
3029
3051
|
const startDate = new Date(startOfMonth);
|
|
3030
3052
|
startDate.setDate(startDate.getDate() - startDay);
|
|
3031
3053
|
this.weeks = [];
|
|
3054
|
+
const today = new Date();
|
|
3032
3055
|
for (let week = 0; week < 6; week++) {
|
|
3033
3056
|
const days = [];
|
|
3034
3057
|
for (let day = 0; day < 7; day++) {
|
|
3035
3058
|
const date = new Date(startDate);
|
|
3036
3059
|
date.setDate(startDate.getDate() + week * 7 + day);
|
|
3060
|
+
const isMultipleSelected = this.isDateInMultipleSelection(date);
|
|
3061
|
+
const isLastSelected = this.isLastSelectedDate(date);
|
|
3037
3062
|
days.push({
|
|
3038
3063
|
date,
|
|
3039
3064
|
isCurrentMonth: date.getMonth() === this.currentMonth.getMonth(),
|
|
3040
|
-
isSelected: this.
|
|
3041
|
-
|
|
3042
|
-
|
|
3043
|
-
|
|
3044
|
-
|
|
3045
|
-
|
|
3065
|
+
isSelected: this.ocSelectionMode === 'multiple'
|
|
3066
|
+
? isLastSelected
|
|
3067
|
+
: this.isSameDate(date, this.ocStartDate) ||
|
|
3068
|
+
this.isSameDate(date, this.ocEndDate),
|
|
3069
|
+
isInRange: this.isDateInRange(date),
|
|
3070
|
+
isDisabled: this.isDateDisabled(date),
|
|
3071
|
+
isToday: this.isSameDate(date, today),
|
|
3072
|
+
isPreviouslySelected: this.ocSelectionMode === 'multiple' &&
|
|
3073
|
+
isMultipleSelected &&
|
|
3074
|
+
!isLastSelected,
|
|
3046
3075
|
});
|
|
3047
3076
|
}
|
|
3048
3077
|
this.weeks.push(days);
|
|
3049
3078
|
}
|
|
3050
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
|
+
}
|
|
3051
3089
|
isSameDate(a, b) {
|
|
3052
3090
|
if (!a || !b)
|
|
3053
3091
|
return false;
|
|
@@ -3055,6 +3093,30 @@ class OcCalendarComponent {
|
|
|
3055
3093
|
a.getMonth() === b.getMonth() &&
|
|
3056
3094
|
a.getFullYear() === b.getFullYear());
|
|
3057
3095
|
}
|
|
3096
|
+
isDateInRange(date) {
|
|
3097
|
+
if (!this.ocStartDate || !this.ocEndDate)
|
|
3098
|
+
return false;
|
|
3099
|
+
const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
|
|
3100
|
+
const startOnly = new Date(this.ocStartDate.getFullYear(), this.ocStartDate.getMonth(), this.ocStartDate.getDate()).getTime();
|
|
3101
|
+
const endOnly = new Date(this.ocEndDate.getFullYear(), this.ocEndDate.getMonth(), this.ocEndDate.getDate()).getTime();
|
|
3102
|
+
return dateOnly > startOnly && dateOnly < endOnly;
|
|
3103
|
+
}
|
|
3104
|
+
isDateDisabled(date) {
|
|
3105
|
+
const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
|
3106
|
+
if (this.ocMinDate) {
|
|
3107
|
+
const minDateOnly = new Date(this.ocMinDate.getFullYear(), this.ocMinDate.getMonth(), this.ocMinDate.getDate());
|
|
3108
|
+
if (dateOnly < minDateOnly) {
|
|
3109
|
+
return true;
|
|
3110
|
+
}
|
|
3111
|
+
}
|
|
3112
|
+
if (this.ocMaxDate) {
|
|
3113
|
+
const maxDateOnly = new Date(this.ocMaxDate.getFullYear(), this.ocMaxDate.getMonth(), this.ocMaxDate.getDate());
|
|
3114
|
+
if (dateOnly > maxDateOnly) {
|
|
3115
|
+
return true;
|
|
3116
|
+
}
|
|
3117
|
+
}
|
|
3118
|
+
return false;
|
|
3119
|
+
}
|
|
3058
3120
|
getWeekRange(date) {
|
|
3059
3121
|
const dayOfWeek = (date.getDay() - this.ocWeekStartsOn + 7) % 7;
|
|
3060
3122
|
const startOfWeek = new Date(date);
|
|
@@ -3087,20 +3149,22 @@ class OcCalendarComponent {
|
|
|
3087
3149
|
this.weekDays = weekDaysMap[this.ocLanguage];
|
|
3088
3150
|
}
|
|
3089
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 }); }
|
|
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" }] }); }
|
|
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" }] }); }
|
|
3091
3153
|
}
|
|
3092
3154
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcCalendarComponent, decorators: [{
|
|
3093
3155
|
type: Component,
|
|
3094
3156
|
args: [{ selector: 'oc-calendar', standalone: true, host: {
|
|
3095
3157
|
'[style.width]': 'computedWidth',
|
|
3096
3158
|
'[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"] }]
|
|
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"] }]
|
|
3098
3160
|
}], ctorParameters: () => [{ type: StyleThemeService }], propDecorators: { ocSelectionMode: [{
|
|
3099
3161
|
type: Input
|
|
3100
3162
|
}], ocStartDate: [{
|
|
3101
3163
|
type: Input
|
|
3102
3164
|
}], ocEndDate: [{
|
|
3103
3165
|
type: Input
|
|
3166
|
+
}], ocSelectedDates: [{
|
|
3167
|
+
type: Input
|
|
3104
3168
|
}], ocMinDate: [{
|
|
3105
3169
|
type: Input
|
|
3106
3170
|
}], ocMaxDate: [{
|
|
@@ -3129,6 +3193,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
3129
3193
|
type: Output
|
|
3130
3194
|
}], ocRangeSelected: [{
|
|
3131
3195
|
type: Output
|
|
3196
|
+
}], ocMultipleDatesSelected: [{
|
|
3197
|
+
type: Output
|
|
3132
3198
|
}] } });
|
|
3133
3199
|
|
|
3134
3200
|
/*
|