chore: update Angular cache and TypeScript build info files

This commit is contained in:
Bruno Charest 2025-09-29 17:32:44 -04:00
parent 0b72a6b810
commit b4a706930b
6 changed files with 264 additions and 138 deletions

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,6 @@
{
"workspace": {
"root": "C:\\dev\\git\\web\\ObsiViewer",
"uuid": "9de13f99-f164-49c7-b2f9-b707dc6490db"
}
}

View File

@ -1,23 +1,17 @@
<div class="flex flex-col gap-4"> <div class="calendar-layout flex flex-col gap-5">
<header class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between"> <header class="calendar-header">
<div> <div class="calendar-header__top flex items-center justify-between gap-4">
<p class="text-xs uppercase tracking-wide text-text-muted">Calendrier</p> <p class="calendar-header__label text-xs font-semibold uppercase tracking-[0.35em] text-text-muted">CALENDRIER</p>
<h2 class="text-lg font-semibold text-text-main"> <span class="calendar-header__month text-lg font-semibold text-text-main">
{{ viewDate() | calendarDate: 'monthViewTitle' : 'fr' }} {{ viewDate() | calendarDate: 'monthViewTitle' : 'fr' | titlecase }}
</h2>
@if (selectionLabel(); as label) {
<span class="mt-1 inline-flex items-center rounded-full border border-border bg-bg-muted px-2 py-0.5 text-xs font-medium text-text-muted">
{{ label }}
</span> </span>
}
</div> </div>
<div class="flex items-center justify-end gap-2"> <div class="calendar-header__controls grid">
<button <button
type="button" type="button"
(click)="shiftMonth(-1)" (click)="shiftMonth(-1)"
aria-label="Mois précédent" aria-label="Mois précédent"
class="btn btn-sm btn-icon" class="btn btn-sm btn-icon calendar-header__control calendar-header__control--back"
[ngClass]="'bg-card text-text-main'">
> >
</button> </button>
@ -25,7 +19,7 @@
type="button" type="button"
(click)="goToToday()" (click)="goToToday()"
aria-label="Revenir à aujourd'hui" aria-label="Revenir à aujourd'hui"
class="btn btn-sm btn-secondary" class="btn btn-sm btn-secondary calendar-header__control calendar-header__control--today"
> >
Aujourd'hui Aujourd'hui
</button> </button>
@ -33,14 +27,19 @@
type="button" type="button"
(click)="shiftMonth(1)" (click)="shiftMonth(1)"
aria-label="Mois suivant" aria-label="Mois suivant"
class="btn btn-sm btn-icon bg-card text-text-main" class="btn btn-sm btn-icon calendar-header__control calendar-header__control--forward"
> >
</button> </button>
</div> </div>
@if (selectionLabel(); as label) {
<span class="calendar-header__selection inline-flex items-center rounded-full border border-border bg-bg-muted px-2 py-0.5 text-xs font-medium text-text-muted">
{{ label }}
</span>
}
</header> </header>
<div class="rounded-2xl border border-border bg-card shadow-surface backdrop-blur-xs"> <div class="calendar-frame flex flex-col gap-4 rounded-2xl border border-border bg-card p-5 shadow-surface backdrop-blur-xs">
<mwl-calendar-month-view <mwl-calendar-month-view
class="calendar-compact" class="calendar-compact"
[viewDate]="viewDate()" [viewDate]="viewDate()"
@ -52,13 +51,13 @@
></mwl-calendar-month-view> ></mwl-calendar-month-view>
</div> </div>
<div class="flex flex-wrap items-center justify-center gap-3 text-xs text-text-muted"> <div class="calendar-legend flex flex-wrap items-center justify-center gap-4 text-xs text-text-muted">
<span class="inline-flex items-center gap-2 rounded-full border border-border bg-bg-muted px-3 py-1"> <span class="calendar-legend__item inline-flex items-center gap-2 rounded-full border border-border bg-bg-muted px-3 py-1">
<span class="h-2 w-2 rounded-full bg-gradient-to-r from-green-500 to-emerald-400"></span> <span class="calendar-legend__dot calendar-legend__dot--created"></span>
Création Création
</span> </span>
<span class="inline-flex items-center gap-2 rounded-full border border-border bg-bg-muted px-3 py-1"> <span class="calendar-legend__item inline-flex items-center gap-2 rounded-full border border-border bg-bg-muted px-3 py-1">
<span class="h-2 w-2 rounded-full bg-gradient-to-r from-indigo-400 to-indigo-600"></span> <span class="calendar-legend__dot calendar-legend__dot--updated"></span>
Modification Modification
</span> </span>
</div> </div>

View File

@ -1,82 +1,178 @@
.calendar-card { .calendar-layout {
width: 100%; width: 100%;
max-width: 300px;
background: rgba(248, 250, 252, 0.94);
border: 1px solid rgba(148, 163, 184, 0.28);
border-radius: 0.75rem;
padding: 0.6rem 0.65rem 1rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: 1.25rem;
box-shadow: 0 12px 32px -20px rgba(15, 23, 42, 0.28);
overflow: hidden;
} }
.calendar-toolbar { .calendar-header {
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
align-items: center; gap: 0.85rem;
gap: 0.75rem;
} }
.toolbar-controls { .calendar-header__top {
display: inline-flex; display: flex;
align-items: center; align-items: baseline;
gap: 0.35rem; justify-content: space-between;
gap: 1rem;
}
button { .calendar-header__label {
letter-spacing: 0.35em;
}
.calendar-header__month {
text-transform: capitalize;
}
.calendar-header__controls {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 0.75rem;
align-items: center;
}
.calendar-header__control {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-width: 2rem; min-width: 2.5rem;
padding: 0.25rem 0.75rem; border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
border-radius: 0.55rem; background: color-mix(in srgb, var(--card) 70%, var(--brand) 30%);
border: 1px solid rgba(184, 162, 148, 0.45); color: var(--text-main);
background: rgba(255, 255, 255, 0.65); transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
color: inherit;
font-size: 0.8rem;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
&:hover, &:hover,
&:focus-visible { &:focus-visible {
background: rgba(148, 163, 184, 0.22); border-color: color-mix(in srgb, var(--brand) 45%, transparent);
border-color: rgba(148, 163, 184, 0.6); background: color-mix(in srgb, var(--card) 55%, var(--brand) 45%);
color: var(--text-main);
} }
}
.calendar-header__control--back {
justify-self: start;
}
.calendar-header__control--today {
justify-self: center;
border: none;
background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 60%, transparent) 0%, color-mix(in srgb, var(--brand-700) 75%, transparent) 100%);
color: #fff;
box-shadow: 0 12px 24px -18px color-mix(in srgb, var(--brand) 65%, transparent);
&:hover,
&:focus-visible {
background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 75%, transparent) 0%, color-mix(in srgb, var(--brand-700) 90%, transparent) 100%);
} }
} }
.calendar-header__control--forward {
justify-self: end;
}
.calendar-header__selection {
align-self: flex-end;
}
.calendar-frame {
position: relative;
width: 100%;
padding: 1rem 1.25rem 1.35rem;
border-radius: 1.5rem;
min-height: 19rem;
border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border) 65%);
background: color-mix(in srgb, var(--card) 75%, color-mix(in srgb, var(--brand) 25%, transparent) 25%);
box-shadow: 0 16px 40px -24px color-mix(in srgb, var(--shadow-color) 65%, transparent);
display: flex;
flex-direction: column;
gap: 1rem;
}
.calendar-legend { .calendar-legend {
display: flex; display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center; justify-content: center;
gap: 0.75rem; gap: 1rem;
font-size: 0.6rem; font-size: 0.75rem;
color: rgba(47, 60, 86, 0.65); color: rgba(47, 60, 86, 0.65);
margin-top: 3.2rem; margin-top: 0.75rem;
}
.legend-item { .calendar-legend__item {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.35rem; gap: 0.5rem;
padding: 0.2rem 0.5rem; padding: 0.35rem 0.75rem;
border-radius: 999px; border-radius: 999px;
background: rgba(148, 163, 184, 0.18); border: 1px solid rgba(148, 163, 184, 0.38);
background: rgba(148, 163, 184, 0.16);
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
} }
.legend-dot { .calendar-legend__dot {
width: 10px; width: 0.55rem;
height: 10px; height: 0.55rem;
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
box-shadow: 0 0 6px rgba(15, 23, 42, 0.18);
}
.calendar-legend__dot--created {
background: rgb(34, 197, 94);
}
.calendar-legend__dot--updated {
background: rgb(255, 25, 12);
}
:host-context(.dark) {
.calendar-header__label {
color: rgba(191, 214, 255, 0.68);
} }
.legend-dot.legend-created { .calendar-header__month {
background: linear-gradient(135deg, #22c55e, #34d399); color: rgba(226, 232, 240, 0.95);
} }
.legend-dot.legend-updated { .calendar-header__selection {
background: linear-gradient(135deg, #8b5cf6, #6366f1); border-color: rgba(99, 102, 241, 0.45);
background: rgba(59, 130, 246, 0.12);
color: rgba(219, 234, 254, 0.85);
}
.calendar-header__control {
background: color-mix(in srgb, var(--brand) 20%, rgba(20, 24, 39, 0.98) 80%);
border-color: color-mix(in srgb, var(--brand) 40%, transparent);
color: rgba(255, 231, 224, 0.88);
&:hover,
&:focus-visible {
background: color-mix(in srgb, var(--brand) 40%, rgba(20, 24, 39, 0.95) 60%);
border-color: color-mix(in srgb, var(--brand) 60%, transparent);
}
}
.calendar-header__control--today {
background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 80%, transparent) 0%, color-mix(in srgb, var(--brand-700) 95%, transparent) 100%);
color: rgba(237, 243, 255, 0.95);
}
.calendar-frame {
background: color-mix(in srgb, rgba(21, 28, 45, 0.78) 70%, color-mix(in srgb, var(--brand) 35%, transparent) 30%);
border-color: color-mix(in srgb, var(--brand) 55%, rgba(45, 51, 81, 0.8) 45%);
box-shadow: 0 18px 40px -26px rgba(10, 10, 30, 0.55);
}
.calendar-legend {
color: rgba(210, 219, 237, 0.8);
}
.calendar-legend__item {
border-color: rgba(99, 102, 241, 0.45);
background: rgba(99, 102, 241, 0.18);
} }
} }
@ -91,7 +187,7 @@
padding: 0.15rem; padding: 0.15rem;
cursor: pointer; cursor: pointer;
transition: background 0.2s ease, border 0.2s ease; transition: background 0.2s ease, border 0.2s ease;
border: 1px solid transparent; // border: 1px solid transparent;
&.is-outside { &.is-outside {
opacity: 0.4; opacity: 0.4;
@ -140,18 +236,17 @@
} }
.indicator.cal-event-created { .indicator.cal-event-created {
background: linear-gradient(90deg, #22c55e, #34d399); background: rgb(34, 197, 94);
} }
.indicator.cal-event-updated { .indicator.cal-event-updated {
background: linear-gradient(90deg, #8b5cf6, #6366f1); background: rgb(255, 25, 12);
} }
} }
} }
:host-context(.dark) { :host-context(.dark) {
.calendar-card { .calendar-card {
// background: rgba(34, 39, 54, 0.96);
background: #202123; background: #202123;
border-color: rgba(89, 102, 126, 0.5); border-color: rgba(89, 102, 126, 0.5);
@ -245,28 +340,34 @@
:host ::ng-deep .calendar-compact .cal-cell { :host ::ng-deep .calendar-compact .cal-cell {
background: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.85);
border-radius: 0.5rem; border-radius: 0.5rem;
border: 1px solid rgba(226, 232, 240, 0.6); border: 1px solid #1C2740;
padding: 0.15rem; padding: 0.05rem;
} }
:host-context(.dark) ::ng-deep .calendar-compact .cal-month-view { :host-context(.dark) ::ng-deep .calendar-compact .cal-month-view {
// background: rgba(37, 44, 63, 0.95); // background: rgba(37, 44, 63, 0.95);
background: #2B2D46; // background: #2B2D46;
background: #0F172A;
border-color: rgba(88, 103, 132, 0.55); border-color: rgba(88, 103, 132, 0.55);
} }
:host-context(.dark) ::ng-deep .calendar-compact .cal-cell { :host-context(.dark) ::ng-deep .calendar-compact .cal-cell {
// background: rgba(48, 58, 78, 0.92); // background: rgba(48, 58, 78, 0.92);
background: #2D2E30; // background: #2D2E30;
background: #0F172A;
border-color: rgba(107, 114, 128, 0.4); border-color: rgba(107, 114, 128, 0.4);
color: rgba(220, 230, 246, 0.95); color: rgba(220, 230, 246, 0.95);
} }
:host-context(.dark) ::ng-deep .calendar-compact .cal-day-number { :host-context(.dark) ::ng-deep .calendar-compact .cal-day-number {
color: rgba(236, 253, 245, 0.9); color: #5879B9;
} }
:host-context(.dark) ::ng-deep .calendar-compact .cal-header .cal-cell::first-letter { :host-context(.dark) ::ng-deep .calendar-compact .cal-header .cal-cell::first-letter {
color: rgba(167, 139, 250, 0.85); // color: rgba(167, 139, 250, 0.85);
color: #5879B9;
text-align: center;
height: 1.2rem;
line-height: 1.2rem;
} }

View File

@ -1,39 +1,45 @@
@use 'sass:color'; @use 'sass:color';
:host { :host {
--raw-overlay-bg: #f7fdfb; --raw-overlay-bg: color-mix(in srgb, var(--card, #ffffff) 92%, #ffffff 8%);
--raw-overlay-border: rgba(14, 116, 144, 0.18); --raw-overlay-border: color-mix(in srgb, var(--brand, #3a68d1) 14%, var(--border, rgba(14, 116, 144, 0.18)) 86%);
--raw-overlay-text: #0f172a; --raw-overlay-text: var(--text-main, #0f172a);
--raw-overlay-accent: rgba(14, 116, 144, 0.14); --raw-overlay-accent: color-mix(in srgb, var(--bg-muted, #eef0f2) 80%, #ffffff 20%);
--raw-overlay-accent-strong: rgba(14, 116, 144, 0.22); --raw-overlay-accent-strong: color-mix(in srgb, var(--brand, #3a68d1) 18%, var(--border, rgba(14, 116, 144, 0.18)) 82%);
--raw-overlay-action-text: #0f766e; --raw-overlay-action-text: var(--brand-800, #0f766e);
--raw-overlay-action-border: rgba(13, 148, 136, 0.45); --raw-overlay-action-border: color-mix(in srgb, var(--brand, #3a68d1) 35%, transparent);
--raw-overlay-action-bg: rgba(13, 148, 136, 0.12); --raw-overlay-action-bg: color-mix(in srgb, var(--brand, #3a68d1) 12%, transparent);
--raw-overlay-action-bg-hover: rgba(13, 148, 136, 0.2); --raw-overlay-action-bg-hover: color-mix(in srgb, var(--brand, #3a68d1) 18%, transparent);
--raw-overlay-action-border-hover: rgba(13, 148, 136, 0.6); --raw-overlay-action-border-hover: color-mix(in srgb, var(--brand, #3a68d1) 50%, transparent);
--raw-overlay-primary-bg: rgba(21, 128, 61, 0.18); --raw-overlay-primary-bg: color-mix(in srgb, var(--success, #22c55e) 24%, transparent);
--raw-overlay-primary-border: rgba(21, 128, 61, 0.55); --raw-overlay-primary-border: color-mix(in srgb, var(--success, #22c55e) 45%, transparent);
--raw-overlay-primary-bg-hover: rgba(21, 128, 61, 0.28); --raw-overlay-primary-bg-hover: color-mix(in srgb, var(--success, #22c55e) 32%, transparent);
--raw-overlay-primary-text: #166534; --raw-overlay-primary-text: color-mix(in srgb, var(--success, #22c55e) 70%, #0f172a 30%);
--raw-overlay-primary-border-hover: rgba(21, 128, 61, 0.7); --raw-overlay-primary-border-hover: color-mix(in srgb, var(--success, #22c55e) 55%, transparent);
--raw-overlay-header-border: color-mix(in srgb, var(--border, rgba(148, 163, 184, 0.12)) 65%, transparent);
--raw-overlay-feedback-bg: color-mix(in srgb, var(--success, #22c55e) 16%, transparent);
--raw-overlay-feedback-text: color-mix(in srgb, var(--success, #22c55e) 70%, #064e3b 30%);
} }
:host-context(.dark) { :host-context(.dark) {
--raw-overlay-bg: rgba(32, 33, 35, 0.96); /* #202123 */ --raw-overlay-bg: color-mix(in srgb, var(--bg-muted, #1f2937) 90%, rgba(15, 23, 42, 1) 10%);
--raw-overlay-border: rgba(99, 102, 106, 0.35); --raw-overlay-border: color-mix(in srgb, var(--brand, #6f96e4) 22%, var(--border, #374151) 78%);
--raw-overlay-text: #e5e7eb; --raw-overlay-text: var(--text-main, #e5e7eb);
--raw-overlay-accent: rgba(45, 46, 48, 0.88); /* #2D2E30 */ --raw-overlay-accent: color-mix(in srgb, var(--card, #0f172a) 75%, rgba(15, 23, 42, 1) 25%);
--raw-overlay-accent-strong: rgba(61, 62, 65, 0.92); --raw-overlay-accent-strong: color-mix(in srgb, var(--brand, #6f96e4) 28%, rgba(15, 23, 42, 1) 72%);
--raw-overlay-action-text: #34d399; --raw-overlay-action-text: color-mix(in srgb, var(--accent, #2dd4bf) 85%, #ffffff 15%);
--raw-overlay-action-border: rgba(52, 211, 153, 0.35); --raw-overlay-action-border: color-mix(in srgb, var(--accent, #2dd4bf) 45%, transparent);
--raw-overlay-action-bg: rgba(12, 84, 68, 0.32); --raw-overlay-action-bg: color-mix(in srgb, var(--accent, #2dd4bf) 18%, transparent);
--raw-overlay-action-bg-hover: rgba(16, 185, 129, 0.36); --raw-overlay-action-bg-hover: color-mix(in srgb, var(--accent, #2dd4bf) 26%, transparent);
--raw-overlay-action-border-hover: rgba(52, 211, 153, 0.55); --raw-overlay-action-border-hover: color-mix(in srgb, var(--accent, #2dd4bf) 65%, transparent);
--raw-overlay-primary-bg: rgba(22, 163, 74, 0.32); --raw-overlay-primary-bg: color-mix(in srgb, var(--success, #22c55e) 32%, transparent);
--raw-overlay-primary-border: rgba(22, 163, 74, 0.55); --raw-overlay-primary-border: color-mix(in srgb, var(--success, #22c55e) 55%, transparent);
--raw-overlay-primary-bg-hover: rgba(22, 163, 74, 0.42); --raw-overlay-primary-bg-hover: color-mix(in srgb, var(--success, #22c55e) 42%, transparent);
--raw-overlay-primary-text: #bbf7d0; --raw-overlay-primary-text: color-mix(in srgb, var(--success, #22c55e) 88%, #ecfdf5 12%);
--raw-overlay-primary-border-hover: rgba(22, 163, 74, 0.75); --raw-overlay-primary-border-hover: color-mix(in srgb, var(--success, #22c55e) 70%, transparent);
--raw-overlay-header-border: color-mix(in srgb, var(--border, #374151) 45%, transparent);
--raw-overlay-feedback-bg: color-mix(in srgb, var(--success, #22c55e) 38%, transparent);
--raw-overlay-feedback-text: color-mix(in srgb, var(--success, #22c55e) 88%, #d1fae5 12%);
} }
.raw-overlay__backdrop { .raw-overlay__backdrop {
@ -67,7 +73,7 @@
gap: 1rem; gap: 1rem;
align-items: center; align-items: center;
padding: 1.5rem clamp(1.25rem, 2vw, 2rem); padding: 1.5rem clamp(1.25rem, 2vw, 2rem);
border-bottom: 1px solid rgba(148, 163, 184, 0.12); border-bottom: 1px solid var(--raw-overlay-header-border);
} }
.raw-overlay__title-group { .raw-overlay__title-group {
@ -131,17 +137,12 @@
margin: 0.75rem clamp(1.25rem, 2vw, 2rem) 0; margin: 0.75rem clamp(1.25rem, 2vw, 2rem) 0;
padding: 0.6rem 1rem; padding: 0.6rem 1rem;
border-radius: 0.75rem; border-radius: 0.75rem;
background: rgba(21, 128, 61, 0.18); background: var(--raw-overlay-feedback-bg);
color: rgba(22, 163, 74, 0.9); color: var(--raw-overlay-feedback-text);
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 600; font-weight: 600;
} }
:host-context(.dark) .raw-overlay__feedback {
background: rgba(34, 197, 94, 0.25);
color: rgba(190, 242, 100, 0.95);
}
.raw-overlay__content { .raw-overlay__content {
flex: 1; flex: 1;
margin: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 2vw, 2rem) clamp(1.5rem, 3vw, 2rem); margin: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 2vw, 2rem) clamp(1.5rem, 3vw, 2rem);

View File

@ -203,32 +203,50 @@
@layer components { @layer components {
.calendar-compact { .calendar-compact {
@apply flex min-h-[180px] max-h-[200px] flex-col; /* @apply flex min-h-[180px] max-h-[200px] flex-col; */
display: flex;
flex-direction: column;
min-height: 180px;
max-height: 200px;
border: 1px solid #1C2740;
border-radius: 0.25rem;
background-color: #1C2740;
} }
.calendar-compact .cal-month-view { .calendar-compact .cal-month-view {
flex: 1 1 auto; flex: 1 1 auto;
/* border: 1px solid #1C2740; */
/* border-radius: 0.25rem; */
/* background-color: #1C2740; */
} }
.calendar-compact .cal-header { .calendar-compact .cal-header {
@apply px-2 py-1; /* @apply px-2 py-1; */
padding: 0.5rem;
} }
.calendar-compact .cal-header .cal-header-title { .calendar-compact .cal-header .cal-header-title {
@apply text-sm; /* @apply text-sm; */
font-size: 0.875rem;
} }
.calendar-compact .cal-cell { .calendar-compact .cal-cell {
min-height: 36px; min-height: 36px;
padding: 0.35rem; padding: 0.35rem;
border: 1px solid #1C2740;
border-radius: 0.25rem;
} }
.calendar-compact .cal-day-number { .calendar-compact .cal-day-number {
@apply text-xs; /* @apply text-xs; */
font-size: 0.75rem;
} }
.calendar-compact .cal-event { .calendar-compact .cal-event {
@apply h-0.5 rounded-full mt-[2px]; /* @apply h-0.5 rounded-full mt-[2px]; */
height: 0.5rem;
border-radius: 0.5rem;
margin-top: 2px;
} }
.cal-event-created { .cal-event-created {
@ -240,6 +258,7 @@
} }
.calendar-compact .cal-open-day-events { .calendar-compact .cal-open-day-events {
@apply hidden; /* @apply hidden; */
display: none;
} }
} }