otimus-library 0.4.88 → 0.4.89
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 +41 -8
- package/fesm2022/otimus-library.mjs.map +1 -1
- package/index.d.ts +6 -3
- package/package.json +1 -1
|
@@ -2063,11 +2063,11 @@ class OcBreadcrumbComponent {
|
|
|
2063
2063
|
this.ocCrumbClick.emit(item);
|
|
2064
2064
|
}
|
|
2065
2065
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2066
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcBreadcrumbComponent, isStandalone: true, selector: "oc-breadcrumb", inputs: { ocItems: "ocItems" }, outputs: { ocCrumbClick: "ocCrumbClick" }, ngImport: i0, template: "<nav\n class=\"oc-breadcrumb\"\n aria-label=\"breadcrumb\"\n>\n <ol class=\"oc-breadcrumb-list\">\n @for (item of ocItems; track $index; let i = $index) {\n @let last = isLast(i);\n <li\n class=\"oc-breadcrumb-item\"\n [class.is-last]=\"last\"\n >\n @if (last || !item.route) {\n <span\n class=\"oc-breadcrumb-crumb\"\n [class.is-last]=\"last\"\n [attr.aria-current]=\"last ? 'page' : null\"\n >\n @if (item.icon) {\n <span class=\"material-symbols-outlined oc-breadcrumb-icon\">{{ item.icon }}</span>\n }\n <span class=\"oc-breadcrumb-label\">{{ item.label }}</span>\n </span>\n } @else {\n <a\n class=\"oc-breadcrumb-crumb\"\n [routerLink]=\"item.route\"\n [queryParams]=\"item.queryParams\"\n (click)=\"onCrumbClick($event, item, last)\"\n >\n @if (item.icon) {\n <span class=\"material-symbols-outlined oc-breadcrumb-icon\">{{ item.icon }}</span>\n }\n <span class=\"oc-breadcrumb-label\">{{ item.label }}</span>\n </a>\n }\n\n @if (!last) {\n <span\n class=\"material-symbols-outlined oc-breadcrumb-separator\"\n aria-hidden=\"true\"\n >keyboard_arrow_right</span\n >\n }\n </li>\n }\n </ol>\n</nav>\n", styles: [":host{display:block}.oc-breadcrumb{display:block;width:100%}.oc-breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;gap:2px;list-style:none;margin:0;padding:0}.oc-breadcrumb-item{display:inline-flex;align-items:center;gap:2px;min-width:0}.oc-breadcrumb-crumb{display:inline-flex;align-items:center;gap:4px;padding:4px 6px;border-radius:6px;color:#8f9596;font-size:.875rem;font-weight:400;line-height:1.2;text-decoration:none;transition:background-color .18s ease,color .18s ease}a.oc-breadcrumb-crumb{cursor:pointer}a.oc-breadcrumb-crumb:hover{background-color:#f7f7f7;color:#353535}a.oc-breadcrumb-crumb:focus-visible{outline:2px solid #8850be;outline-offset:2px}.oc-breadcrumb-crumb.is-last{color:#353535;font-weight:500;cursor:default;pointer-events:none}.oc-breadcrumb-icon{font-size:1rem;line-height:1;flex-shrink:0}.oc-breadcrumb-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.oc-breadcrumb-separator{font-size:1.125rem;line-height:1;color:#d1d5db;-webkit-user-select:none;user-select:none;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
|
|
2066
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcBreadcrumbComponent, isStandalone: true, selector: "oc-breadcrumb", inputs: { ocItems: "ocItems" }, outputs: { ocCrumbClick: "ocCrumbClick" }, ngImport: i0, template: "<nav\n class=\"oc-breadcrumb\"\n aria-label=\"breadcrumb\"\n>\n <ol class=\"oc-breadcrumb-list\">\n @for (item of ocItems; track $index; let i = $index) {\n @let last = isLast(i);\n <li\n class=\"oc-breadcrumb-item\"\n [class.is-last]=\"last\"\n >\n @if (last || !item.route) {\n <span\n class=\"oc-breadcrumb-crumb\"\n [class.is-last]=\"last\"\n [class.is-clickable]=\"!last\"\n [attr.aria-current]=\"last ? 'page' : null\"\n [attr.role]=\"!last ? 'button' : null\"\n [attr.tabindex]=\"!last ? 0 : null\"\n (click)=\"onCrumbClick($event, item, last)\"\n (keydown.enter)=\"onCrumbClick($event, item, last)\"\n (keydown.space)=\"onCrumbClick($event, item, last)\"\n >\n @if (item.icon) {\n <span class=\"material-symbols-outlined oc-breadcrumb-icon\">{{ item.icon }}</span>\n }\n <span class=\"oc-breadcrumb-label\">{{ item.label }}</span>\n </span>\n } @else {\n <a\n class=\"oc-breadcrumb-crumb\"\n [routerLink]=\"item.route\"\n [queryParams]=\"item.queryParams\"\n (click)=\"onCrumbClick($event, item, last)\"\n >\n @if (item.icon) {\n <span class=\"material-symbols-outlined oc-breadcrumb-icon\">{{ item.icon }}</span>\n }\n <span class=\"oc-breadcrumb-label\">{{ item.label }}</span>\n </a>\n }\n\n @if (!last) {\n <span\n class=\"material-symbols-outlined oc-breadcrumb-separator\"\n aria-hidden=\"true\"\n >keyboard_arrow_right</span\n >\n }\n </li>\n }\n </ol>\n</nav>\n", styles: [":host{display:block}.oc-breadcrumb{display:block;width:100%}.oc-breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;gap:2px;list-style:none;margin:0;padding:0}.oc-breadcrumb-item{display:inline-flex;align-items:center;gap:2px;min-width:0}.oc-breadcrumb-crumb{display:inline-flex;align-items:center;gap:4px;padding:4px 6px;border-radius:6px;color:#8f9596;font-size:.875rem;font-weight:400;line-height:1.2;text-decoration:none;transition:background-color .18s ease,color .18s ease}a.oc-breadcrumb-crumb,.oc-breadcrumb-crumb.is-clickable{cursor:pointer}a.oc-breadcrumb-crumb:hover,.oc-breadcrumb-crumb.is-clickable:hover{background-color:#f7f7f7;color:#353535}a.oc-breadcrumb-crumb:focus-visible,.oc-breadcrumb-crumb.is-clickable:focus-visible{outline:2px solid #8850be;outline-offset:2px}.oc-breadcrumb-crumb.is-last{color:#353535;font-weight:500;cursor:default;pointer-events:none}.oc-breadcrumb-icon{font-size:1rem;line-height:1;flex-shrink:0}.oc-breadcrumb-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.oc-breadcrumb-separator{font-size:1.125rem;line-height:1;color:#d1d5db;-webkit-user-select:none;user-select:none;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
|
|
2067
2067
|
}
|
|
2068
2068
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcBreadcrumbComponent, decorators: [{
|
|
2069
2069
|
type: Component,
|
|
2070
|
-
args: [{ selector: 'oc-breadcrumb', standalone: true, imports: [CommonModule, RouterModule], template: "<nav\n class=\"oc-breadcrumb\"\n aria-label=\"breadcrumb\"\n>\n <ol class=\"oc-breadcrumb-list\">\n @for (item of ocItems; track $index; let i = $index) {\n @let last = isLast(i);\n <li\n class=\"oc-breadcrumb-item\"\n [class.is-last]=\"last\"\n >\n @if (last || !item.route) {\n <span\n class=\"oc-breadcrumb-crumb\"\n [class.is-last]=\"last\"\n [attr.aria-current]=\"last ? 'page' : null\"\n >\n @if (item.icon) {\n <span class=\"material-symbols-outlined oc-breadcrumb-icon\">{{ item.icon }}</span>\n }\n <span class=\"oc-breadcrumb-label\">{{ item.label }}</span>\n </span>\n } @else {\n <a\n class=\"oc-breadcrumb-crumb\"\n [routerLink]=\"item.route\"\n [queryParams]=\"item.queryParams\"\n (click)=\"onCrumbClick($event, item, last)\"\n >\n @if (item.icon) {\n <span class=\"material-symbols-outlined oc-breadcrumb-icon\">{{ item.icon }}</span>\n }\n <span class=\"oc-breadcrumb-label\">{{ item.label }}</span>\n </a>\n }\n\n @if (!last) {\n <span\n class=\"material-symbols-outlined oc-breadcrumb-separator\"\n aria-hidden=\"true\"\n >keyboard_arrow_right</span\n >\n }\n </li>\n }\n </ol>\n</nav>\n", styles: [":host{display:block}.oc-breadcrumb{display:block;width:100%}.oc-breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;gap:2px;list-style:none;margin:0;padding:0}.oc-breadcrumb-item{display:inline-flex;align-items:center;gap:2px;min-width:0}.oc-breadcrumb-crumb{display:inline-flex;align-items:center;gap:4px;padding:4px 6px;border-radius:6px;color:#8f9596;font-size:.875rem;font-weight:400;line-height:1.2;text-decoration:none;transition:background-color .18s ease,color .18s ease}a.oc-breadcrumb-crumb{cursor:pointer}a.oc-breadcrumb-crumb:hover{background-color:#f7f7f7;color:#353535}a.oc-breadcrumb-crumb:focus-visible{outline:2px solid #8850be;outline-offset:2px}.oc-breadcrumb-crumb.is-last{color:#353535;font-weight:500;cursor:default;pointer-events:none}.oc-breadcrumb-icon{font-size:1rem;line-height:1;flex-shrink:0}.oc-breadcrumb-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.oc-breadcrumb-separator{font-size:1.125rem;line-height:1;color:#d1d5db;-webkit-user-select:none;user-select:none;flex-shrink:0}\n"] }]
|
|
2070
|
+
args: [{ selector: 'oc-breadcrumb', standalone: true, imports: [CommonModule, RouterModule], template: "<nav\n class=\"oc-breadcrumb\"\n aria-label=\"breadcrumb\"\n>\n <ol class=\"oc-breadcrumb-list\">\n @for (item of ocItems; track $index; let i = $index) {\n @let last = isLast(i);\n <li\n class=\"oc-breadcrumb-item\"\n [class.is-last]=\"last\"\n >\n @if (last || !item.route) {\n <span\n class=\"oc-breadcrumb-crumb\"\n [class.is-last]=\"last\"\n [class.is-clickable]=\"!last\"\n [attr.aria-current]=\"last ? 'page' : null\"\n [attr.role]=\"!last ? 'button' : null\"\n [attr.tabindex]=\"!last ? 0 : null\"\n (click)=\"onCrumbClick($event, item, last)\"\n (keydown.enter)=\"onCrumbClick($event, item, last)\"\n (keydown.space)=\"onCrumbClick($event, item, last)\"\n >\n @if (item.icon) {\n <span class=\"material-symbols-outlined oc-breadcrumb-icon\">{{ item.icon }}</span>\n }\n <span class=\"oc-breadcrumb-label\">{{ item.label }}</span>\n </span>\n } @else {\n <a\n class=\"oc-breadcrumb-crumb\"\n [routerLink]=\"item.route\"\n [queryParams]=\"item.queryParams\"\n (click)=\"onCrumbClick($event, item, last)\"\n >\n @if (item.icon) {\n <span class=\"material-symbols-outlined oc-breadcrumb-icon\">{{ item.icon }}</span>\n }\n <span class=\"oc-breadcrumb-label\">{{ item.label }}</span>\n </a>\n }\n\n @if (!last) {\n <span\n class=\"material-symbols-outlined oc-breadcrumb-separator\"\n aria-hidden=\"true\"\n >keyboard_arrow_right</span\n >\n }\n </li>\n }\n </ol>\n</nav>\n", styles: [":host{display:block}.oc-breadcrumb{display:block;width:100%}.oc-breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;gap:2px;list-style:none;margin:0;padding:0}.oc-breadcrumb-item{display:inline-flex;align-items:center;gap:2px;min-width:0}.oc-breadcrumb-crumb{display:inline-flex;align-items:center;gap:4px;padding:4px 6px;border-radius:6px;color:#8f9596;font-size:.875rem;font-weight:400;line-height:1.2;text-decoration:none;transition:background-color .18s ease,color .18s ease}a.oc-breadcrumb-crumb,.oc-breadcrumb-crumb.is-clickable{cursor:pointer}a.oc-breadcrumb-crumb:hover,.oc-breadcrumb-crumb.is-clickable:hover{background-color:#f7f7f7;color:#353535}a.oc-breadcrumb-crumb:focus-visible,.oc-breadcrumb-crumb.is-clickable:focus-visible{outline:2px solid #8850be;outline-offset:2px}.oc-breadcrumb-crumb.is-last{color:#353535;font-weight:500;cursor:default;pointer-events:none}.oc-breadcrumb-icon{font-size:1rem;line-height:1;flex-shrink:0}.oc-breadcrumb-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.oc-breadcrumb-separator{font-size:1.125rem;line-height:1;color:#d1d5db;-webkit-user-select:none;user-select:none;flex-shrink:0}\n"] }]
|
|
2071
2071
|
}], propDecorators: { ocItems: [{
|
|
2072
2072
|
type: Input
|
|
2073
2073
|
}], ocCrumbClick: [{
|
|
@@ -2430,6 +2430,11 @@ class OcCalendarComponent {
|
|
|
2430
2430
|
if (changes['ocSelectionMode'] && !changes['ocSelectionMode'].firstChange) {
|
|
2431
2431
|
this.resetSelection();
|
|
2432
2432
|
}
|
|
2433
|
+
const target = this.dateChangedAcrossMonths(changes['ocCurrentDate']) ||
|
|
2434
|
+
this.dateChangedAcrossMonths(changes['ocStartDate']);
|
|
2435
|
+
if (target && !this.isSameMonth(target, this.currentMonth)) {
|
|
2436
|
+
this.currentMonth = new Date(target.getFullYear(), target.getMonth(), 1);
|
|
2437
|
+
}
|
|
2433
2438
|
if (changes['ocStartDate'] ||
|
|
2434
2439
|
changes['ocEndDate'] ||
|
|
2435
2440
|
changes['ocMinDate'] ||
|
|
@@ -2440,6 +2445,24 @@ class OcCalendarComponent {
|
|
|
2440
2445
|
this.generateCalendar();
|
|
2441
2446
|
}
|
|
2442
2447
|
}
|
|
2448
|
+
dateChangedAcrossMonths(change) {
|
|
2449
|
+
if (!change)
|
|
2450
|
+
return null;
|
|
2451
|
+
const curr = change.currentValue;
|
|
2452
|
+
const prev = change.previousValue;
|
|
2453
|
+
if (!curr)
|
|
2454
|
+
return null;
|
|
2455
|
+
if (change.firstChange)
|
|
2456
|
+
return curr;
|
|
2457
|
+
if (!prev)
|
|
2458
|
+
return curr;
|
|
2459
|
+
if (this.isSameMonth(curr, prev))
|
|
2460
|
+
return null;
|
|
2461
|
+
return curr;
|
|
2462
|
+
}
|
|
2463
|
+
isSameMonth(a, b) {
|
|
2464
|
+
return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
|
|
2465
|
+
}
|
|
2443
2466
|
resetSelection() {
|
|
2444
2467
|
this.ocStartDate = undefined;
|
|
2445
2468
|
this.ocEndDate = undefined;
|
|
@@ -2510,6 +2533,11 @@ class OcCalendarComponent {
|
|
|
2510
2533
|
}
|
|
2511
2534
|
this.generateCalendar();
|
|
2512
2535
|
}
|
|
2536
|
+
goToToday() {
|
|
2537
|
+
const today = new Date();
|
|
2538
|
+
this.currentMonth = new Date(today.getFullYear(), today.getMonth(), 1);
|
|
2539
|
+
this.generateCalendar();
|
|
2540
|
+
}
|
|
2513
2541
|
generateCalendar() {
|
|
2514
2542
|
const startOfMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth(), 1);
|
|
2515
2543
|
const startDay = (startOfMonth.getDay() - this.ocWeekStartsOn + 7) % 7;
|
|
@@ -2526,16 +2554,21 @@ class OcCalendarComponent {
|
|
|
2526
2554
|
const isCurrentDate = this.ocCurrentDate
|
|
2527
2555
|
? this.isSameDate(date, this.ocCurrentDate)
|
|
2528
2556
|
: this.isLastSelectedDate(date);
|
|
2557
|
+
const isCurrentMonth = this.isSameMonth(date, this.currentMonth);
|
|
2558
|
+
const isSelectedRaw = this.ocSelectionMode === 'multiple'
|
|
2559
|
+
? isCurrentDate
|
|
2560
|
+
: this.isSameDate(date, this.ocStartDate) || this.isSameDate(date, this.ocEndDate);
|
|
2529
2561
|
days.push({
|
|
2530
2562
|
date,
|
|
2531
|
-
isCurrentMonth
|
|
2532
|
-
isSelected:
|
|
2533
|
-
? isCurrentDate
|
|
2534
|
-
: this.isSameDate(date, this.ocStartDate) || this.isSameDate(date, this.ocEndDate),
|
|
2563
|
+
isCurrentMonth,
|
|
2564
|
+
isSelected: isSelectedRaw && isCurrentMonth,
|
|
2535
2565
|
isInRange: this.isDateInRange(date),
|
|
2536
2566
|
isDisabled: this.isDateDisabled(date),
|
|
2537
|
-
isToday: this.isSameDate(date, today),
|
|
2538
|
-
isPreviouslySelected: this.ocSelectionMode === 'multiple' &&
|
|
2567
|
+
isToday: this.isSameDate(date, today) && isCurrentMonth,
|
|
2568
|
+
isPreviouslySelected: this.ocSelectionMode === 'multiple' &&
|
|
2569
|
+
isMultipleSelected &&
|
|
2570
|
+
!isCurrentDate &&
|
|
2571
|
+
isCurrentMonth,
|
|
2539
2572
|
});
|
|
2540
2573
|
}
|
|
2541
2574
|
this.weeks.push(days);
|