otimus-library 0.3.62 → 0.3.65
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 +40 -8
- package/fesm2022/otimus-library.mjs.map +1 -1
- package/index.d.ts +11 -3
- package/package.json +1 -1
|
@@ -2391,13 +2391,33 @@ class OcAccordionComponent {
|
|
|
2391
2391
|
this.styleThemeService = styleThemeService;
|
|
2392
2392
|
this.ocAlternate = true;
|
|
2393
2393
|
this.ocStyle = 'otimus';
|
|
2394
|
+
this.ocDynamicItems = false;
|
|
2395
|
+
this.itemSubscriptions = [];
|
|
2394
2396
|
}
|
|
2395
2397
|
ngAfterViewInit() {
|
|
2396
|
-
this.
|
|
2398
|
+
this.subscribeToItems();
|
|
2399
|
+
if (this.ocDynamicItems) {
|
|
2400
|
+
this.changesSubscription = this.items.changes.subscribe(() => {
|
|
2401
|
+
this.subscribeToItems();
|
|
2402
|
+
});
|
|
2403
|
+
}
|
|
2404
|
+
}
|
|
2405
|
+
ngOnDestroy() {
|
|
2406
|
+
this.cleanupSubscriptions();
|
|
2407
|
+
this.changesSubscription?.unsubscribe();
|
|
2408
|
+
}
|
|
2409
|
+
subscribeToItems() {
|
|
2410
|
+
this.cleanupSubscriptions();
|
|
2411
|
+
this.items.forEach((item) => {
|
|
2397
2412
|
item.ocStyle = this.styleThemeService.getStyleTheme() || this.ocStyle;
|
|
2398
|
-
item.closeAllItems.subscribe(() => this.closeAllItems());
|
|
2413
|
+
const sub = item.closeAllItems.subscribe(() => this.closeAllItems());
|
|
2414
|
+
this.itemSubscriptions.push(sub);
|
|
2399
2415
|
});
|
|
2400
2416
|
}
|
|
2417
|
+
cleanupSubscriptions() {
|
|
2418
|
+
this.itemSubscriptions.forEach((sub) => sub.unsubscribe());
|
|
2419
|
+
this.itemSubscriptions = [];
|
|
2420
|
+
}
|
|
2401
2421
|
closeAllItems() {
|
|
2402
2422
|
if (this.ocAlternate) {
|
|
2403
2423
|
this.items.forEach((item) => (item.ocIsOpen = false));
|
|
@@ -2413,7 +2433,7 @@ class OcAccordionComponent {
|
|
|
2413
2433
|
});
|
|
2414
2434
|
}
|
|
2415
2435
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcAccordionComponent, deps: [{ token: StyleThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2416
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: OcAccordionComponent, isStandalone: true, selector: "oc-accordion", inputs: { ocAlternate: "ocAlternate", ocCurrentIndex: "ocCurrentIndex", ocStyle: "ocStyle" }, queries: [{ propertyName: "items", predicate: OcAccordionItemComponent }], ngImport: i0, template: "<div>\n <ng-content></ng-content>\n</div>", styles: [".oc-accordion{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
2436
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: OcAccordionComponent, isStandalone: true, selector: "oc-accordion", inputs: { ocAlternate: "ocAlternate", ocCurrentIndex: "ocCurrentIndex", ocStyle: "ocStyle", ocDynamicItems: "ocDynamicItems" }, queries: [{ propertyName: "items", predicate: OcAccordionItemComponent }], ngImport: i0, template: "<div>\n <ng-content></ng-content>\n</div>", styles: [".oc-accordion{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
2417
2437
|
}
|
|
2418
2438
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcAccordionComponent, decorators: [{
|
|
2419
2439
|
type: Component,
|
|
@@ -2427,6 +2447,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
2427
2447
|
type: Input
|
|
2428
2448
|
}], ocStyle: [{
|
|
2429
2449
|
type: Input
|
|
2450
|
+
}], ocDynamicItems: [{
|
|
2451
|
+
type: Input
|
|
2430
2452
|
}] } });
|
|
2431
2453
|
|
|
2432
2454
|
class OcMessageComponent {
|
|
@@ -2966,6 +2988,7 @@ class OcCalendarComponent {
|
|
|
2966
2988
|
this.ocDateSelected = new EventEmitter();
|
|
2967
2989
|
this.ocRangeSelected = new EventEmitter();
|
|
2968
2990
|
this.ocMultipleDatesSelected = new EventEmitter();
|
|
2991
|
+
this.ocCurrentDateChange = new EventEmitter();
|
|
2969
2992
|
this.currentMonth = new Date();
|
|
2970
2993
|
this.weeks = [];
|
|
2971
2994
|
this.weekDays = [];
|
|
@@ -2979,7 +3002,8 @@ class OcCalendarComponent {
|
|
|
2979
3002
|
changes['ocEndDate'] ||
|
|
2980
3003
|
changes['ocMinDate'] ||
|
|
2981
3004
|
changes['ocMaxDate'] ||
|
|
2982
|
-
changes['ocSelectedDates']
|
|
3005
|
+
changes['ocSelectedDates'] ||
|
|
3006
|
+
changes['ocCurrentDate']) {
|
|
2983
3007
|
this.generateCalendar();
|
|
2984
3008
|
}
|
|
2985
3009
|
}
|
|
@@ -2997,6 +3021,8 @@ class OcCalendarComponent {
|
|
|
2997
3021
|
this.ocDateSelected.emit(day.date);
|
|
2998
3022
|
}
|
|
2999
3023
|
else if (this.ocSelectionMode === 'multiple') {
|
|
3024
|
+
this.ocCurrentDate = day.date;
|
|
3025
|
+
this.ocCurrentDateChange.emit(day.date);
|
|
3000
3026
|
const existingIndex = this.ocSelectedDates.findIndex((d) => this.isSameDate(d, day.date));
|
|
3001
3027
|
if (existingIndex >= 0) {
|
|
3002
3028
|
this.ocSelectedDates.splice(existingIndex, 1);
|
|
@@ -3058,12 +3084,14 @@ class OcCalendarComponent {
|
|
|
3058
3084
|
const date = new Date(startDate);
|
|
3059
3085
|
date.setDate(startDate.getDate() + week * 7 + day);
|
|
3060
3086
|
const isMultipleSelected = this.isDateInMultipleSelection(date);
|
|
3061
|
-
const
|
|
3087
|
+
const isCurrentDate = this.ocCurrentDate
|
|
3088
|
+
? this.isSameDate(date, this.ocCurrentDate)
|
|
3089
|
+
: this.isLastSelectedDate(date);
|
|
3062
3090
|
days.push({
|
|
3063
3091
|
date,
|
|
3064
3092
|
isCurrentMonth: date.getMonth() === this.currentMonth.getMonth(),
|
|
3065
3093
|
isSelected: this.ocSelectionMode === 'multiple'
|
|
3066
|
-
?
|
|
3094
|
+
? isCurrentDate
|
|
3067
3095
|
: this.isSameDate(date, this.ocStartDate) ||
|
|
3068
3096
|
this.isSameDate(date, this.ocEndDate),
|
|
3069
3097
|
isInRange: this.isDateInRange(date),
|
|
@@ -3071,7 +3099,7 @@ class OcCalendarComponent {
|
|
|
3071
3099
|
isToday: this.isSameDate(date, today),
|
|
3072
3100
|
isPreviouslySelected: this.ocSelectionMode === 'multiple' &&
|
|
3073
3101
|
isMultipleSelected &&
|
|
3074
|
-
!
|
|
3102
|
+
!isCurrentDate,
|
|
3075
3103
|
});
|
|
3076
3104
|
}
|
|
3077
3105
|
this.weeks.push(days);
|
|
@@ -3149,7 +3177,7 @@ class OcCalendarComponent {
|
|
|
3149
3177
|
this.weekDays = weekDaysMap[this.ocLanguage];
|
|
3150
3178
|
}
|
|
3151
3179
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcCalendarComponent, deps: [{ token: StyleThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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" }] }); }
|
|
3180
|
+
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" }] }); }
|
|
3153
3181
|
}
|
|
3154
3182
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcCalendarComponent, decorators: [{
|
|
3155
3183
|
type: Component,
|
|
@@ -3165,6 +3193,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
3165
3193
|
type: Input
|
|
3166
3194
|
}], ocSelectedDates: [{
|
|
3167
3195
|
type: Input
|
|
3196
|
+
}], ocCurrentDate: [{
|
|
3197
|
+
type: Input
|
|
3168
3198
|
}], ocMinDate: [{
|
|
3169
3199
|
type: Input
|
|
3170
3200
|
}], ocMaxDate: [{
|
|
@@ -3195,6 +3225,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
3195
3225
|
type: Output
|
|
3196
3226
|
}], ocMultipleDatesSelected: [{
|
|
3197
3227
|
type: Output
|
|
3228
|
+
}], ocCurrentDateChange: [{
|
|
3229
|
+
type: Output
|
|
3198
3230
|
}] } });
|
|
3199
3231
|
|
|
3200
3232
|
/*
|