@jjlmoya/utils-babies 1.5.0 → 1.7.0

package/src/tool/pregnancy-calculator/component.astro

@@ -40,25 +40,25 @@ const { ui } = Astro.props;
           <select
             id="pc-dp-day"
             class="pregnancy-calculator-dp-select"
-            aria-label="Día"
+            aria-label={ui.dayLabel}
           >
-            <option value="">Día</option>
+            <option value="">{ui.dayLabel}</option>
           </select>
           <span class="pregnancy-calculator-dp-sep">/</span>
           <select
             id="pc-dp-month"
             class="pregnancy-calculator-dp-select"
-            aria-label="Mes"
+            aria-label={ui.monthLabel}
           >
-            <option value="">Mes</option>
+            <option value="">{ui.monthLabel}</option>
           </select>
           <span class="pregnancy-calculator-dp-sep">/</span>
           <select
             id="pc-dp-year"
             class="pregnancy-calculator-dp-select"
-            aria-label="Año"
+            aria-label={ui.yearLabel}
           >
-            <option value="">Año</option>
+            <option value="">{ui.yearLabel}</option>
           </select>
         </div>
       </div>
@@ -144,7 +144,7 @@ const { ui } = Astro.props;
       >
         <div class="pregnancy-calculator-mp-top-row">
           <span class="pregnancy-calculator-mp-badge" id="pc-mp-badge"
-            >Semana —</span
+            >{ui.labelWeekBadge} —</span
           >
           <div class="pregnancy-calculator-analogy-tabs">
             <button class="pregnancy-calculator-at-btn" data-cat="fruits"
@@ -207,7 +207,7 @@ const { ui } = Astro.props;
 
 <script>
   import { getState, setState, subscribe } from "./store";
-  import { getMilestone, timelineLabels } from "./milestones";
+  import { getMilestone } from "./milestones";
   import type { PCState } from "./store";
   import type { CalcResult } from "./calculator";
 
@@ -244,21 +244,11 @@ const { ui } = Astro.props;
   const mpAlert = root.querySelector("#pc-mp-alert") as HTMLElement;
   const tlScroll = root.querySelector("#pc-tl-scroll") as HTMLElement;
 
-  const MONTHS_ES = [
-    "Ene",
-    "Feb",
-    "Mar",
-    "Abr",
-    "May",
-    "Jun",
-    "Jul",
-    "Ago",
-    "Sep",
-    "Oct",
-    "Nov",
-    "Dic",
-  ];
-  const fmtEdd = new Intl.DateTimeFormat("es-ES", {
+  const MONTHS = JSON.parse(ui.monthsData as string);
+  const timelineLabels = JSON.parse(ui.timelineLabelsData as string);
+  const milestones = JSON.parse(ui.milestonesData as string);
+
+  const fmtEdd = new Intl.DateTimeFormat(document.documentElement.lang || "es", {
     day: "numeric",
     month: "long",
     year: "numeric",
@@ -271,7 +261,7 @@ const { ui } = Astro.props;
       o.textContent = String(d).padStart(2, "0");
       dpDay.appendChild(o);
     }
-    MONTHS_ES.forEach((m, i) => {
+    MONTHS.forEach((m: string, i: number) => {
       const o = document.createElement("option");
       o.value = String(i + 1);
       o.textContent = m;
@@ -426,7 +416,7 @@ const { ui } = Astro.props;
   }
 
   function renderMilestone(weeks: number, cat: string, partner: boolean): void {
-    const ms = getMilestone(weeks);
+    const ms = getMilestone(weeks, milestones);
     mpBadge.textContent = `${ui["labelWeekBadge"] ?? "Semana"} ${weeks}`;
     mpAnalogy.textContent =
       ms.analogies[cat as "fruits" | "geek" | "sweets"] ?? ms.analogies.fruits;
@@ -512,8 +502,8 @@ const { ui } = Astro.props;
       `DTSTART;VALUE=DATE:${y}${m}${d}`,
       `DTEND;VALUE=DATE:${y}${m}${d}`,
       `DTSTAMP:${stamp}`,
-      "SUMMARY:Fecha Probable de Parto",
-      "DESCRIPTION:Fecha estimada de parto calculada por jjlmoya",
+      `SUMMARY:${ui.icsSummary}`,
+      `DESCRIPTION:${ui.icsDescription}`,
       "END:VEVENT",
       "END:VCALENDAR",
     ];
@@ -521,7 +511,7 @@ const { ui } = Astro.props;
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
-    a.download = "fecha-parto.ics";
+    a.download = ui.icsFilename as string;
     a.click();
     URL.revokeObjectURL(url);
   }
@@ -658,7 +648,7 @@ const { ui } = Astro.props;
     --pc-bg-dark: #0f1923;
     --pc-text: #f1f5f9;
     --pc-text-muted: #94a3b8;
-    --pc-text-dim: #64748b;
+    --pc-text-dim: #cbd5e1;
     --pc-border: rgba(255, 255, 255, 0.04);
     --pc-border-inner: rgba(255, 255, 255, 0.04);
     --pc-shadow: rgba(0, 0, 0, 0.4);
@@ -866,6 +856,11 @@ const { ui } = Astro.props;
     min-width: 0;
   }
 
+  :global(.theme-dark) .pregnancy-calculator-dp-select {
+    background-color: #0f1923;
+    color: #f1f5f9;
+  }
+
   .pregnancy-calculator-dp-sep {
     color: #cbd5e1;
     font-size: 1rem;
@@ -874,6 +869,10 @@ const { ui } = Astro.props;
     padding: 0 2px;
   }
 
+  :global(.theme-dark) .pregnancy-calculator-dp-sep {
+    color: #64748b;
+  }
+
   .pregnancy-calculator-cs-wrap {
     background: #fff;
     border-radius: 18px;
@@ -1436,7 +1435,15 @@ const { ui } = Astro.props;
     border-radius: 2px;
   }
 
-  .pregnancy-calculator-tl-row {
+  :global(.theme-dark) .pregnancy-calculator-tl-scroll {
+    scrollbar-color: #334155 transparent;
+  }
+
+  :global(.theme-dark) .pregnancy-calculator-tl-scroll::-webkit-scrollbar-thumb {
+    background: #334155;
+  }
+
+  :global(.pregnancy-calculator-tl-row) {
     display: flex;
     align-items: flex-start;
     gap: 0.5rem;
@@ -1445,11 +1452,11 @@ const { ui } = Astro.props;
     transition: background 0.1s;
   }
 
-  .pregnancy-calculator-tl-row-current {
+  :global(.pregnancy-calculator-tl-row-current) {
     background: var(--pc-tri-bg);
   }
 
-  .pregnancy-calculator-tl-line-col {
+  :global(.pregnancy-calculator-tl-line-col) {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -1458,7 +1465,7 @@ const { ui } = Astro.props;
     padding-top: 0.2rem;
   }
 
-  .pregnancy-calculator-tl-dot {
+  :global(.pregnancy-calculator-tl-dot) {
     width: 0.5rem;
     height: 0.5rem;
     border-radius: 50%;
@@ -1467,18 +1474,18 @@ const { ui } = Astro.props;
     transition: background 0.15s;
   }
 
-  .pregnancy-calculator-tl-row-past .pregnancy-calculator-tl-dot {
+  :global(.pregnancy-calculator-tl-row-past .pregnancy-calculator-tl-dot) {
     background: var(--pc-tri-accent);
   }
 
-  .pregnancy-calculator-tl-row-current .pregnancy-calculator-tl-dot {
+  :global(.pregnancy-calculator-tl-row-current .pregnancy-calculator-tl-dot) {
     background: var(--pc-tri-accent);
     box-shadow: 0 0 0 3px var(--pc-tri-glow);
     width: 0.625rem;
     height: 0.625rem;
   }
 
-  .pregnancy-calculator-tl-line {
+  :global(.pregnancy-calculator-tl-line) {
     width: 2px;
     flex: 1;
     min-height: 1.25rem;
@@ -1486,34 +1493,34 @@ const { ui } = Astro.props;
     margin-top: 2px;
   }
 
-  .pregnancy-calculator-tl-row-past .pregnancy-calculator-tl-line {
+  :global(.pregnancy-calculator-tl-row-past .pregnancy-calculator-tl-line) {
     background: var(--pc-tri-primary);
   }
 
-  .pregnancy-calculator-tl-info {
+  :global(.pregnancy-calculator-tl-info) {
     display: flex;
     align-items: baseline;
     gap: 0.375rem;
     min-width: 0;
   }
 
-  .pregnancy-calculator-tl-num {
+  :global(.pregnancy-calculator-tl-num) {
     font-size: 0.75rem;
     font-weight: 700;
     color: var(--pc-text-dim);
     flex-shrink: 0;
   }
 
-  .pregnancy-calculator-tl-row-past .pregnancy-calculator-tl-num {
+  :global(.pregnancy-calculator-tl-row-past .pregnancy-calculator-tl-num) {
     color: var(--pc-tri-accent);
   }
 
-  .pregnancy-calculator-tl-row-current .pregnancy-calculator-tl-num {
+  :global(.pregnancy-calculator-tl-row-current .pregnancy-calculator-tl-num) {
     color: var(--pc-tri-accent);
     font-size: 0.875rem;
   }
 
-  .pregnancy-calculator-tl-label {
+  :global(.pregnancy-calculator-tl-label) {
     font-size: 0.6875rem;
     color: var(--pc-text-dim);
     white-space: nowrap;
@@ -1521,7 +1528,7 @@ const { ui } = Astro.props;
     text-overflow: ellipsis;
   }
 
-  .pregnancy-calculator-tl-row-current .pregnancy-calculator-tl-label {
+  :global(.pregnancy-calculator-tl-row-current .pregnancy-calculator-tl-label) {
     color: var(--pc-tri-text);
     font-weight: 600;
     font-size: 0.75rem;
@@ -1556,20 +1563,20 @@ const { ui } = Astro.props;
       gap: 0.25rem;
     }
 
-    .pregnancy-calculator-tl-row {
+    :global(.pregnancy-calculator-tl-row) {
       flex-direction: column;
       align-items: center;
       padding: 0.5rem 0.375rem;
       min-width: 3rem;
     }
 
-    .pregnancy-calculator-tl-line-col {
+    :global(.pregnancy-calculator-tl-line-col) {
       flex-direction: row;
       width: auto;
       padding-top: 0;
     }
 
-    .pregnancy-calculator-tl-line {
+    :global(.pregnancy-calculator-tl-line) {
       width: 1.25rem;
       height: 2px;
       min-height: 0;
@@ -1577,13 +1584,13 @@ const { ui } = Astro.props;
       margin-left: 2px;
     }
 
-    .pregnancy-calculator-tl-info {
+    :global(.pregnancy-calculator-tl-info) {
       flex-direction: column;
       align-items: center;
       gap: 0.125rem;
     }
 
-    .pregnancy-calculator-tl-label {
+    :global(.pregnancy-calculator-tl-label) {
       display: none;
     }