@prolibu-suite/cobalt-core 0.7.0 → 0.9.0

package/dist/collection/components/co-calendar-timegrid/co-calendar-timegrid.css

@@ -0,0 +1,265 @@
+/*
+ * co-calendar-timegrid — Week/Day time-grid. Themed through --co-cal-* tokens
+ * (shared with co-calendar-month), each defaulting to a semantic Cobalt token so
+ * dark mode and brand overrides work for free.
+ */
+:host {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 0;
+  font-family: var(--co-font-family-primary);
+
+  --co-cal-slot-h: 12px;        /* height of one slotMinutes row (hour = 4×15min = 48px) */
+  --co-cal-axis-w: 56px;        /* time-axis column width */
+  --co-cal-surface: var(--co-semantic-surface-page);
+  --co-cal-border: var(--co-semantic-border-default);
+  --co-cal-grid-line: color-mix(in srgb, var(--co-cal-border) 60%, transparent);
+  --co-cal-text: var(--co-semantic-text-default);
+  --co-cal-text-muted: var(--co-semantic-text-muted);
+  --co-cal-hover: var(--co-semantic-surface-hover);
+  --co-cal-today-ring: var(--co-color-primary-azul);
+  --co-cal-now-color: var(--co-color-status-error, #AA2E1B);
+  --co-cal-allday-h: 28px;
+
+  --co-cal-event-radius: 6px;                 /* esquina de chip estilo Google/M3 */
+  --co-cal-elevation-hover: var(--co-shadow-lg); /* lift del chip al hover (sombra fija del DS; sutil en dark) */
+
+  --co-cal-event-bg: var(--co-color-primary-azul);
+  --co-cal-event-border: transparent;
+  --co-cal-event-text: var(--co-color-base-blanco, #fff);
+  --co-cal-event-text-light: var(--co-color-base-blanco, #fff);
+  --co-cal-event-text-dark: var(--co-semantic-text-default);
+}
+
+.tg {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 0;
+  /* Sin borde exterior (Google-style: la grilla flota en la página del host). */
+  border-radius: var(--co-border-radius-xs);
+  overflow: hidden;
+  background: var(--co-cal-surface);
+}
+
+/* ── Column headers (day names) ─────────────────────────────── */
+.tg__head {
+  display: grid;
+  grid-template-columns: var(--co-cal-axis-w) 1fr;
+  border-bottom: 1px solid var(--co-cal-border);
+}
+.tg__head-spacer { border-right: 1px solid var(--co-cal-border); }
+.tg__head-days { display: grid; }
+.tg__head-day {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: var(--co-spacing-xs);
+}
+.tg__head-dow {
+  font-size: var(--co-font-size-11, 11px);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--co-cal-text-muted);
+}
+.tg__head-num {
+  font-size: var(--co-font-size-20, 20px);
+  color: var(--co-cal-text);
+  min-width: 34px;
+  height: 34px;
+  line-height: 34px;
+  text-align: center;
+  border-radius: var(--co-border-radius-full);
+}
+.tg__head-day--today .tg__head-dow { color: var(--co-cal-today-ring); }
+.tg__head-day--today .tg__head-num {
+  background: var(--co-cal-today-ring);
+  color: var(--co-color-base-blanco, #fff);
+  font-weight: 500;
+}
+
+/* ── All-day lane ───────────────────────────────────────────── */
+.tg__allday {
+  display: grid;
+  grid-template-columns: var(--co-cal-axis-w) 1fr;
+  min-height: var(--co-cal-allday-h);
+  border-bottom: 1px solid var(--co-cal-border);
+}
+.tg__allday-axis {
+  border-right: 1px solid var(--co-cal-border);
+  font-size: var(--co-font-size-10, 10px);
+  color: var(--co-cal-text-muted);
+  padding: var(--co-spacing-xxs);
+}
+.tg__allday-lane { position: relative; min-height: var(--co-cal-allday-h); padding: 2px 0; }
+.tg__allday-bar {
+  position: absolute;
+  height: 20px;
+  box-sizing: border-box;
+  padding: 0 var(--co-spacing-xs);
+  border: 0;
+  border-radius: var(--co-cal-event-radius);
+  background: var(--co-cal-event-bg);
+  color: var(--co-cal-event-text);
+  font: 500 var(--co-font-size-11, 11px)/20px var(--co-font-family-primary);
+  text-align: left;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.tg__allday-bar:hover { box-shadow: var(--co-cal-elevation-hover); z-index: 2; }
+.tg__allday-bar--continues-before { border-top-left-radius: 0; border-bottom-left-radius: 0; }
+.tg__allday-bar--continues-after { border-top-right-radius: 0; border-bottom-right-radius: 0; }
+.tg__allday-bar--tentative {
+  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5) 0 4px, transparent 4px 8px);
+}
+.tg__allday-bar--cancelled { opacity: 0.6; text-decoration: line-through; }
+.tg__allday-bar:focus-visible { outline: 2px solid var(--co-semantic-border-focus); outline-offset: 1px; }
+
+/* ── Scrollable body ────────────────────────────────────────── */
+.tg__scroll { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; }
+.tg__body { display: grid; grid-template-columns: var(--co-cal-axis-w) 1fr; position: relative; }
+
+/* El eje ya no monta un div por slot: una etiqueta absoluta por HORA, anclada
+   por fracción del alto total (misma posición exacta que el borde de la hora). */
+.tg__axis { border-right: 1px solid var(--co-cal-border); position: relative; }
+.tg__axis-hour {
+  position: absolute;
+  right: var(--co-spacing-xs);
+  transform: translateY(-50%);
+  font-size: var(--co-font-size-11, 11px);
+  color: var(--co-cal-text-muted);
+  white-space: nowrap;
+}
+
+/* La altura viene inline (nº de slots × --co-cal-slot-h); grid-auto-rows: 100%
+   fija la fila explícitamente para que las columnas no dependan del stretch
+   implícito ahora que ya no tienen hijos en flujo. */
+.tg__cols { display: grid; grid-auto-rows: 100%; position: relative; }
+/* Las líneas de hora eran ~96 divs .tg__slot por columna (7×96 = 672 nodos/frame
+   solo decorativos): ahora son un background de 1px repetido cada --co-cal-hour-h.
+   El offset cubre ventanas que no arrancan en hora exacta (minTime "06:30"). */
+.tg__col {
+  position: relative;
+  border-right: 1px solid var(--co-cal-border);
+  background-image: linear-gradient(
+    to bottom,
+    var(--co-cal-border) 0,
+    var(--co-cal-border) 1px,
+    transparent 1px
+  );
+  background-size: 100% var(--co-cal-hour-h, calc(4 * var(--co-cal-slot-h)));
+  background-position: 0 var(--co-cal-hour-offset, 0px);
+  background-repeat: repeat-y;
+}
+.tg__col:last-child { border-right: 0; }
+
+/* ── Interacción en curso (drag / selección) ─────────────────────
+   La clase la pone/saca el componente por classList (sin re-render).
+   - los chips no capturan hover ni hit-testing mientras se barre la grilla;
+   - `contain: layout` acota la invalidación al interior de cada columna. Va
+     SOLO aquí: crea stacking context, y en reposo eso taparía la sombra de
+     hover (z-index 5) con la columna vecina. Sin `paint`: recortaría el punto
+     de la now-line (left:-4px). */
+.tg--interacting .tg__event { pointer-events: none; }
+.tg--interacting .tg__col { contain: layout; }
+
+/* ── Event boxes ────────────────────────────────────────────── */
+.tg__event {
+  position: absolute;
+  /* Reemplazan al preventDefault del pointerdown (que anulaba el click):
+     sin selección de texto al arrastrar y sin scroll táctil sobre el bloque. */
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none;
+  box-sizing: border-box;
+  border-radius: var(--co-cal-event-radius);
+  background: var(--co-cal-event-bg);
+  color: var(--co-cal-event-text);
+  border: 1px solid var(--co-cal-event-border);
+  padding: 2px var(--co-spacing-xs);
+  font-size: var(--co-font-size-11, 11px);
+  line-height: 1.15;
+  overflow: hidden;
+  cursor: pointer;
+  text-align: left;
+}
+/* Bloque de carga: ocupa el lugar de un evento (misma caja, mismo radio) pero
+   sin color de calendario ni interacción — el brillo lo pone co-skeleton. */
+.tg__event-skeleton {
+  position: absolute;
+  inset-inline: 0 2px;
+  box-sizing: border-box;
+  border-radius: var(--co-cal-event-radius);
+  overflow: hidden;
+  pointer-events: none;
+}
+.tg__event-skeleton co-skeleton { display: block; block-size: 100%; }
+
+.tg__event:hover { box-shadow: var(--co-cal-elevation-hover); z-index: 5; }
+.tg__event--dragging:hover { box-shadow: none; }
+.tg__event:focus-visible { outline: 2px solid var(--co-semantic-border-focus); outline-offset: 1px; }
+.tg__event-time { display: block; font-variant-numeric: tabular-nums; opacity: 0.85; }
+.tg__event-title { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tg__event-ext { position: absolute; top: 3px; right: 3px; opacity: 0.9; }
+.tg__event--past { opacity: 0.55; }
+.tg__event--external { border-style: dashed; }
+.tg__event--locked { cursor: default; }
+.tg__event--dragging { opacity: 0.5; }
+
+/* Response-state treatments (orthogonal to --past which dims by time). */
+.tg__event--tentative {
+  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5) 0 4px, transparent 4px 8px);
+}
+.tg__event--cancelled { opacity: 0.6; }
+.tg__event--cancelled .tg__event-title { text-decoration: line-through; }
+
+.tg__event-resize {
+  position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
+  cursor: ns-resize;
+}
+
+/* ── Selection ghost ────────────────────────────────────────── */
+.tg__selection {
+  position: absolute; left: 0; right: 0; box-sizing: border-box; z-index: 2;
+  background: color-mix(in srgb, var(--co-cal-today-ring) 22%, transparent);
+  border: 1px solid var(--co-cal-today-ring);
+  border-radius: var(--co-border-radius-xxs);
+  pointer-events: none;
+}
+
+/* ── Drag ghost (move/resize) ───────────────────────────────────
+   Vive en .tg__cols (no en una columna) y se posiciona con style directo desde
+   applyDrag: mismo lenguaje visual que el ghost de selección. */
+.tg__drag-ghost {
+  position: absolute;
+  display: none;
+  box-sizing: border-box;
+  z-index: 4;
+  pointer-events: none;
+  background: color-mix(in srgb, var(--co-cal-today-ring) 22%, transparent);
+  border: 1px solid var(--co-cal-today-ring);
+  border-radius: var(--co-border-radius-xxs);
+  will-change: transform;
+}
+
+/* ── Keyboard focus indicator ───────────────────────────────── */
+.tg__focus {
+  position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none;
+  box-sizing: border-box;
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: -2px;
+  border-radius: var(--co-border-radius-xxs);
+}
+
+/* ── Now indicator ──────────────────────────────────────────── */
+.tg__now { position: absolute; left: 0; right: 0; height: 0; z-index: 3; pointer-events: none; }
+.tg__now::before {
+  content: ''; position: absolute; left: -4px; top: -4px;
+  width: 8px; height: 8px; border-radius: 50%; background: var(--co-cal-now-color);
+}
+.tg__now::after {
+  content: ''; position: absolute; left: 0; right: 0; top: 0;
+  border-top: 2px solid var(--co-cal-now-color);
+}