@happyvertical/smrt-timesheets 0.0.0-stage → 0.53.0

package/dist/svelte/components/TimeEntryCard.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+import { type Currency, type TimeEntry } from './utils.js';
+/** Props for TimeEntryCard component */
+export interface Props {
+    /** Time entry data to display. */
+    entry: TimeEntry;
+    /** URL to navigate to when the card is clicked. */
+    href?: string;
+    /** Invoked when the card content is clicked. */
+    onclick?: () => void;
+    /** Shows a checkbox for selecting the entry. */
+    selectable?: boolean;
+    /** Indicates whether the entry is selected. */
+    selected?: boolean;
+    /** Invoked when the selection checkbox is toggled. */
+    onselect?: (id: string, selected: boolean) => void;
+    /** Currency code for formatting hourly rates and amounts. */
+    currency?: Currency;
+    /** Renders action buttons on the right side of the card. */
+    actions?: Snippet;
+}
+declare const TimeEntryCard: import("svelte").Component<Props, {}, "">;
+type TimeEntryCard = ReturnType<typeof TimeEntryCard>;
+export default TimeEntryCard;
+//# sourceMappingURL=TimeEntryCard.svelte.d.ts.map

package/dist/svelte/components/TimeEntryCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeEntryCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/TimeEntryCard.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,EACL,KAAK,QAAQ,EAKb,KAAK,SAAS,EACf,MAAM,YAAY,CAAC;AAGpB,wCAAwC;AACxC,MAAM,WAAW,KAAK;IACpB,kCAAkC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAoHD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/TimeEntryList.svelte

@@ -0,0 +1,360 @@
+<script lang="ts">
+/**
+ * TimeEntryList - List of time entries with optional selection
+ * Supports bulk selection and grouping
+ */
+
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../i18n.js';
+import {
+  type Currency,
+  formatCurrency,
+  formatDate,
+  formatHours,
+  statusColors,
+  type TimeEntry,
+} from './utils.js';
+
+const { t } = useI18n();
+
+/** Props for TimeEntryList component */
+export interface Props {
+  /** Time entries to display in the list. */
+  entries: TimeEntry[];
+  /** Shows checkboxes for selecting entries. */
+  selectable?: boolean;
+  /** Identifiers of currently selected entries. */
+  selectedIds?: string[];
+  /** Invoked when the selection changes. */
+  onselectionchange?: (ids: string[]) => void;
+  /** Message shown when the entries list is empty. */
+  emptyMessage?: string;
+  /** Base URL to construct entry detail links. */
+  baseHref?: string;
+  /** Currency code for formatting amounts. */
+  currency?: Currency;
+  /** Filter function to determine which entries can be selected */
+  canSelect?: (entry: TimeEntry) => boolean;
+}
+
+let {
+  entries,
+  selectable = false,
+  selectedIds = [],
+  onselectionchange,
+  emptyMessage = 'No time entries',
+  baseHref,
+  currency = 'CAD',
+  canSelect = () => true,
+}: Props = $props();
+
+// Filter entries that can actually be selected
+const selectableEntries = $derived(selectable ? entries.filter(canSelect) : []);
+
+const allSelected = $derived(
+  selectableEntries.length > 0 &&
+    selectableEntries.every((e) => selectedIds.includes(e.id)),
+);
+
+const someSelected = $derived(selectedIds.length > 0 && !allSelected);
+
+function handleSelectAll(event: Event) {
+  const target = event.target as HTMLInputElement;
+  if (target.checked) {
+    onselectionchange?.(selectableEntries.map((e) => e.id));
+  } else {
+    onselectionchange?.([]);
+  }
+}
+
+function handleSelect(id: string, selected: boolean, event: Event) {
+  event.preventDefault();
+  event.stopPropagation();
+  if (selected) {
+    onselectionchange?.([...selectedIds, id]);
+  } else {
+    onselectionchange?.(selectedIds.filter((i) => i !== id));
+  }
+}
+
+function getEntryHref(entry: TimeEntry): string | undefined {
+  if (!baseHref) return undefined;
+  return `${baseHref}/${entry.id}`;
+}
+</script>
+
+{#if entries.length === 0}
+  <div class="empty-state">
+    <p>{emptyMessage}</p>
+  </div>
+{:else}
+  <div class="time-entry-list">
+    {#if selectable && selectableEntries.length > 0}
+      <div class="list-header">
+        <label class="select-all">
+          <!-- raw-primitive-allow: select-all checkbox needs the indeterminate state; must stay native -->
+          <input
+            type="checkbox"
+            checked={allSelected}
+            indeterminate={someSelected}
+            onchange={handleSelectAll}
+            aria-label={t(M['projects.time_entry_list.select_all_aria'])}
+          />
+          <span>{t(M['projects.time_entry_list.select_all'])}</span>
+        </label>
+        <span class="selection-count">
+          {t(M['projects.time_entry_list.selection_count'], { selected: selectedIds.length, total: selectableEntries.length })}
+        </span>
+      </div>
+    {/if}
+
+    <div class="entries">
+      {#each entries as entry (entry.id)}
+        {@const isSelected = selectedIds.includes(entry.id)}
+        {@const isSelectable = selectable && canSelect(entry)}
+        {@const entryHref = getEntryHref(entry)}
+        <div
+          class="entry-row"
+          class:selected={isSelected}
+          class:selectable={isSelectable}
+          class:has-checkbox={selectable && selectableEntries.length > 0}
+        >
+          {#if selectable && selectableEntries.length > 0}
+            <div class="checkbox-cell">
+              {#if isSelectable}
+                <!-- raw-primitive-allow: native row checkbox; no Provider-free checkbox primitive, kept native to match the indeterminate select-all -->
+                <input
+                  type="checkbox"
+                  checked={isSelected}
+                  onchange={(e) => handleSelect(entry.id, (e.target as HTMLInputElement).checked, e)}
+                  aria-label={t(M['projects.time_entry_list.select_entry_aria'], { description: entry.description })}
+                />
+              {/if}
+            </div>
+          {/if}
+
+          {#if entryHref}
+            <a href={entryHref} class="entry-content">
+              {@render entryDetails(entry)}
+            </a>
+          {:else}
+            <div class="entry-content">
+              {@render entryDetails(entry)}
+            </div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  </div>
+{/if}
+
+{#snippet entryDetails(entry: TimeEntry)}
+  <div class="date-cell">
+    {formatDate(entry.date)}
+  </div>
+
+  <div class="description-cell">
+    <span class="description">{entry.description}</span>
+    {#if entry.workerName}
+      <span class="worker">{entry.workerName}</span>
+    {/if}
+  </div>
+
+  <div class="hours-cell">
+    {formatHours(entry.hours)}
+  </div>
+
+  <div class="status-cell">
+    <span class="status-badge" style="--status-color: {statusColors[entry.status]}">
+      {entry.status}
+    </span>
+  </div>
+
+  {#if entry.amount !== undefined}
+    <div class="amount-cell">
+      {formatCurrency(entry.amount, currency)}
+    </div>
+  {/if}
+{/snippet}
+
+<style>
+  .empty-state {
+    padding: 3rem 1rem;
+    text-align: center;
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .time-entry-list {
+    background: var(--smrt-color-surface);
+    border-radius: var(--smrt-radius-large, 16px);
+    overflow: hidden;
+    border: 1px solid var(--smrt-color-outline-variant);
+  }
+
+  .list-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    background: var(--smrt-color-surface-container-low);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
+  }
+
+  .select-all {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    font-weight: var(--smrt-typography-label-large-weight, 500);
+  }
+
+  .select-all input[type='checkbox'] {
+    width: 1rem;
+    height: 1rem;
+    cursor: pointer;
+    accent-color: var(--smrt-color-primary);
+  }
+
+  .selection-count {
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .entries {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .entry-row {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
+    transition: background 0.15s var(--smrt-easing-standard);
+  }
+
+  .entry-row:last-child {
+    border-bottom: none;
+  }
+
+  .entry-row:hover {
+    background: var(--smrt-color-surface-container-lowest);
+  }
+
+  .entry-row.selected {
+    background: var(--smrt-color-primary-container);
+  }
+
+  .checkbox-cell {
+    width: 2rem;
+    flex-shrink: 0;
+    padding-left: 1rem;
+  }
+
+  .checkbox-cell input[type='checkbox'] {
+    width: 1rem;
+    height: 1rem;
+    cursor: pointer;
+    accent-color: var(--smrt-color-primary);
+  }
+
+  .entry-content {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    padding: 0.875rem 1rem;
+    text-decoration: none;
+    color: inherit;
+    min-width: 0;
+  }
+
+  a.entry-content:focus {
+    outline: 2px solid var(--smrt-color-primary);
+    outline-offset: -2px;
+  }
+
+  .date-cell {
+    width: 4.5rem;
+    flex-shrink: 0;
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .description-cell {
+    flex: 1;
+    min-width: 0;
+    padding-right: 1rem;
+  }
+
+  .description {
+    display: block;
+    font-size: var(--smrt-typography-body-large-size, 0.9375rem);
+    color: var(--smrt-color-on-surface);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .worker {
+    display: block;
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    color: var(--smrt-color-on-surface-variant);
+    margin-top: 0.125rem;
+  }
+
+  .hours-cell {
+    width: 4rem;
+    flex-shrink: 0;
+    font-size: var(--smrt-typography-body-large-size, 0.9375rem);
+    font-weight: var(--smrt-typography-title-medium-weight, 500);
+    color: var(--smrt-color-primary);
+    text-align: right;
+    padding-right: 1rem;
+  }
+
+  .status-cell {
+    width: 6rem;
+    flex-shrink: 0;
+    text-align: center;
+  }
+
+  .status-badge {
+    display: inline-block;
+    font-size: var(--smrt-typography-label-small-size, 0.625rem);
+    font-weight: var(--smrt-typography-label-small-weight, 500);
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--smrt-radius-small, 8px);
+    background: var(--status-color);
+    color: var(--smrt-color-on-primary);
+    text-transform: uppercase;
+    letter-spacing: var(--smrt-typography-label-small-tracking, 0.5px);
+  }
+
+  .amount-cell {
+    width: 6rem;
+    flex-shrink: 0;
+    font-size: var(--smrt-typography-body-large-size, 0.9375rem);
+    font-weight: var(--smrt-typography-title-medium-weight, 500);
+    text-align: right;
+  }
+
+  @media (max-width: 640px) {
+    .entry-content {
+      flex-wrap: wrap;
+      gap: 0.5rem;
+    }
+
+    .description-cell {
+      order: 1;
+      width: 100%;
+      padding-right: 0;
+    }
+
+    .date-cell,
+    .hours-cell,
+    .status-cell,
+    .amount-cell {
+      flex: none;
+    }
+  }
+</style>

package/dist/svelte/components/TimeEntryList.svelte.d.ts

@@ -0,0 +1,24 @@
+import { type Currency, type TimeEntry } from './utils.js';
+/** Props for TimeEntryList component */
+export interface Props {
+    /** Time entries to display in the list. */
+    entries: TimeEntry[];
+    /** Shows checkboxes for selecting entries. */
+    selectable?: boolean;
+    /** Identifiers of currently selected entries. */
+    selectedIds?: string[];
+    /** Invoked when the selection changes. */
+    onselectionchange?: (ids: string[]) => void;
+    /** Message shown when the entries list is empty. */
+    emptyMessage?: string;
+    /** Base URL to construct entry detail links. */
+    baseHref?: string;
+    /** Currency code for formatting amounts. */
+    currency?: Currency;
+    /** Filter function to determine which entries can be selected */
+    canSelect?: (entry: TimeEntry) => boolean;
+}
+declare const TimeEntryList: import("svelte").Component<Props, {}, "">;
+type TimeEntryList = ReturnType<typeof TimeEntryList>;
+export default TimeEntryList;
+//# sourceMappingURL=TimeEntryList.svelte.d.ts.map

package/dist/svelte/components/TimeEntryList.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeEntryList.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/TimeEntryList.svelte.ts"],"names":[],"mappings":"AASA,OAAO,EACL,KAAK,QAAQ,EAKb,KAAK,SAAS,EACf,MAAM,YAAY,CAAC;AAGpB,wCAAwC;AACxC,MAAM,WAAW,KAAK;IACpB,2CAA2C;IAC3C,OAAO,EAAE,SAAS,EAAE,CAAC;IACrB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,iEAAiE;IACjE,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC;CAC3C;AA2ID,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/TimeSummary.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+/**
+ * TimeSummary - Summary statistics for time entries
+ * Shows total hours, amounts, and pending items
+ */
+
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../i18n.js';
+import { type Currency, formatCurrency, formatHours } from './utils.js';
+
+/** Props for TimeSummary component */
+export interface Props {
+  /** Total hours across all time entries. */
+  totalHours: number;
+  /** Total charged or invoiced amount. */
+  totalAmount: number;
+  /** Hours awaiting approval. */
+  pendingHours?: number;
+  /** Amount awaiting approval. */
+  pendingAmount?: number;
+  /** Hours that have been approved. */
+  approvedHours?: number;
+  /** Amount that has been approved. */
+  approvedAmount?: number;
+  /** Number of time entries included in the summary. */
+  entryCount?: number;
+  /** Currency code for formatting amounts. */
+  currency?: Currency;
+  /** Shows the pending hours and amount card when there are pending items. */
+  showPending?: boolean;
+  /** Shows the approved hours and amount card when there are approved items. */
+  showApproved?: boolean;
+  /** Arranges summary cards in a grid or flexbox layout. */
+  layout?: 'horizontal' | 'grid';
+}
+
+let {
+  totalHours,
+  totalAmount,
+  pendingHours = 0,
+  pendingAmount = 0,
+  approvedHours = 0,
+  approvedAmount = 0,
+  entryCount,
+  currency = 'CAD',
+  showPending = true,
+  showApproved = false,
+  layout = 'grid',
+}: Props = $props();
+
+const { t } = useI18n();
+</script>
+
+<div class="time-summary" class:horizontal={layout === 'horizontal'}>
+  <div class="summary-card">
+    <span class="label">{t(M['projects.time_summary.total_hours'])}</span>
+    <span class="value">{formatHours(totalHours)}</span>
+    {#if entryCount !== undefined}
+      <span class="count">{entryCount} {entryCount === 1 ? 'entry' : 'entries'}</span>
+    {/if}
+  </div>
+
+  <div class="summary-card">
+    <span class="label">{t(M['projects.time_summary.total_value'])}</span>
+    <span class="value">{formatCurrency(totalAmount, currency)}</span>
+  </div>
+
+  {#if showPending && (pendingHours > 0 || pendingAmount > 0)}
+    <div class="summary-card highlight">
+      <span class="label">{t(M['projects.time_summary.pending_approval'])}</span>
+      <span class="value">{formatHours(pendingHours)}</span>
+      <span class="sub-value">{formatCurrency(pendingAmount, currency)}</span>
+    </div>
+  {/if}
+
+  {#if showApproved && (approvedHours > 0 || approvedAmount > 0)}
+    <div class="summary-card success">
+      <span class="label">Approved</span>
+      <span class="value">{formatHours(approvedHours)}</span>
+      <span class="sub-value">{formatCurrency(approvedAmount, currency)}</span>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .time-summary {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 1rem;
+  }
+
+  .time-summary.horizontal {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+
+  .time-summary.horizontal .summary-card {
+    flex: 1 1 140px;
+    min-width: 140px;
+  }
+
+  .summary-card {
+    background: var(--smrt-color-surface);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-medium, 12px);
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .summary-card.highlight {
+    background: var(--smrt-color-tertiary-container);
+    border-color: var(--smrt-color-tertiary);
+  }
+
+  .summary-card.success {
+    background: var(--smrt-color-primary-container);
+    border-color: var(--smrt-color-primary);
+  }
+
+  .label {
+    font-size: var(--smrt-typography-label-small-size, 0.75rem);
+    font-weight: var(--smrt-typography-label-small-weight, 500);
+    color: var(--smrt-color-on-surface-variant);
+    text-transform: uppercase;
+    letter-spacing: var(--smrt-typography-label-small-tracking, 0.5px);
+  }
+
+  .value {
+    font-size: var(--smrt-typography-headline-small-size, 1.5rem);
+    font-weight: var(--smrt-typography-headline-small-weight, 400);
+    color: var(--smrt-color-on-surface);
+  }
+
+  .sub-value {
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .count {
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .highlight .label {
+    color: var(--smrt-color-on-tertiary-container);
+  }
+
+  .highlight .value {
+    color: var(--smrt-color-tertiary);
+  }
+
+  .highlight .sub-value {
+    color: var(--smrt-color-on-tertiary-container);
+  }
+
+  .success .label {
+    color: var(--smrt-color-on-primary-container);
+  }
+
+  .success .value {
+    color: var(--smrt-color-primary);
+  }
+
+  .success .sub-value {
+    color: var(--smrt-color-on-primary-container);
+  }
+
+  @media (max-width: 480px) {
+    .time-summary {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+</style>

package/dist/svelte/components/TimeSummary.svelte.d.ts

@@ -0,0 +1,30 @@
+import { type Currency } from './utils.js';
+/** Props for TimeSummary component */
+export interface Props {
+    /** Total hours across all time entries. */
+    totalHours: number;
+    /** Total charged or invoiced amount. */
+    totalAmount: number;
+    /** Hours awaiting approval. */
+    pendingHours?: number;
+    /** Amount awaiting approval. */
+    pendingAmount?: number;
+    /** Hours that have been approved. */
+    approvedHours?: number;
+    /** Amount that has been approved. */
+    approvedAmount?: number;
+    /** Number of time entries included in the summary. */
+    entryCount?: number;
+    /** Currency code for formatting amounts. */
+    currency?: Currency;
+    /** Shows the pending hours and amount card when there are pending items. */
+    showPending?: boolean;
+    /** Shows the approved hours and amount card when there are approved items. */
+    showApproved?: boolean;
+    /** Arranges summary cards in a grid or flexbox layout. */
+    layout?: 'horizontal' | 'grid';
+}
+declare const TimeSummary: import("svelte").Component<Props, {}, "">;
+type TimeSummary = ReturnType<typeof TimeSummary>;
+export default TimeSummary;
+//# sourceMappingURL=TimeSummary.svelte.d.ts.map

package/dist/svelte/components/TimeSummary.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/TimeSummary.svelte.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,QAAQ,EAA+B,MAAM,YAAY,CAAC;AAGxE,sCAAsC;AACtC,MAAM,WAAW,KAAK;IACpB,2CAA2C;IAC3C,UAAU,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,WAAW,EAAE,MAAM,CAAC;IACpB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qCAAqC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qCAAqC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,4EAA4E;IAC5E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8EAA8E;IAC9E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;CAChC;AA6DD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/__tests__/DurationDisplay.test.js

@@ -0,0 +1,57 @@
+// @vitest-environment jsdom
+/**
+ * First component test in smrt-projects via the shared S11 harness (#1416).
+ */
+import { expectNoA11yViolations, render, screen, } from '@happyvertical/smrt-vitest/svelte';
+import { describe, expect, it } from 'vitest';
+import DurationDisplay from '../DurationDisplay.svelte';
+describe('DurationDisplay', () => {
+    it('renders decimal hours to one decimal place', () => {
+        render(DurationDisplay, { props: { hours: 2.5 } });
+        expect(screen.getByText('2.5')).toBeInTheDocument();
+    });
+    it('renders an HH:MM value in hhmm format', () => {
+        render(DurationDisplay, { props: { hours: 1.5, format: 'hhmm' } });
+        expect(screen.getByText('1:30')).toBeInTheDocument();
+    });
+    // #2605: `showLabel` used to be inert. `decimal` rendered `h` whatever the
+    // prop said, and `hhmm` rendered an empty `<span class="unit">` instead of a
+    // label. These pin the unit to the prop, and pin the unchanged defaults so a
+    // later change to them has to be deliberate.
+    describe('showLabel', () => {
+        it('renders the decimal unit by default', () => {
+            const { container } = render(DurationDisplay, { props: { hours: 2.5 } });
+            expect(container.querySelector('.unit')?.textContent).toBe('h');
+        });
+        it('renders the decimal unit when showLabel is set', () => {
+            const { container } = render(DurationDisplay, {
+                props: { hours: 2.5, showLabel: true },
+            });
+            expect(container.querySelector('.unit')?.textContent).toBe('h');
+        });
+        it('drops the decimal unit when showLabel is cleared', () => {
+            const { container } = render(DurationDisplay, {
+                props: { hours: 2.5, showLabel: false },
+            });
+            expect(container.querySelector('.unit')).toBeNull();
+            expect(container.textContent?.trim()).toBe('2.5');
+        });
+        it.each([
+            undefined,
+            true,
+            false,
+        ])('renders no unit element in hhmm format with showLabel=%s', (showLabel) => {
+            const { container } = render(DurationDisplay, {
+                props: { hours: 1.5, format: 'hhmm', showLabel },
+            });
+            expect(container.querySelector('.unit')).toBeNull();
+            expect(container.textContent?.trim()).toBe('1:30');
+        });
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(DurationDisplay, {
+            props: { hours: 8, showLabel: true },
+        });
+        await expectNoA11yViolations(container);
+    });
+});