first commit

2025-09-27 18:13:02 -04:00
commit 6e1b5407b7
253 changed files with 289900 additions and 0 deletions
@@ -0,0 +1,84 @@
+<div class="flex flex-col gap-4">
+  <header class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+    <div>
+      <p class="text-xs uppercase tracking-wide text-obs-l-text-muted dark:text-obs-d-text-muted">Calendrier</p>
+      <h2 class="text-lg font-semibold text-obs-l-text-main dark:text-obs-d-text-main">
+        {{ viewDate() | calendarDate: 'monthViewTitle' : 'fr' }}
+      </h2>
+      @if (selectionLabel(); as label) {
+        <span class="mt-1 inline-flex items-center rounded-full bg-obs-l-bg-secondary/70 px-2 py-0.5 text-xs font-medium text-obs-l-text-muted dark:bg-obs-d-bg-secondary/60 dark:text-obs-d-text-muted">
+          {{ label }}
+        </span>
+      }
+    </div>
+    <div class="flex items-center justify-end gap-2">
+      <button
+        type="button"
+        (click)="shiftMonth(-1)"
+        aria-label="Mois précédent"
+        class="h-9 w-9 rounded-full border border-obs-l-border bg-obs-l-bg-main text-lg leading-none text-obs-l-text-main transition hover:bg-obs-l-bg-secondary dark:border-obs-d-border dark:bg-obs-d-bg-main dark:text-obs-d-text-main dark:hover:bg-obs-d-bg-secondary"
+      >
+        ‹
+      </button>
+      <button
+        type="button"
+        (click)="goToToday()"
+        aria-label="Revenir à aujourd'hui"
+        class="inline-flex items-center gap-1 rounded-full border border-obs-l-border bg-obs-l-bg-main px-3 py-1.5 text-sm font-medium text-obs-l-text-main transition hover:bg-obs-l-bg-secondary dark:border-obs-d-border dark:bg-obs-d-bg-main dark:text-obs-d-text-main dark:hover:bg-obs-d-bg-secondary"
+      >
+        Aujourd'hui
+      </button>
+      <button
+        type="button"
+        (click)="shiftMonth(1)"
+        aria-label="Mois suivant"
+        class="h-9 w-9 rounded-full border border-obs-l-border bg-obs-l-bg-main text-lg leading-none text-obs-l-text-main transition hover:bg-obs-l-bg-secondary dark:border-obs-d-border dark:bg-obs-d-bg-main dark:text-obs-d-text-main dark:hover:bg-obs-d-bg-secondary"
+      >
+        ›
+      </button>
+    </div>
+  </header>
+
+  <div class="rounded-2xl border border-obs-l-border bg-obs-l-bg-main/80 shadow-panel backdrop-blur-xs dark:border-obs-d-border dark:bg-obs-d-bg-secondary/80">
+    <mwl-calendar-month-view
+      class="calendar-compact"
+      [viewDate]="viewDate()"
+      [refresh]="refresh$"
+      [cellTemplate]="dayCellTemplate"
+      [weekStartsOn]="1"
+      [events]="[]"
+      (pointerup)="onDatePointerUp()"
+    ></mwl-calendar-month-view>
+  </div>
+
+  <div class="flex flex-wrap items-center justify-center gap-3 text-xs text-obs-l-text-muted dark:text-obs-d-text-muted">
+    <span class="inline-flex items-center gap-2 rounded-full bg-obs-l-bg-secondary/60 px-3 py-1 dark:bg-obs-d-bg-secondary/60">
+      <span class="h-2 w-2 rounded-full bg-gradient-to-r from-green-500 to-emerald-400"></span>
+      Création
+    </span>
+    <span class="inline-flex items-center gap-2 rounded-full bg-obs-l-bg-secondary/60 px-3 py-1 dark:bg-obs-d-bg-secondary/60">
+      <span class="h-2 w-2 rounded-full bg-gradient-to-r from-indigo-400 to-indigo-600"></span>
+      Modification
+    </span>
+  </div>
+</div>
+
+<ng-template #dayCellTemplate let-day="day">
+  <button
+    type="button"
+    class="day-cell"
+    [ngClass]="getCellClasses(day)"
+    (pointerdown)="onDatePointerDown(day, $event)"
+    (pointerenter)="onDatePointerEnter(day)"
+  >
+    <span class="day-number">{{ day.date | date: 'd' }}</span>
+    <div class="indicators">
+      @if (hasCreated(day.date)) {
+        <span class="indicator cal-event-created" aria-hidden="true"></span>
+      }
+      @if (hasUpdated(day.date)) {
+        <span class="indicator cal-event-updated" aria-hidden="true"></span>
+      }
+    </div>
+  </button>
+</ng-template>