@happyvertical/smrt-projects 0.30.0

package/dist/svelte/components/ApprovalActions.svelte

@@ -0,0 +1,213 @@
+<script lang="ts">
+/**
+ * ApprovalActions - Status-based action buttons for approval workflow
+ * Shows appropriate buttons based on current status
+ */
+
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../i18n.js';
+import type { ApprovalStatus } from './utils.js';
+
+const { t } = useI18n();
+
+/** Props for ApprovalActions component */
+export interface Props {
+  status: ApprovalStatus;
+  onsubmit?: () => void;
+  onapprove?: () => void;
+  onreject?: () => void;
+  onedit?: () => void;
+  ondelete?: () => void;
+  loading?: boolean;
+  disabled?: boolean;
+  layout?: 'horizontal' | 'vertical';
+}
+
+let {
+  status,
+  onsubmit,
+  onapprove,
+  onreject,
+  onedit,
+  ondelete,
+  loading = false,
+  disabled = false,
+  layout = 'horizontal',
+}: Props = $props();
+
+// Determine which actions are available based on status
+const canSubmit = $derived(status === 'draft' && onsubmit);
+const canApprove = $derived(status === 'submitted' && onapprove);
+const canReject = $derived(status === 'submitted' && onreject);
+const canEdit = $derived(
+  (status === 'draft' || status === 'rejected') && onedit,
+);
+const canDelete = $derived(status === 'draft' && ondelete);
+</script>
+
+<div class="approval-actions" class:vertical={layout === 'vertical'}>
+  {#if canSubmit}
+    <button
+      type="button"
+      class="btn btn-filled"
+      onclick={onsubmit}
+      disabled={disabled || loading}
+    >
+      {loading ? 'Submitting...' : 'Submit for Approval'}
+    </button>
+  {/if}
+
+  {#if canApprove}
+    <button
+      type="button"
+      class="btn btn-filled-tonal"
+      onclick={onapprove}
+      disabled={disabled || loading}
+    >
+      {loading ? 'Approving...' : 'Approve'}
+    </button>
+  {/if}
+
+  {#if canReject}
+    <button
+      type="button"
+      class="btn btn-error"
+      onclick={onreject}
+      disabled={disabled || loading}
+    >
+      Reject
+    </button>
+  {/if}
+
+  {#if canEdit}
+    <button
+      type="button"
+      class="btn btn-outlined"
+      onclick={onedit}
+      disabled={disabled || loading}
+    >
+      Edit
+    </button>
+  {/if}
+
+  {#if canDelete}
+    <button
+      type="button"
+      class="btn btn-error-outlined"
+      onclick={ondelete}
+      disabled={disabled || loading}
+    >
+      Delete
+    </button>
+  {/if}
+
+  {#if status === 'approved'}
+    <span class="status-message success">
+      {t(M['projects.approval_actions.approved_message'])}
+    </span>
+  {/if}
+
+  {#if status === 'rejected'}
+    <span class="status-message error">
+      {t(M['projects.approval_actions.rejected_message'])}
+    </span>
+  {/if}
+</div>
+
+<style>
+  .approval-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    align-items: center;
+  }
+
+  .approval-actions.vertical {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.625rem 1.5rem;
+    font-size: var(--smrt-typography-label-large-size, 0.875rem);
+    font-weight: var(--smrt-typography-label-large-weight, 500);
+    letter-spacing: var(--smrt-typography-label-large-tracking, 0.1px);
+    border-radius: var(--smrt-radius-full, 9999px);
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s var(--smrt-easing-standard);
+  }
+
+  .btn:disabled {
+    opacity: 0.38;
+    cursor: not-allowed;
+  }
+
+  .btn-filled {
+    background: var(--smrt-color-primary);
+    color: var(--smrt-color-on-primary);
+  }
+
+  .btn-filled:hover:not(:disabled) {
+    box-shadow: var(--smrt-elevation-1);
+  }
+
+  .btn-filled-tonal {
+    background: var(--smrt-color-secondary-container);
+    color: var(--smrt-color-on-secondary-container);
+  }
+
+  .btn-filled-tonal:hover:not(:disabled) {
+    box-shadow: var(--smrt-elevation-1);
+  }
+
+  .btn-error {
+    background: var(--smrt-color-error);
+    color: var(--smrt-color-on-error);
+  }
+
+  .btn-error:hover:not(:disabled) {
+    box-shadow: var(--smrt-elevation-1);
+  }
+
+  .btn-error-outlined {
+    background: transparent;
+    border: 1px solid var(--smrt-color-error);
+    color: var(--smrt-color-error);
+  }
+
+  .btn-error-outlined:hover:not(:disabled) {
+    background: var(--smrt-color-error-container);
+  }
+
+  .btn-outlined {
+    background: transparent;
+    border: 1px solid var(--smrt-color-outline);
+    color: var(--smrt-color-on-surface);
+  }
+
+  .btn-outlined:hover:not(:disabled) {
+    background: var(--smrt-color-surface-container-highest);
+  }
+
+  .status-message {
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    font-weight: var(--smrt-typography-label-large-weight, 500);
+    padding: 0.5rem 1rem;
+    border-radius: var(--smrt-radius-small, 8px);
+  }
+
+  .status-message.success {
+    background: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
+  }
+
+  .status-message.error {
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-on-error-container);
+  }
+</style>

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

@@ -0,0 +1,17 @@
+import type { ApprovalStatus } from './utils.js';
+/** Props for ApprovalActions component */
+export interface Props {
+    status: ApprovalStatus;
+    onsubmit?: () => void;
+    onapprove?: () => void;
+    onreject?: () => void;
+    onedit?: () => void;
+    ondelete?: () => void;
+    loading?: boolean;
+    disabled?: boolean;
+    layout?: 'horizontal' | 'vertical';
+}
+declare const ApprovalActions: import("svelte").Component<Props, {}, "">;
+type ApprovalActions = ReturnType<typeof ApprovalActions>;
+export default ApprovalActions;
+//# sourceMappingURL=ApprovalActions.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApprovalActions.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ApprovalActions.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,0CAA0C;AAC1C,MAAM,WAAW,KAAK;IACpB,MAAM,EAAE,cAAc,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACpC;AAiFD,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/svelte/components/BulkActions.svelte

@@ -0,0 +1,224 @@
+<script lang="ts">
+/**
+ * BulkActions - Action bar for bulk operations on selected items
+ * Appears when items are selected in a list
+ */
+
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../i18n.js';
+
+const { t } = useI18n();
+
+/** Props for BulkActions component */
+export interface Props {
+  selectedCount: number;
+  onapprove?: () => void;
+  onreject?: () => void;
+  ondelete?: () => void;
+  onexport?: () => void;
+  onclear?: () => void;
+  loading?: boolean;
+}
+
+let {
+  selectedCount,
+  onapprove,
+  onreject,
+  ondelete,
+  onexport,
+  onclear,
+  loading = false,
+}: Props = $props();
+
+const visible = $derived(selectedCount > 0);
+</script>
+
+{#if visible}
+  <div class="bulk-actions">
+    <div class="selection-info">
+      <span class="count">{selectedCount}</span>
+      <span class="label">{selectedCount === 1 ? 'item' : 'items'} selected</span>
+      {#if onclear}
+        <button type="button" class="clear-btn" onclick={onclear} disabled={loading}>
+          Clear
+        </button>
+      {/if}
+    </div>
+
+    <div class="actions">
+      {#if onapprove}
+        <button
+          type="button"
+          class="btn btn-filled"
+          onclick={onapprove}
+          disabled={loading}
+        >
+          {t(M['projects.bulk_actions.approve_all'])}
+        </button>
+      {/if}
+
+      {#if onreject}
+        <button
+          type="button"
+          class="btn btn-error"
+          onclick={onreject}
+          disabled={loading}
+        >
+          {t(M['projects.bulk_actions.reject_all'])}
+        </button>
+      {/if}
+
+      {#if onexport}
+        <button
+          type="button"
+          class="btn btn-outlined"
+          onclick={onexport}
+          disabled={loading}
+        >
+          Export
+        </button>
+      {/if}
+
+      {#if ondelete}
+        <button
+          type="button"
+          class="btn btn-error-outlined"
+          onclick={ondelete}
+          disabled={loading}
+        >
+          Delete
+        </button>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .bulk-actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    background: var(--smrt-color-secondary-container);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-medium, 12px);
+    margin-bottom: 1rem;
+  }
+
+  .selection-info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .count {
+    font-size: var(--smrt-typography-title-medium-size, 1rem);
+    font-weight: var(--smrt-typography-title-medium-weight, 500);
+    color: var(--smrt-color-on-secondary-container);
+  }
+
+  .label {
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    color: var(--smrt-color-on-secondary-container);
+  }
+
+  .clear-btn {
+    background: none;
+    border: none;
+    padding: 0.25rem 0.5rem;
+    font-size: var(--smrt-typography-label-medium-size, 0.75rem);
+    color: var(--smrt-color-primary);
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  .clear-btn:hover:not(:disabled) {
+    color: var(--smrt-color-primary);
+    opacity: 0.8;
+  }
+
+  .clear-btn:disabled {
+    opacity: 0.38;
+    cursor: not-allowed;
+  }
+
+  .actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    font-size: var(--smrt-typography-label-large-size, 0.875rem);
+    font-weight: var(--smrt-typography-label-large-weight, 500);
+    letter-spacing: var(--smrt-typography-label-large-tracking, 0.1px);
+    border-radius: var(--smrt-radius-full, 9999px);
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s var(--smrt-easing-standard);
+  }
+
+  .btn:disabled {
+    opacity: 0.38;
+    cursor: not-allowed;
+  }
+
+  .btn-filled {
+    background: var(--smrt-color-primary);
+    color: var(--smrt-color-on-primary);
+  }
+
+  .btn-filled:hover:not(:disabled) {
+    box-shadow: var(--smrt-elevation-1);
+  }
+
+  .btn-error {
+    background: var(--smrt-color-error);
+    color: var(--smrt-color-on-error);
+  }
+
+  .btn-error:hover:not(:disabled) {
+    box-shadow: var(--smrt-elevation-1);
+  }
+
+  .btn-error-outlined {
+    background: transparent;
+    border: 1px solid var(--smrt-color-error);
+    color: var(--smrt-color-error);
+  }
+
+  .btn-error-outlined:hover:not(:disabled) {
+    background: var(--smrt-color-error-container);
+  }
+
+  .btn-outlined {
+    background: transparent;
+    border: 1px solid var(--smrt-color-outline);
+    color: var(--smrt-color-on-surface);
+  }
+
+  .btn-outlined:hover:not(:disabled) {
+    background: var(--smrt-color-surface-container-highest);
+  }
+
+  @media (max-width: 640px) {
+    .bulk-actions {
+      flex-direction: column;
+      gap: 0.75rem;
+    }
+
+    .actions {
+      width: 100%;
+      flex-wrap: wrap;
+    }
+
+    .actions .btn {
+      flex: 1;
+      min-width: 100px;
+    }
+  }
+</style>

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

@@ -0,0 +1,14 @@
+/** Props for BulkActions component */
+export interface Props {
+    selectedCount: number;
+    onapprove?: () => void;
+    onreject?: () => void;
+    ondelete?: () => void;
+    onexport?: () => void;
+    onclear?: () => void;
+    loading?: boolean;
+}
+declare const BulkActions: import("svelte").Component<Props, {}, "">;
+type BulkActions = ReturnType<typeof BulkActions>;
+export default BulkActions;
+//# sourceMappingURL=BulkActions.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BulkActions.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/BulkActions.svelte.ts"],"names":[],"mappings":"AAWA,sCAAsC;AACtC,MAAM,WAAW,KAAK;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAmED,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/DurationDisplay.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+/**
+ * DurationDisplay - Formats hours for display
+ * Supports decimal (8.5) or HH:MM (8:30) formats
+ */
+
+import { formatHoursHHMM } from './utils.js';
+
+/** Props for DurationDisplay component */
+export interface Props {
+  hours: number;
+  format?: 'decimal' | 'hhmm';
+  size?: 'sm' | 'md' | 'lg';
+  showLabel?: boolean;
+}
+
+let {
+  hours,
+  format = 'decimal',
+  size = 'md',
+  showLabel = false,
+}: Props = $props();
+
+// $derived creates a reactive value, not a function - no wrapper or parentheses needed
+const formattedValue = $derived(
+  format === 'hhmm' ? formatHoursHHMM(hours) : hours.toFixed(1),
+);
+</script>
+
+<span class="duration" class:sm={size === 'sm'} class:lg={size === 'lg'}>
+  <span class="value">{formattedValue}</span>
+  {#if showLabel || format === 'decimal'}
+    <span class="unit">{format === 'hhmm' ? '' : 'h'}</span>
+  {/if}
+</span>
+
+<style>
+  .duration {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.125rem;
+    font-variant-numeric: tabular-nums;
+    font-size: var(--smrt-typography-body-large-size, 1rem);
+  }
+
+  .value {
+    font-weight: var(--smrt-typography-title-medium-weight, 500);
+    color: var(--smrt-color-on-surface);
+  }
+
+  .unit {
+    font-weight: var(--smrt-typography-body-medium-weight, 400);
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  /* Size variants */
+  .duration.sm {
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+  }
+
+  .duration.sm .value {
+    font-weight: var(--smrt-typography-body-medium-weight, 400);
+  }
+
+  .duration.lg {
+    font-size: var(--smrt-typography-headline-small-size, 1.5rem);
+  }
+</style>

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

@@ -0,0 +1,11 @@
+/** Props for DurationDisplay component */
+export interface Props {
+    hours: number;
+    format?: 'decimal' | 'hhmm';
+    size?: 'sm' | 'md' | 'lg';
+    showLabel?: boolean;
+}
+declare const DurationDisplay: import("svelte").Component<Props, {}, "">;
+type DurationDisplay = ReturnType<typeof DurationDisplay>;
+export default DurationDisplay;
+//# sourceMappingURL=DurationDisplay.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DurationDisplay.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/DurationDisplay.svelte.ts"],"names":[],"mappings":"AAUA,0CAA0C;AAC1C,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC5B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA+BD,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}