@happyvertical/smrt-projects 0.51.39 → 0.53.0

package/dist/svelte/components/TimeEntryCard.svelte

@@ -1,304 +0,0 @@
-<script lang="ts">
-/**
- * TimeEntryCard - Card component for displaying time entries
- * Supports selection mode for bulk operations
- */
-
-import { useI18n } from '@happyvertical/smrt-ui/i18n';
-import type { Snippet } from 'svelte';
-import { M } from '../i18n.js';
-import {
-  type Currency,
-  formatCurrency,
-  formatDate,
-  formatHours,
-  statusColors,
-  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;
-}
-
-let {
-  entry,
-  href,
-  onclick,
-  selectable = false,
-  selected = false,
-  onselect,
-  currency = 'CAD',
-  actions,
-}: Props = $props();
-
-const { t } = useI18n();
-
-function handleCheckboxChange(event: Event) {
-  const target = event.target as HTMLInputElement;
-  onselect?.(entry.id, target.checked);
-}
-
-function handleCardClick(event: MouseEvent) {
-  // If there's an onclick handler, use it
-  if (onclick) {
-    event.preventDefault();
-    onclick();
-  }
-  // If href is provided, let the anchor handle navigation naturally
-}
-
-function handleKeydown(event: KeyboardEvent) {
-  if (event.key === 'Enter' || event.key === ' ') {
-    if (onclick) {
-      event.preventDefault();
-      onclick();
-    }
-    // For href, let the anchor handle it naturally
-  }
-}
-</script>
-
-<div
-  class="time-entry-card"
-  class:selectable
-  class:selected
-  class:clickable={!!href || !!onclick}
->
-  {#if selectable}
-    <div class="checkbox-wrapper">
-      <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive, kept native to match the indeterminate select-all in TimeEntryList -->
-      <input
-        type="checkbox"
-        checked={selected}
-        onchange={handleCheckboxChange}
-        aria-label={t(M['projects.time_entry_card.select_entry'], { description: entry.description })}
-      />
-    </div>
-  {/if}
-
-  {#if href}
-    <a
-      {href}
-      class="card-content"
-      onclick={handleCardClick}
-      onkeydown={handleKeydown}
-    >
-      {@render cardBody()}
-    </a>
-  {:else if onclick}
-    <!-- raw-primitive-allow: pressable selection card wrapping rich content; structural, not a standard action button -->
-    <button
-      type="button"
-      class="card-content"
-      onclick={() => onclick?.()}
-    >
-      {@render cardBody()}
-    </button>
-  {:else}
-    <div class="card-content">
-      {@render cardBody()}
-    </div>
-  {/if}
-
-  {#if actions}
-    <div class="card-actions">
-      {@render actions()}
-    </div>
-  {/if}
-</div>
-
-{#snippet cardBody()}
-  <div class="entry-header">
-    <span class="date">{formatDate(entry.date)}</span>
-    <span class="status-badge" style="--status-color: {statusColors[entry.status]}">
-      {entry.status.toUpperCase()}
-    </span>
-  </div>
-
-  <div class="entry-body">
-    <p class="description">{entry.description}</p>
-    {#if entry.workerName}
-      <p class="worker">{entry.workerName}</p>
-    {/if}
-  </div>
-
-  <div class="entry-footer">
-    <div class="hours">
-      <span class="hours-value">{formatHours(entry.hours)}</span>
-      {#if entry.hourlyRate}
-        <span class="rate">@ {formatCurrency(entry.hourlyRate, currency)}/hr</span>
-      {/if}
-    </div>
-    {#if entry.amount !== undefined}
-      <span class="amount">{formatCurrency(entry.amount, currency)}</span>
-    {/if}
-  </div>
-
-  {#if entry.mileage && entry.mileage > 0}
-    <div class="mileage">
-      {t(M['projects.time_entry_card.mileage'], { mileage: entry.mileage })}
-    </div>
-  {/if}
-{/snippet}
-
-<style>
-  .time-entry-card {
-    display: flex;
-    align-items: stretch;
-    background: var(--smrt-color-surface);
-    border: 1px solid var(--smrt-color-outline-variant);
-    border-radius: var(--smrt-radius-medium, 12px);
-    overflow: hidden;
-    transition: all 0.2s var(--smrt-easing-standard);
-  }
-
-  .time-entry-card:hover {
-    border-color: var(--smrt-color-outline);
-  }
-
-  .time-entry-card.selected {
-    border-color: var(--smrt-color-primary);
-    background: var(--smrt-color-primary-container);
-  }
-
-  .time-entry-card.clickable .card-content {
-    cursor: pointer;
-  }
-
-  .time-entry-card.clickable:hover {
-    box-shadow: var(--smrt-elevation-1);
-  }
-
-  .checkbox-wrapper {
-    display: flex;
-    align-items: center;
-    padding: 1rem;
-    background: var(--smrt-color-surface-container-low);
-    border-right: 1px solid var(--smrt-color-outline-variant);
-  }
-
-  .checkbox-wrapper input[type='checkbox'] {
-    width: 1.25rem;
-    height: 1.25rem;
-    cursor: pointer;
-    accent-color: var(--smrt-color-primary);
-  }
-
-  .card-content {
-    flex: 1;
-    padding: 1rem;
-    min-width: 0;
-    text-decoration: none;
-    color: inherit;
-    background: transparent;
-    border: none;
-    text-align: left;
-    font: inherit;
-    display: block;
-    width: 100%;
-  }
-
-  a.card-content:focus,
-  button.card-content:focus {
-    outline: 2px solid var(--smrt-color-primary);
-    outline-offset: -2px;
-    border-radius: var(--smrt-radius-small, 8px);
-  }
-
-  .entry-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 0.5rem;
-  }
-
-  .date {
-    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    color: var(--smrt-color-on-surface-variant);
-  }
-
-  .status-badge {
-    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);
-    letter-spacing: var(--smrt-typography-label-small-tracking, 0.5px);
-  }
-
-  .entry-body {
-    margin-bottom: 0.75rem;
-  }
-
-  .description {
-    margin: 0;
-    font-size: var(--smrt-typography-body-large-size, 0.9375rem);
-    color: var(--smrt-color-on-surface);
-    line-height: var(--smrt-typography-body-large-line-height, 1.5);
-  }
-
-  .worker {
-    margin: 0.25rem 0 0;
-    font-size: var(--smrt-typography-body-small-size, 0.8125rem);
-    color: var(--smrt-color-on-surface-variant);
-  }
-
-  .entry-footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-  }
-
-  .hours {
-    display: flex;
-    align-items: baseline;
-    gap: 0.5rem;
-  }
-
-  .hours-value {
-    font-size: var(--smrt-typography-body-large-size, 1rem);
-    font-weight: var(--smrt-typography-title-medium-weight, 500);
-    color: var(--smrt-color-primary);
-  }
-
-  .rate {
-    font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-on-surface-variant);
-  }
-
-  .amount {
-    font-size: var(--smrt-typography-body-large-size, 1rem);
-    font-weight: var(--smrt-typography-title-medium-weight, 500);
-    color: var(--smrt-color-on-surface);
-  }
-
-  .mileage {
-    margin-top: 0.5rem;
-    font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-on-surface-variant);
-  }
-
-  .card-actions {
-    display: flex;
-    align-items: center;
-    padding: 0.5rem;
-    border-left: 1px solid var(--smrt-color-outline-variant);
-  }
-</style>

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

@@ -1,25 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,360 +0,0 @@
-<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

@@ -1,24 +0,0 @@
-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