@forgeroute/ui 0.4.11 → 0.4.12

package/fesm2022/forgeroute-ui.mjs

@@ -2965,7 +2965,7 @@ var CheckboxComponent = class CheckboxComponent {
     }
   `,
 			isInline: true,
-			styles: [".cb-field{display:inline-flex;flex-direction:column;gap:4px}.cb-group{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:0;min-width:0}.cb-legend{padding:0;margin:0 0 8px;font-size:.8125rem;font-weight:600;color:#374151;line-height:1.2}.cb-required{color:#ef4444;margin-left:2px}.cb-options{display:flex;flex-direction:column;gap:10px}.cb-options.cb-horizontal{flex-direction:row;flex-wrap:wrap;gap:8px 20px}.cb-field.cb-has-trailing{display:flex}.cb-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.cb-trailing{display:inline-flex;align-items:center;flex-shrink:0}.cb-option{display:flex;flex-direction:column;gap:4px}.cb-group-desc{margin-left:0}.cb-indent{margin-left:29px}.cb-desc{margin:0 0 0 29px;font-size:.75rem;line-height:1.4;color:#64748b}.cb-desc-error{color:#ef4444}.cb-error .cb-box:not(.cb-checked){border-color:#ef4444}.cb-wrap{position:relative;vertical-align:top;display:inline-flex;align-items:center;gap:9px;cursor:pointer;-webkit-user-select:none;user-select:none}.cb-wrap.cb-disabled{cursor:not-allowed;opacity:.5}.cb-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cb-wrap:has(.cb-hidden:focus-visible) .cb-box{outline:2px solid #3b82f6;outline-offset:2px}@media(pointer:coarse),(max-width:480px){.cb-wrap{position:relative}.cb-hidden{width:44px;height:44px;margin:0;clip:auto;overflow:visible;left:-12px;top:50%;transform:translateY(-50%);opacity:0;cursor:pointer;z-index:1}.cb-wrap.cb-disabled .cb-hidden{cursor:not-allowed}}.cb-box{flex-shrink:0;width:20px;height:20px;border:2px solid #cbd5e1;border-radius:5px;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}.cb-box.cb-checked,.cb-box.cb-indeterminate{background:#3b82f6;border-color:#3b82f6}.cb-wrap:hover .cb-box:not(.cb-checked):not(.cb-disabled){border-color:#3b82f6}@media(max-width:640px),(pointer:coarse){.cb-box{position:relative}.cb-box:after{content:\"\";position:absolute;inset:-12px}}.cb-label{font-size:.875rem;color:#334155;line-height:1.4}\n"],
+			styles: [".cb-field{display:inline-flex;flex-direction:column;gap:4px;vertical-align:top}.cb-group{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:0;min-width:0}.cb-legend{padding:0;margin:0 0 8px;font-size:.8125rem;font-weight:600;color:#374151;line-height:1.2}.cb-required{color:#ef4444;margin-left:2px}.cb-options{display:flex;flex-direction:column;gap:10px}.cb-options.cb-horizontal{flex-direction:row;flex-wrap:wrap;gap:8px 20px}.cb-field.cb-has-trailing{display:flex}.cb-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.cb-trailing{display:inline-flex;align-items:center;flex-shrink:0}.cb-option{display:flex;flex-direction:column;gap:4px}.cb-group-desc{margin-left:0}.cb-indent{margin-left:29px}.cb-desc{margin:0 0 0 29px;font-size:.75rem;line-height:1.4;color:#64748b}.cb-desc-error{color:#ef4444}.cb-error .cb-box:not(.cb-checked){border-color:#ef4444}.cb-wrap{position:relative;vertical-align:top;display:inline-flex;align-items:center;gap:9px;cursor:pointer;-webkit-user-select:none;user-select:none}.cb-wrap.cb-disabled{cursor:not-allowed;opacity:.5}.cb-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cb-wrap:has(.cb-hidden:focus-visible) .cb-box{outline:2px solid #3b82f6;outline-offset:2px}@media(pointer:coarse),(max-width:480px){.cb-wrap{position:relative}.cb-hidden{width:44px;height:44px;margin:0;clip:auto;overflow:visible;left:-12px;top:50%;transform:translateY(-50%);opacity:0;cursor:pointer;z-index:1}.cb-wrap.cb-disabled .cb-hidden{cursor:not-allowed}}.cb-box{flex-shrink:0;width:20px;height:20px;border:2px solid #cbd5e1;border-radius:5px;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}.cb-box.cb-checked,.cb-box.cb-indeterminate{background:#3b82f6;border-color:#3b82f6}.cb-wrap:hover .cb-box:not(.cb-checked):not(.cb-disabled){border-color:#3b82f6}@media(max-width:640px),(pointer:coarse){.cb-box{position:relative}.cb-box:after{content:\"\";position:absolute;inset:-12px}}.cb-label{font-size:.875rem;color:#334155;line-height:1.4}\n"],
 			dependencies: [{
 				kind: "directive",
 				type: NgTemplateOutlet,
@@ -3104,7 +3104,7 @@ i0.ɵɵngDeclareClassMetadata({
     </div>
     }
   `,
-			styles: [".cb-field{display:inline-flex;flex-direction:column;gap:4px}.cb-group{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:0;min-width:0}.cb-legend{padding:0;margin:0 0 8px;font-size:.8125rem;font-weight:600;color:#374151;line-height:1.2}.cb-required{color:#ef4444;margin-left:2px}.cb-options{display:flex;flex-direction:column;gap:10px}.cb-options.cb-horizontal{flex-direction:row;flex-wrap:wrap;gap:8px 20px}.cb-field.cb-has-trailing{display:flex}.cb-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.cb-trailing{display:inline-flex;align-items:center;flex-shrink:0}.cb-option{display:flex;flex-direction:column;gap:4px}.cb-group-desc{margin-left:0}.cb-indent{margin-left:29px}.cb-desc{margin:0 0 0 29px;font-size:.75rem;line-height:1.4;color:#64748b}.cb-desc-error{color:#ef4444}.cb-error .cb-box:not(.cb-checked){border-color:#ef4444}.cb-wrap{position:relative;vertical-align:top;display:inline-flex;align-items:center;gap:9px;cursor:pointer;-webkit-user-select:none;user-select:none}.cb-wrap.cb-disabled{cursor:not-allowed;opacity:.5}.cb-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cb-wrap:has(.cb-hidden:focus-visible) .cb-box{outline:2px solid #3b82f6;outline-offset:2px}@media(pointer:coarse),(max-width:480px){.cb-wrap{position:relative}.cb-hidden{width:44px;height:44px;margin:0;clip:auto;overflow:visible;left:-12px;top:50%;transform:translateY(-50%);opacity:0;cursor:pointer;z-index:1}.cb-wrap.cb-disabled .cb-hidden{cursor:not-allowed}}.cb-box{flex-shrink:0;width:20px;height:20px;border:2px solid #cbd5e1;border-radius:5px;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}.cb-box.cb-checked,.cb-box.cb-indeterminate{background:#3b82f6;border-color:#3b82f6}.cb-wrap:hover .cb-box:not(.cb-checked):not(.cb-disabled){border-color:#3b82f6}@media(max-width:640px),(pointer:coarse){.cb-box{position:relative}.cb-box:after{content:\"\";position:absolute;inset:-12px}}.cb-label{font-size:.875rem;color:#334155;line-height:1.4}\n"]
+			styles: [".cb-field{display:inline-flex;flex-direction:column;gap:4px;vertical-align:top}.cb-group{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:0;min-width:0}.cb-legend{padding:0;margin:0 0 8px;font-size:.8125rem;font-weight:600;color:#374151;line-height:1.2}.cb-required{color:#ef4444;margin-left:2px}.cb-options{display:flex;flex-direction:column;gap:10px}.cb-options.cb-horizontal{flex-direction:row;flex-wrap:wrap;gap:8px 20px}.cb-field.cb-has-trailing{display:flex}.cb-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.cb-trailing{display:inline-flex;align-items:center;flex-shrink:0}.cb-option{display:flex;flex-direction:column;gap:4px}.cb-group-desc{margin-left:0}.cb-indent{margin-left:29px}.cb-desc{margin:0 0 0 29px;font-size:.75rem;line-height:1.4;color:#64748b}.cb-desc-error{color:#ef4444}.cb-error .cb-box:not(.cb-checked){border-color:#ef4444}.cb-wrap{position:relative;vertical-align:top;display:inline-flex;align-items:center;gap:9px;cursor:pointer;-webkit-user-select:none;user-select:none}.cb-wrap.cb-disabled{cursor:not-allowed;opacity:.5}.cb-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cb-wrap:has(.cb-hidden:focus-visible) .cb-box{outline:2px solid #3b82f6;outline-offset:2px}@media(pointer:coarse),(max-width:480px){.cb-wrap{position:relative}.cb-hidden{width:44px;height:44px;margin:0;clip:auto;overflow:visible;left:-12px;top:50%;transform:translateY(-50%);opacity:0;cursor:pointer;z-index:1}.cb-wrap.cb-disabled .cb-hidden{cursor:not-allowed}}.cb-box{flex-shrink:0;width:20px;height:20px;border:2px solid #cbd5e1;border-radius:5px;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}.cb-box.cb-checked,.cb-box.cb-indeterminate{background:#3b82f6;border-color:#3b82f6}.cb-wrap:hover .cb-box:not(.cb-checked):not(.cb-disabled){border-color:#3b82f6}@media(max-width:640px),(pointer:coarse){.cb-box{position:relative}.cb-box:after{content:\"\";position:absolute;inset:-12px}}.cb-label{font-size:.875rem;color:#334155;line-height:1.4}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -34273,6 +34273,11 @@ function toDateStr(d) {
 function fromDateStr(dateStr) {
 	return /* @__PURE__ */ new Date(dateStr + "T00:00");
 }
+function isValidDateStr(dateStr) {
+	if (!/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) return false;
+	const d = fromDateStr(dateStr);
+	return !isNaN(d.getTime()) && toDateStr(d) === dateStr;
+}
 function buildMonthCells(anchor, todayStr) {
 	const y = anchor.getFullYear();
 	const m = anchor.getMonth();
@@ -34450,6 +34455,7 @@ var CalendarComponent = class CalendarComponent {
 		this.showFilterCounts = input(false, ...ngDevMode ? [{ debugName: "showFilterCounts" }] : /* istanbul ignore next */ []);
 		this.canCreate = input(false, ...ngDevMode ? [{ debugName: "canCreate" }] : /* istanbul ignore next */ []);
 		this.disablePast = input(false, ...ngDevMode ? [{ debugName: "disablePast" }] : /* istanbul ignore next */ []);
+		this.today = input(null, ...ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []);
 		this.maxVisible = input(3, ...ngDevMode ? [{ debugName: "maxVisible" }] : /* istanbul ignore next */ []);
 		this.chipLayout = input("inline", ...ngDevMode ? [{ debugName: "chipLayout" }] : /* istanbul ignore next */ []);
 		this.sortByTime = input(true, ...ngDevMode ? [{ debugName: "sortByTime" }] : /* istanbul ignore next */ []);
@@ -34475,9 +34481,14 @@ var CalendarComponent = class CalendarComponent {
 		];
 		this.skeletonCells = Array.from({ length: 42 }, (_, i) => i);
 		this.formatHour = formatHour;
-		this.todayStr = signal(toDateStr(/* @__PURE__ */ new Date()), ...ngDevMode ? [{ debugName: "todayStr" }] : /* istanbul ignore next */ []);
+		this.clockToday = signal(toDateStr(/* @__PURE__ */ new Date()), ...ngDevMode ? [{ debugName: "clockToday" }] : /* istanbul ignore next */ []);
+		this.todayStr = computed(() => {
+			const t = this.today();
+			return t && isValidDateStr(t) ? t : this.clockToday();
+		}, ...ngDevMode ? [{ debugName: "todayStr" }] : /* istanbul ignore next */ []);
 		this.focusedDate = signal(null, ...ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []);
 		this.lastRangeKey = "";
+		this.injector = inject(Injector);
 		this.hours = computed(() => Array.from({ length: Math.max(1, this.endHour() - this.startHour() + 1) }, (_, i) => i + this.startHour()), ...ngDevMode ? [{ debugName: "hours" }] : /* istanbul ignore next */ []);
 		this.monthCells = computed(() => buildMonthCells(this.anchorDate(), this.todayStr()), ...ngDevMode ? [{ debugName: "monthCells" }] : /* istanbul ignore next */ []);
 		this.weekDays = computed(() => buildWeekDays(this.anchorDate(), this.todayStr()), ...ngDevMode ? [{ debugName: "weekDays" }] : /* istanbul ignore next */ []);
@@ -34581,7 +34592,7 @@ var CalendarComponent = class CalendarComponent {
 		const zone = inject(NgZone);
 		const doc = inject(DOCUMENT);
 		let timer;
-		const refreshToday = () => zone.run(() => this.todayStr.set(toDateStr(/* @__PURE__ */ new Date())));
+		const refreshToday = () => zone.run(() => this.clockToday.set(toDateStr(/* @__PURE__ */ new Date())));
 		const schedule = () => {
 			const now = /* @__PURE__ */ new Date();
 			const next = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 1);
@@ -34626,8 +34637,8 @@ var CalendarComponent = class CalendarComponent {
 	}
 	goToday() {
 		this.focusedDate.set(null);
-		this.todayStr.set(toDateStr(/* @__PURE__ */ new Date()));
-		this.anchorDate.set(/* @__PURE__ */ new Date());
+		this.clockToday.set(toDateStr(/* @__PURE__ */ new Date()));
+		this.anchorDate.set(fromDateStr(this.todayStr()));
 	}
 	dowLabel(dateStr) {
 		return WEEK_DAY_LABELS[fromDateStr(dateStr).getDay()];
@@ -34671,6 +34682,11 @@ var CalendarComponent = class CalendarComponent {
 			return;
 		}
 		const d = fromDateStr(dateStr);
+		if (event.key === "PageUp" || event.key === "PageDown") {
+			event.preventDefault();
+			this.jumpMonths(d, (event.key === "PageUp" ? -1 : 1) * (event.shiftKey ? 12 : 1));
+			return;
+		}
 		const step = {
 			ArrowLeft: -1,
 			ArrowRight: 1,
@@ -34686,6 +34702,15 @@ var CalendarComponent = class CalendarComponent {
 		this.focusedDate.set(target);
 		this.host.nativeElement.querySelector(`.month-cell[data-date="${target}"]`)?.focus();
 	}
+	jumpMonths(from, months) {
+		const y = from.getFullYear();
+		const m = from.getMonth() + months;
+		const target = new Date(y, m, Math.min(from.getDate(), new Date(y, m + 1, 0).getDate()));
+		const targetStr = toDateStr(target);
+		this.focusedDate.set(targetStr);
+		this.anchorDate.set(target);
+		afterNextRender(() => this.host.nativeElement.querySelector(`.month-cell[data-date="${targetStr}"]`)?.focus(), { injector: this.injector });
+	}
 	onAddAllDay(dateStr, event) {
 		event.stopPropagation();
 		this.onDateClick(dateStr);
@@ -34819,6 +34844,13 @@ var CalendarComponent = class CalendarComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				today: {
+					classPropertyName: "today",
+					publicName: "today",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				maxVisible: {
 					classPropertyName: "maxVisible",
 					publicName: "maxVisible",
@@ -34907,7 +34939,7 @@ var CalendarComponent = class CalendarComponent {
       <div class="mobile-summary"><ng-content select="[calendar-summary-mobile]" /></div>
     }
 
-    @if (filters().length && !loading()) {
+    @if (filters().length) {
       <div class="filter-bar">
         @if (filterLabel()) { <div class="filter-bar-label">{{ filterLabel() }}</div> }
         <div class="filter-chips" role="group" [attr.aria-label]="filterLabel() || 'Filter'">
@@ -34975,7 +35007,7 @@ var CalendarComponent = class CalendarComponent {
                       <div class="cell-events">
                         @for (e of c.visible; track e.id) {
                           <button type="button" class="event-chip" [class.stacked]="chipLayout() === 'stacked'" [class.has-head]="!!(e.iconPath || chipTime(e))" [style.background]="e.bgColor" [style.borderLeftColor]="e.color"
-                            [attr.aria-label]="itemLabel(e)" [title]="e.title"
+                            [attr.aria-label]="itemLabel(e)" [title]="e.tooltip || e.title"
                             (click)="onItemClick(e, $event)">
                             <span class="chip-head">
                               @if (e.iconPath) {
@@ -35018,7 +35050,7 @@ var CalendarComponent = class CalendarComponent {
                   }
                   @for (e of col.allDay; track e.id) {
                     <button type="button" class="allday-chip" [style.background]="e.bgColor" [style.borderLeftColor]="e.color"
-                      [attr.aria-label]="itemLabel(e)" (click)="onItemClick(e, $event)">{{ e.title }}</button>
+                      [attr.aria-label]="itemLabel(e)" [attr.title]="e.tooltip || null" (click)="onItemClick(e, $event)">{{ e.title }}</button>
                   }
                 </div>
               }
@@ -35039,7 +35071,7 @@ var CalendarComponent = class CalendarComponent {
                       [style.left]="'calc(' + (t.lane.lane / t.lane.lanes * 100) + '% + 2px)'"
                       [style.width]="'calc(' + (100 / t.lane.lanes) + '% - 4px)'"
                       [style.background]="t.item.bgColor" [style.borderLeftColor]="t.item.color"
-                      [attr.aria-label]="itemLabel(t.item)" (click)="onItemClick(t.item, $event)">
+                      [attr.aria-label]="itemLabel(t.item)" [attr.title]="t.item.tooltip || null" (click)="onItemClick(t.item, $event)">
                       <span class="te-title" [class.strike]="t.item.strike">{{ t.item.title }}</span>
                       @if (t.item.startTime) { <span class="te-time">{{ t.item.timeLabel || timeRange(t.item) }}</span> }
                     </button>
@@ -35063,7 +35095,7 @@ var CalendarComponent = class CalendarComponent {
                 </div>
                 <div class="agenda-events">
                   @for (e of group.items; track e.id) {
-                    <button type="button" class="agenda-event" [attr.aria-label]="e.ariaLabel || null" (click)="onItemClick(e, $event)">
+                    <button type="button" class="agenda-event" [attr.aria-label]="e.ariaLabel || null" [attr.title]="e.tooltip || null" (click)="onItemClick(e, $event)">
                       <span class="ae-color-bar" [style.background]="e.color"></span>
                       <span class="ae-body">
                         <span class="ae-top">
@@ -35186,7 +35218,7 @@ i0.ɵɵngDeclareClassMetadata({
       <div class="mobile-summary"><ng-content select="[calendar-summary-mobile]" /></div>
     }
 
-    @if (filters().length && !loading()) {
+    @if (filters().length) {
       <div class="filter-bar">
         @if (filterLabel()) { <div class="filter-bar-label">{{ filterLabel() }}</div> }
         <div class="filter-chips" role="group" [attr.aria-label]="filterLabel() || 'Filter'">
@@ -35254,7 +35286,7 @@ i0.ɵɵngDeclareClassMetadata({
                       <div class="cell-events">
                         @for (e of c.visible; track e.id) {
                           <button type="button" class="event-chip" [class.stacked]="chipLayout() === 'stacked'" [class.has-head]="!!(e.iconPath || chipTime(e))" [style.background]="e.bgColor" [style.borderLeftColor]="e.color"
-                            [attr.aria-label]="itemLabel(e)" [title]="e.title"
+                            [attr.aria-label]="itemLabel(e)" [title]="e.tooltip || e.title"
                             (click)="onItemClick(e, $event)">
                             <span class="chip-head">
                               @if (e.iconPath) {
@@ -35297,7 +35329,7 @@ i0.ɵɵngDeclareClassMetadata({
                   }
                   @for (e of col.allDay; track e.id) {
                     <button type="button" class="allday-chip" [style.background]="e.bgColor" [style.borderLeftColor]="e.color"
-                      [attr.aria-label]="itemLabel(e)" (click)="onItemClick(e, $event)">{{ e.title }}</button>
+                      [attr.aria-label]="itemLabel(e)" [attr.title]="e.tooltip || null" (click)="onItemClick(e, $event)">{{ e.title }}</button>
                   }
                 </div>
               }
@@ -35318,7 +35350,7 @@ i0.ɵɵngDeclareClassMetadata({
                       [style.left]="'calc(' + (t.lane.lane / t.lane.lanes * 100) + '% + 2px)'"
                       [style.width]="'calc(' + (100 / t.lane.lanes) + '% - 4px)'"
                       [style.background]="t.item.bgColor" [style.borderLeftColor]="t.item.color"
-                      [attr.aria-label]="itemLabel(t.item)" (click)="onItemClick(t.item, $event)">
+                      [attr.aria-label]="itemLabel(t.item)" [attr.title]="t.item.tooltip || null" (click)="onItemClick(t.item, $event)">
                       <span class="te-title" [class.strike]="t.item.strike">{{ t.item.title }}</span>
                       @if (t.item.startTime) { <span class="te-time">{{ t.item.timeLabel || timeRange(t.item) }}</span> }
                     </button>
@@ -35342,7 +35374,7 @@ i0.ɵɵngDeclareClassMetadata({
                 </div>
                 <div class="agenda-events">
                   @for (e of group.items; track e.id) {
-                    <button type="button" class="agenda-event" [attr.aria-label]="e.ariaLabel || null" (click)="onItemClick(e, $event)">
+                    <button type="button" class="agenda-event" [attr.aria-label]="e.ariaLabel || null" [attr.title]="e.tooltip || null" (click)="onItemClick(e, $event)">
                       <span class="ae-color-bar" [style.background]="e.color"></span>
                       <span class="ae-body">
                         <span class="ae-top">
@@ -35476,6 +35508,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		today: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "today",
+				required: false
+			}]
+		}],
 		maxVisible: [{
 			type: i0.Input,
 			args: [{