@ticatec/topside-elements 1.0.0

package/dist/form/number_range/NumberRange.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import CommonRangeEditor from "../common_range_editor";
+    import NumberInput from "../common_editor/NumberInput.svelte";
+    import type {EditorVariant} from "../types";
+
+    interface Props {
+        variant?: EditorVariant;
+        compact?: boolean;
+        disabled?: boolean;
+        readonly?: boolean;
+        error?: string;
+        tooltip?: string;
+        theme?: string;
+        class?: string;
+        style?: string;
+        min?: number;
+        max?: number;
+        fromValue?: number;
+        toValue?: number;
+        allowNegative?: boolean;
+    }
+
+    let {
+        variant,
+        compact = false,
+        disabled = false,
+        readonly = false,
+        error,
+        tooltip,
+        theme,
+        class: className = '',
+        style = '',
+        min,
+        max,
+        fromValue = $bindable<number | undefined>(),
+        toValue = $bindable<number | undefined>(),
+        allowNegative = false,
+    }: Props = $props();
+
+    let editor: NumberInput | undefined = $state(undefined);
+
+    const fromClearable = $derived(!disabled && !readonly && fromValue != null);
+    const toClearable = $derived(!disabled && !readonly && toValue != null);
+
+    const cleanFrom = () => { fromValue = undefined; editor?.focus(); };
+    const cleanTo = () => { toValue = undefined; };
+</script>
+
+<CommonRangeEditor {compact} {disabled} {readonly} {error} {tooltip} {theme} class={className} {style} {variant} {fromClearable} {toClearable} {cleanFrom} {cleanTo}>
+    {#snippet from()}
+        <NumberInput
+                bind:this={editor}
+                style="width: 100%; text-align: center"
+                {allowNegative}
+                placeholder=""
+                {min}
+                max={toValue ?? undefined}
+                bind:value={fromValue}/>
+    {/snippet}
+    {#snippet to()}
+        <NumberInput
+                style="width: 100%; text-align: center"
+                {allowNegative}
+                placeholder=""
+                min={fromValue ?? undefined}
+                {max}
+                bind:value={toValue}/>
+    {/snippet}
+</CommonRangeEditor>

package/dist/form/number_range/NumberRange.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { EditorVariant } from "../types";
+interface Props {
+    variant?: EditorVariant;
+    compact?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    error?: string;
+    tooltip?: string;
+    theme?: string;
+    class?: string;
+    style?: string;
+    min?: number;
+    max?: number;
+    fromValue?: number;
+    toValue?: number;
+    allowNegative?: boolean;
+}
+declare const NumberRange: import("svelte").Component<Props, {}, "fromValue" | "toValue">;
+type NumberRange = ReturnType<typeof NumberRange>;
+export default NumberRange;

package/dist/form/number_range/README.md

@@ -0,0 +1,498 @@
+# NumberRange
+
+A dual number input component for specifying numeric ranges, with automatic validation to ensure the "from" value doesn't exceed the "to" value.
+
+## Features
+
+- **Range Input**: Two connected number inputs for "from" and "to" values.
+- **Automatic Validation**: Ensures logical range order (from ≤ to).
+- **Negative Numbers**: Optional support for negative values.
+- **Boundary Constraints**: Set min/max limits for the entire range.
+- **Multiple Variants**: Support for outlined, filled, plain, and default styles.
+- **Compact Mode**: Space-efficient layout for dense forms.
+- **Clear Functionality**: Built-in clear button to reset either value.
+- **Real-time Validation**: Immediate feedback during input.
+- **Focus Management**: Automatic focus handling between inputs.
+
+## Installation
+
+```bash
+npm install @ticatec/topside-elements
+```
+
+## Import
+
+```typescript
+import NumberRange from "@ticatec/topside-elements/NumberRange";
+```
+
+## Basic Usage
+
+```svelte
+<script>
+  import NumberRange from "@ticatec/topside-elements/NumberRange";
+
+  let fromValue = 10;
+  let toValue = 50;
+</script>
+
+<NumberRange bind:fromValue={fromValue} bind:toValue={toValue} />
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `fromValue` | `number \| undefined` | `undefined` | The "from" (minimum) value of the range (bindable). |
+| `toValue` | `number \| undefined` | `undefined` | The "to" (maximum) value of the range (bindable). |
+| `min` | `number \| undefined` | `undefined` | Minimum allowed value for both inputs. |
+| `max` | `number \| undefined` | `undefined` | Maximum allowed value for both inputs. |
+| `allowNegative` | `boolean` | `false` | Allow negative numbers in both inputs. |
+| `variant` | `"" \| "plain" \| "outlined" \| "filled"` | `""` | Visual style variant. |
+| `compact` | `boolean` | `false` | Enables compact display mode. |
+| `disabled` | `boolean` | `false` | Disables both inputs. |
+| `readonly` | `boolean` | `false` | Makes both inputs read-only. |
+| `error` | `string` | `undefined` | Error message text. |
+| `tooltip` | `string` | `undefined` | Hover tooltip text. |
+| `theme` | `string` | `undefined` | Theme name for appearance switching. |
+| `style` | `string` | `""` | Inline CSS styles. |
+| `class` | `string` | `""` | CSS class on the wrapper. |
+
+## Events
+
+| Event | Description |
+|-------|-------------|
+| `onchange` | Fired with the committed numeric value (not currently exposed as a prop; changes are handled via `bind:`). |
+
+## Methods
+
+The NumberRange component manages focus internally between the two inputs.
+
+## Examples
+
+### Basic Range Selection
+
+```svelte
+<script>
+  import NumberRange from "@ticatec/topside-elements/NumberRange";
+
+  let ageFrom = 18;
+  let ageTo = 65;
+</script>
+
+<NumberRange
+  bind:fromValue={ageFrom}
+  bind:toValue={ageTo}
+  variant="outlined"
+  min={0}
+  max={120}
+/>
+```
+
+### Price Range Filter
+
+```svelte
+<script>
+  import NumberRange from "@ticatec/topside-elements/NumberRange";
+
+  let priceMin = 100;
+  let priceMax = 1000;
+
+  $: console.log(`Price range: $${priceMin} - $${priceMax}`);
+</script>
+
+<div class="price-filter">
+  <label>Price Range ($)</label>
+  <NumberRange
+    bind:fromValue={priceMin}
+    bind:toValue={priceMax}
+    variant="filled"
+    min={0}
+    max={10000}
+  />
+  <div class="range-display">
+    ${priceMin || 0} - ${priceMax || 0}
+  </div>
+</div>
+
+<style>
+  .price-filter {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .range-display {
+    font-size: 0.875rem;
+    color: #6b7280;
+    text-align: right;
+  }
+</style>
+```
+
+### Temperature Range (with negative values)
+
+```svelte
+<script>
+  import NumberRange from "@ticatec/topside-elements/NumberRange";
+
+  let tempMin = -10;
+  let tempMax = 25;
+</script>
+
+<div class="temperature-range">
+  <label>Temperature Range (°C)</label>
+  <NumberRange
+    bind:fromValue={tempMin}
+    bind:toValue={tempMax}
+    variant="outlined"
+    allowNegative={true}
+    min={-50}
+    max={50}
+  />
+</div>
+
+<style>
+  .temperature-range {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  label {
+    font-weight: 500;
+  }
+</style>
+```
+
+### Search Criteria Form
+
+```svelte
+<script>
+  import NumberRange from "@ticatec/topside-elements/NumberRange";
+
+  let criteria = {
+    salaryFrom: null,
+    salaryTo: null,
+    experienceFrom: 0,
+    experienceTo: 10,
+    ageFrom: 22,
+    ageTo: 60
+  };
+
+  function handleSearch() {
+    console.log("Search criteria:", criteria);
+  }
+</script>
+
+<div class="search-form">
+  <div class="form-group">
+    <label>Salary Range</label>
+    <NumberRange
+      bind:fromValue={criteria.salaryFrom}
+      bind:toValue={criteria.salaryTo}
+      variant="outlined"
+      min={0}
+      max={500000}
+    />
+  </div>
+
+  <div class="form-group">
+    <label>Years of Experience</label>
+    <NumberRange
+      bind:fromValue={criteria.experienceFrom}
+      bind:toValue={criteria.experienceTo}
+      variant="outlined"
+      min={0}
+      max={50}
+    />
+  </div>
+
+  <div class="form-group">
+    <label>Age Range</label>
+    <NumberRange
+      bind:fromValue={criteria.ageFrom}
+      bind:toValue={criteria.ageTo}
+      variant="outlined"
+      min={16}
+      max={80}
+    />
+  </div>
+
+  <button onclick={handleSearch}>Search</button>
+</div>
+
+<style>
+  .form-group {
+    margin-bottom: 16px;
+  }
+  label {
+    display: block;
+    margin-bottom: 4px;
+    font-weight: 500;
+  }
+  button {
+    padding: 8px 16px;
+    cursor: pointer;
+  }
+</style>
+```
+
+### Compact Layout for Tables
+
+```svelte
+<script>
+  import NumberRange from "@ticatec/topside-elements/NumberRange";
+
+  let filters = [
+    { label: "Score", from: 80, to: 100 },
+    { label: "Quantity", from: 1, to: 999 },
+    { label: "Rating", from: 3, to: 5 }
+  ];
+</script>
+
+<table class="filter-table">
+  <thead>
+    <tr>
+      <th>Filter</th>
+      <th>Range</th>
+    </tr>
+  </thead>
+  <tbody>
+    {#each filters as filter}
+      <tr>
+        <td>{filter.label}</td>
+        <td>
+          <NumberRange
+            bind:fromValue={filter.from}
+            bind:toValue={filter.to}
+            compact
+            variant="outlined"
+            min={0}
+          />
+        </td>
+      </tr>
+    {/each}
+  </tbody>
+</table>
+
+<style>
+  .filter-table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+  th, td {
+    text-align: left;
+    padding: 8px;
+  }
+</style>
+```
+
+### Dynamic Range with Validation
+
+```svelte
+<script>
+  import NumberRange from "@ticatec/topside-elements/NumberRange";
+
+  let budgetMin = 1000;
+  let budgetMax = 5000;
+  let isValidRange = true;
+
+  $: isValidRange = budgetMin <= budgetMax;
+  $: rangeSize = budgetMax - budgetMin;
+
+  function resetRange() {
+    budgetMin = 1000;
+    budgetMax = 5000;
+  }
+</script>
+
+<div class="budget-selector">
+  <label>Budget Range</label>
+  <NumberRange
+    bind:fromValue={budgetMin}
+    bind:toValue={budgetMax}
+    variant="outlined"
+    min={0}
+    max={100000}
+  />
+
+  <div class="range-info" class:error={!isValidRange}>
+    {#if isValidRange}
+      <span>Range size: ${rangeSize}</span>
+    {:else}
+      <span>Invalid range: minimum cannot exceed maximum</span>
+    {/if}
+  </div>
+
+  <button onclick={resetRange}>Reset</button>
+</div>
+
+<style>
+  .budget-selector {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  label {
+    font-weight: 500;
+  }
+  .range-info.error {
+    color: #d32f2f;
+  }
+</style>
+```
+
+### Statistical Analysis Range
+
+```svelte
+<script>
+  import NumberRange from "@ticatec/topside-elements/NumberRange";
+
+  let dataRange = { min: -100, max: 100 };
+  let outlierThreshold = { from: -50, to: 50 };
+
+  $: normalDataPercentage = calculateNormalData(dataRange, outlierThreshold);
+
+  function calculateNormalData(range, threshold) {
+    const totalRange = range.max - range.min;
+    const normalRange = threshold.to - threshold.from;
+    return ((normalRange / totalRange) * 100).toFixed(1);
+  }
+</script>
+
+<div class="analysis-panel">
+  <h3>Data Analysis</h3>
+
+  <div class="range-control">
+    <label>Data Range</label>
+    <NumberRange
+      bind:fromValue={dataRange.min}
+      bind:toValue={dataRange.max}
+      variant="filled"
+      allowNegative={true}
+      min={-1000}
+      max={1000}
+    />
+  </div>
+
+  <div class="range-control">
+    <label>Normal Range (exclude outliers)</label>
+    <NumberRange
+      bind:fromValue={outlierThreshold.from}
+      bind:toValue={outlierThreshold.to}
+      variant="outlined"
+      allowNegative={true}
+      min={dataRange.min}
+      max={dataRange.max}
+    />
+  </div>
+
+  <div class="statistics">
+    <p>Normal data coverage: {normalDataPercentage}%</p>
+  </div>
+</div>
+
+<style>
+  .analysis-panel {
+    max-width: 500px;
+  }
+  .range-control {
+    margin-bottom: 16px;
+  }
+  label {
+    display: block;
+    margin-bottom: 4px;
+    font-weight: 500;
+  }
+</style>
+```
+
+### Inventory Management
+
+```svelte
+<script>
+  import NumberRange from "@ticatec/topside-elements/NumberRange";
+
+  let stockLevels = {
+    lowStock: 0,
+    highStock: 100,
+    reorderFrom: 10,
+    reorderTo: 90
+  };
+
+  $: isValidReorderRange = (
+    stockLevels.reorderFrom >= stockLevels.lowStock &&
+    stockLevels.reorderTo <= stockLevels.highStock &&
+    stockLevels.reorderFrom <= stockLevels.reorderTo
+  );
+</script>
+
+<div class="inventory-config">
+  <h3>Inventory Configuration</h3>
+
+  <div class="config-row">
+    <label>Stock Level Range</label>
+    <NumberRange
+      bind:fromValue={stockLevels.lowStock}
+      bind:toValue={stockLevels.highStock}
+      variant="outlined"
+      min={0}
+      max={10000}
+    />
+  </div>
+
+  <div class="config-row">
+    <label>Reorder Range</label>
+    <NumberRange
+      bind:fromValue={stockLevels.reorderFrom}
+      bind:toValue={stockLevels.reorderTo}
+      variant="filled"
+      min={stockLevels.lowStock}
+      max={stockLevels.highStock}
+    />
+  </div>
+
+  <div class="validation" class:valid={isValidReorderRange}>
+    {isValidReorderRange ? "✓ Valid configuration" : "✗ Invalid reorder range"}
+  </div>
+</div>
+
+<style>
+  .config-row {
+    margin-bottom: 16px;
+  }
+  label {
+    display: block;
+    margin-bottom: 4px;
+    font-weight: 500;
+  }
+  .validation {
+    font-weight: 500;
+  }
+  .validation.valid { color: #2e7d32; }
+  .validation:not(.valid) { color: #d32f2f; }
+</style>
+```
+
+## Validation Logic
+
+The NumberRange component automatically enforces logical constraints:
+
+1. **Range Order**: The "from" value cannot exceed the "to" value.
+2. **Boundary Respect**: Both values respect the global min/max constraints.
+3. **Cross-validation**: When one value changes, the other adjusts if necessary.
+4. **Real-time Feedback**: Validation occurs during typing.
+
+## Best Practices
+
+1. **Set Appropriate Boundaries**: Use min/max to prevent unrealistic values.
+2. **Provide Clear Labels**: Indicate what the range represents.
+3. **Handle Empty States**: Consider what happens when values are null.
+4. **Use Compact Mode Wisely**: In dense layouts or tables.
+5. **Validate Range Logic**: Ensure business rules are met.
+6. **Consider User Workflow**: Which input should users typically fill first.
+7. **Provide Feedback**: Show range calculations or validation messages.
+
+## Related Components
+
+- [NumberEditor](../number_editor/README.md) — For single number input.
+- [DateRange](../date_range/README.md) — For date range selection.