@tolle_/tolle-ui 18.3.2 → 18.3.3

package/fesm2022/tolle-ui.mjs

@@ -6657,6 +6657,8 @@ class RangeCalendarComponent {
     rangeSelect = new EventEmitter(); // Emits whenever selection changes
     currentView = 'date';
     viewDate = new Date();
+    /** Which visible month the quick pickers are editing; always 0 in the single-month view. */
+    pickerMonthIndex = 0;
     // The Range Value
     value = { start: null, end: null };
     weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
@@ -6696,19 +6698,27 @@ class RangeCalendarComponent {
             return {
                 date: monthDate,
                 days: eachDayOfInterval({ start: startOfWeek(startOfMonth(monthDate)), end: endOfWeek(endOfMonth(monthDate)) }),
-                label: format(monthDate, 'MMMM yyyy'),
             };
         });
     }
     generateYears() {
-        const currentYear = this.viewDate.getFullYear();
+        const currentYear = this.pickerDate.getFullYear();
         this.years = Array.from({ length: 16 }, (_, i) => currentYear - 6 + i);
     }
-    setView(view) {
+    /** The month the quick pickers act on — `viewDate` shifted to the clicked panel. */
+    get pickerDate() {
+        return addMonths(this.viewDate, this.pickerMonthIndex);
+    }
+    /** `monthIndex` is the index of the visible month whose header was clicked. */
+    setView(view, monthIndex = 0) {
+        this.pickerMonthIndex = view === 'date' ? 0 : monthIndex;
         this.currentView = view;
         if (view === 'year')
             this.generateYears();
     }
+    headerBtnClass(view) {
+        return cn('text-sm font-semibold px-2 py-1 rounded transition-colors', this.currentView === view ? 'bg-secondary text-secondary-foreground' : 'hover:bg-accent hover:text-accent-foreground');
+    }
     prev() {
         if (this.currentView === 'date') {
             this.viewDate = subMonths(this.viewDate, 1);
@@ -6833,12 +6843,19 @@ class RangeCalendarComponent {
         btn?.focus();
     }
     selectMonth(monthIndex) {
-        this.viewDate = setMonth(this.viewDate, monthIndex);
-        this.currentView = 'date';
-        this.generateDays();
+        this.applyPickerDate(setMonth(this.pickerDate, monthIndex));
     }
     selectYear(year) {
-        this.viewDate = setYear(this.viewDate, year);
+        this.applyPickerDate(setYear(this.pickerDate, year));
+    }
+    /**
+     * Re-anchors the view so the panel the picker was opened from lands on `date`,
+     * then returns to the day grid. In the single-month view the offset is 0, so
+     * this is just "show that month".
+     */
+    applyPickerDate(date) {
+        this.viewDate = startOfMonth(subMonths(date, this.pickerMonthIndex));
+        this.pickerMonthIndex = 0;
         this.currentView = 'date';
         this.generateDays();
     }
@@ -6909,8 +6926,40 @@ class RangeCalendarComponent {
         ], usesOnChanges: true, ngImport: i0, template: `
     <div [class]="cn('text-popover-foreground inline-block min-w-fit', bordered ? 'p-3 border rounded-md bg-background shadow-sm' : '', class)">
 
+      <!-- ===== Month / year quick pickers (shared by the single- and multi-month views) ===== -->
+      <ng-container *ngIf="currentView !== 'date'">
+        <div class="flex items-center justify-between pt-1 pb-4 gap-2">
+          <div class="flex items-center gap-1">
+            <button type="button" (click)="setView('month', pickerMonthIndex)" [class]="headerBtnClass('month')">
+              {{ pickerDate | date: 'MMMM' }}
+            </button>
+            <button type="button" (click)="setView('year', pickerMonthIndex)" [class]="headerBtnClass('year')">
+              {{ pickerDate | date: 'yyyy' }}
+            </button>
+          </div>
+          <div class="flex items-center space-x-1">
+            <button type="button" (click)="prev()" [class]="navBtnClass" aria-label="Previous"><i class="ri-arrow-left-s-line text-lg"></i></button>
+            <button type="button" (click)="next()" [class]="navBtnClass" aria-label="Next"><i class="ri-arrow-right-s-line text-lg"></i></button>
+          </div>
+        </div>
+
+        <div *ngIf="currentView === 'month'" class="grid grid-cols-3 gap-2 w-64 animate-in fade-in zoom-in-95 duration-200">
+          <button *ngFor="let month of months; let i = index" type="button" (click)="selectMonth(i)"
+            [class]="cn('text-sm py-2.5 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors', i === pickerDate.getMonth() ? 'bg-primary text-primary-foreground' : '')">
+            {{ month }}
+          </button>
+        </div>
+
+        <div *ngIf="currentView === 'year'" class="grid grid-cols-4 gap-2 w-64 animate-in fade-in zoom-in-95 duration-200">
+          <button *ngFor="let year of years" type="button" (click)="selectYear(year)"
+            [class]="cn('text-sm py-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors', year === pickerDate.getFullYear() ? 'bg-primary text-primary-foreground' : '')">
+            {{ year }}
+          </button>
+        </div>
+      </ng-container>
+
       <!-- ===== Multi-month view (side-by-side, shared range) ===== -->
-      <div *ngIf="numberOfMonths > 1" class="flex flex-col gap-4 sm:flex-row">
+      <div *ngIf="currentView === 'date' && numberOfMonths > 1" class="flex flex-col gap-4 sm:flex-row">
         <div *ngFor="let m of visibleMonths; let idx = index" class="space-y-2">
           <div class="flex items-center justify-between pt-1 pb-2">
             <button *ngIf="idx === 0" type="button" (click)="prev()" [class]="navBtnClass" aria-label="Previous month">
@@ -6918,7 +6967,12 @@ class RangeCalendarComponent {
             </button>
             <span *ngIf="idx !== 0" class="h-7 w-7"></span>
 
-            <div class="text-sm font-semibold">{{ m.label }}</div>
+            <!-- Each panel's month and year open the quick pickers for that panel,
+                 so a two-month view jumps the same way the single-month one does. -->
+            <div class="flex items-center gap-1">
+              <button type="button" (click)="setView('month', idx)" [class]="headerBtnClass('month')">{{ m.date | date: 'MMMM' }}</button>
+              <button type="button" (click)="setView('year', idx)" [class]="headerBtnClass('year')">{{ m.date | date: 'yyyy' }}</button>
+            </div>
 
             <button *ngIf="idx === visibleMonths.length - 1" type="button" (click)="next()" [class]="navBtnClass" aria-label="Next month">
               <i class="ri-arrow-right-s-line text-lg"></i>
@@ -6952,16 +7006,14 @@ class RangeCalendarComponent {
         </div>
       </div>
 
-      <!-- ===== Single-month view (with month / year quick pickers) ===== -->
-      <ng-container *ngIf="numberOfMonths <= 1">
+      <!-- ===== Single-month view ===== -->
+      <ng-container *ngIf="currentView === 'date' && numberOfMonths <= 1">
         <div class="flex items-center justify-between pt-1 pb-4 gap-2">
           <div class="flex items-center gap-1">
-            <button type="button" (click)="setView('month')"
-              [class]="cn('text-sm font-semibold px-2 py-1 rounded transition-colors', currentView === 'month' ? 'bg-secondary text-secondary-foreground' : 'hover:bg-accent hover:text-accent-foreground')">
+            <button type="button" (click)="setView('month')" [class]="headerBtnClass('month')">
               {{ viewDate | date: 'MMMM' }}
             </button>
-            <button type="button" (click)="setView('year')"
-              [class]="cn('text-sm font-semibold px-2 py-1 rounded transition-colors', currentView === 'year' ? 'bg-secondary text-secondary-foreground' : 'hover:bg-accent hover:text-accent-foreground')">
+            <button type="button" (click)="setView('year')" [class]="headerBtnClass('year')">
               {{ viewDate | date: 'yyyy' }}
             </button>
           </div>
@@ -6971,7 +7023,7 @@ class RangeCalendarComponent {
           </div>
         </div>
 
-        <div *ngIf="currentView === 'date'" class="space-y-2 animate-in fade-in zoom-in-95 duration-200">
+        <div class="space-y-2 animate-in fade-in zoom-in-95 duration-200">
           <div class="grid grid-cols-7 gap-y-1 w-full">
             <span *ngFor="let day of weekDays" class="text-[0.8rem] text-muted-foreground font-normal text-center w-9">
               {{ day }}
@@ -6993,20 +7045,6 @@ class RangeCalendarComponent {
             </button>
           </div>
         </div>
-
-        <div *ngIf="currentView === 'month'" class="grid grid-cols-3 gap-2 w-64 animate-in fade-in zoom-in-95 duration-200">
-          <button *ngFor="let month of months; let i = index" type="button" (click)="selectMonth(i)"
-            [class]="cn('text-sm py-2.5 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors', i === viewDate.getMonth() ? 'bg-primary text-primary-foreground' : '')">
-            {{ month }}
-          </button>
-        </div>
-
-        <div *ngIf="currentView === 'year'" class="grid grid-cols-4 gap-2 w-64 animate-in fade-in zoom-in-95 duration-200">
-          <button *ngFor="let year of years" type="button" (click)="selectYear(year)"
-            [class]="cn('text-sm py-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors', year === viewDate.getFullYear() ? 'bg-primary text-primary-foreground' : '')">
-            {{ year }}
-          </button>
-        </div>
       </ng-container>
     </div>
   `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
@@ -7022,8 +7060,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ], template: `
     <div [class]="cn('text-popover-foreground inline-block min-w-fit', bordered ? 'p-3 border rounded-md bg-background shadow-sm' : '', class)">
 
+      <!-- ===== Month / year quick pickers (shared by the single- and multi-month views) ===== -->
+      <ng-container *ngIf="currentView !== 'date'">
+        <div class="flex items-center justify-between pt-1 pb-4 gap-2">
+          <div class="flex items-center gap-1">
+            <button type="button" (click)="setView('month', pickerMonthIndex)" [class]="headerBtnClass('month')">
+              {{ pickerDate | date: 'MMMM' }}
+            </button>
+            <button type="button" (click)="setView('year', pickerMonthIndex)" [class]="headerBtnClass('year')">
+              {{ pickerDate | date: 'yyyy' }}
+            </button>
+          </div>
+          <div class="flex items-center space-x-1">
+            <button type="button" (click)="prev()" [class]="navBtnClass" aria-label="Previous"><i class="ri-arrow-left-s-line text-lg"></i></button>
+            <button type="button" (click)="next()" [class]="navBtnClass" aria-label="Next"><i class="ri-arrow-right-s-line text-lg"></i></button>
+          </div>
+        </div>
+
+        <div *ngIf="currentView === 'month'" class="grid grid-cols-3 gap-2 w-64 animate-in fade-in zoom-in-95 duration-200">
+          <button *ngFor="let month of months; let i = index" type="button" (click)="selectMonth(i)"
+            [class]="cn('text-sm py-2.5 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors', i === pickerDate.getMonth() ? 'bg-primary text-primary-foreground' : '')">
+            {{ month }}
+          </button>
+        </div>
+
+        <div *ngIf="currentView === 'year'" class="grid grid-cols-4 gap-2 w-64 animate-in fade-in zoom-in-95 duration-200">
+          <button *ngFor="let year of years" type="button" (click)="selectYear(year)"
+            [class]="cn('text-sm py-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors', year === pickerDate.getFullYear() ? 'bg-primary text-primary-foreground' : '')">
+            {{ year }}
+          </button>
+        </div>
+      </ng-container>
+
       <!-- ===== Multi-month view (side-by-side, shared range) ===== -->
-      <div *ngIf="numberOfMonths > 1" class="flex flex-col gap-4 sm:flex-row">
+      <div *ngIf="currentView === 'date' && numberOfMonths > 1" class="flex flex-col gap-4 sm:flex-row">
         <div *ngFor="let m of visibleMonths; let idx = index" class="space-y-2">
           <div class="flex items-center justify-between pt-1 pb-2">
             <button *ngIf="idx === 0" type="button" (click)="prev()" [class]="navBtnClass" aria-label="Previous month">
@@ -7031,7 +7101,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             </button>
             <span *ngIf="idx !== 0" class="h-7 w-7"></span>
 
-            <div class="text-sm font-semibold">{{ m.label }}</div>
+            <!-- Each panel's month and year open the quick pickers for that panel,
+                 so a two-month view jumps the same way the single-month one does. -->
+            <div class="flex items-center gap-1">
+              <button type="button" (click)="setView('month', idx)" [class]="headerBtnClass('month')">{{ m.date | date: 'MMMM' }}</button>
+              <button type="button" (click)="setView('year', idx)" [class]="headerBtnClass('year')">{{ m.date | date: 'yyyy' }}</button>
+            </div>
 
             <button *ngIf="idx === visibleMonths.length - 1" type="button" (click)="next()" [class]="navBtnClass" aria-label="Next month">
               <i class="ri-arrow-right-s-line text-lg"></i>
@@ -7065,16 +7140,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </div>
       </div>
 
-      <!-- ===== Single-month view (with month / year quick pickers) ===== -->
-      <ng-container *ngIf="numberOfMonths <= 1">
+      <!-- ===== Single-month view ===== -->
+      <ng-container *ngIf="currentView === 'date' && numberOfMonths <= 1">
         <div class="flex items-center justify-between pt-1 pb-4 gap-2">
           <div class="flex items-center gap-1">
-            <button type="button" (click)="setView('month')"
-              [class]="cn('text-sm font-semibold px-2 py-1 rounded transition-colors', currentView === 'month' ? 'bg-secondary text-secondary-foreground' : 'hover:bg-accent hover:text-accent-foreground')">
+            <button type="button" (click)="setView('month')" [class]="headerBtnClass('month')">
               {{ viewDate | date: 'MMMM' }}
             </button>
-            <button type="button" (click)="setView('year')"
-              [class]="cn('text-sm font-semibold px-2 py-1 rounded transition-colors', currentView === 'year' ? 'bg-secondary text-secondary-foreground' : 'hover:bg-accent hover:text-accent-foreground')">
+            <button type="button" (click)="setView('year')" [class]="headerBtnClass('year')">
               {{ viewDate | date: 'yyyy' }}
             </button>
           </div>
@@ -7084,7 +7157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           </div>
         </div>
 
-        <div *ngIf="currentView === 'date'" class="space-y-2 animate-in fade-in zoom-in-95 duration-200">
+        <div class="space-y-2 animate-in fade-in zoom-in-95 duration-200">
           <div class="grid grid-cols-7 gap-y-1 w-full">
             <span *ngFor="let day of weekDays" class="text-[0.8rem] text-muted-foreground font-normal text-center w-9">
               {{ day }}
@@ -7106,20 +7179,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             </button>
           </div>
         </div>
-
-        <div *ngIf="currentView === 'month'" class="grid grid-cols-3 gap-2 w-64 animate-in fade-in zoom-in-95 duration-200">
-          <button *ngFor="let month of months; let i = index" type="button" (click)="selectMonth(i)"
-            [class]="cn('text-sm py-2.5 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors', i === viewDate.getMonth() ? 'bg-primary text-primary-foreground' : '')">
-            {{ month }}
-          </button>
-        </div>
-
-        <div *ngIf="currentView === 'year'" class="grid grid-cols-4 gap-2 w-64 animate-in fade-in zoom-in-95 duration-200">
-          <button *ngFor="let year of years" type="button" (click)="selectYear(year)"
-            [class]="cn('text-sm py-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors', year === viewDate.getFullYear() ? 'bg-primary text-primary-foreground' : '')">
-            {{ year }}
-          </button>
-        </div>
       </ng-container>
     </div>
   `, styles: [":host{display:block}\n"] }]