# CriteriaField Component

A simple layout component for creating consistent criteria and filter form fields with proper labeling and sizing. Perfect for search forms, filter panels, and criteria-based interfaces.

## Features

- **Consistent Layout**: Standardized label and field arrangement
- **Flexible Sizing**: Multiple predefined size options
- **Custom Styling**: Flexible label and container styling
- **Clean Structure**: Simple and lightweight component design

## Basic Usage

```svelte
<script>
import CriteriaField from '@ticatec/uniface-element/CriteriaField';
import TextEditor from '@ticatec/uniface-element/TextEditor';

let searchName = '';
</script>

<CriteriaField label="Name" size="x25">
  <TextEditor 
    variant="outlined" 
    bind:value={searchName} 
    placeholder="Enter name to search"
  />
</CriteriaField>
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `label` | `string` | `"Label"` | Label text for the field |
| `style` | `string` | `''` | Custom CSS styles for the container |
| `label$style` | `string` | `''` | Custom CSS styles for the label |
| `size` | `'' \| 'x15' \| 'x20' \| 'x25' \| 'x30' \| 'x35' \| 'x40'` | `''` | Predefined size for the field |
| `labelSuffix` | `string` | `':'` | Suffix text after the label |
| `class` | `string` | `''` | Additional CSS classes |

## Size Options

The `size` prop provides consistent widths for different layout needs:

- `x15`: Extra small width
- `x20`: Small width 
- `x25`: Medium-small width
- `x30`: Medium width
- `x35`: Medium-large width
- `x40`: Large width

## Basic Examples

### Simple Text Search Field

```svelte
<script>
import CriteriaField from '@ticatec/uniface-element/CriteriaField';
import TextEditor from '@ticatec/uniface-element/TextEditor';

let searchText = '';
</script>

<CriteriaField label="Search" size="x30">
  <TextEditor 
    variant="outlined" 
    bind:value={searchText}
    placeholder="* is a wildcard character"
  />
</CriteriaField>
```

### Date Range Filter

```svelte
<script>
import CriteriaField from '@ticatec/uniface-element/CriteriaField';
import DateRange from '@ticatec/uniface-element/DateRange';

let dateFrom = '';
let dateTo = '';
</script>

<CriteriaField label="Date Range" size="x35">
  <DateRange 
    variant="outlined"
    bind:fromValue={dateFrom}
    bind:toValue={dateTo}
  />
</CriteriaField>
```

### Number Range Filter

```svelte
<script>
import CriteriaField from '@ticatec/uniface-element/CriteriaField';
import NumberRange from '@ticatec/uniface-element/NumberRange';

let priceFrom = null;
let priceTo = null;
</script>

<CriteriaField label="Price Range" size="x30">
  <NumberRange 
    variant="outlined"
    bind:fromValue={priceFrom}
    bind:toValue={priceTo}
    placeholder="0.00"
  />
</CriteriaField>
```

### Custom Styled Label

```svelte
<script>
import CriteriaField from '@ticatec/uniface-element/CriteriaField';
import SearchBox from '@ticatec/uniface-element/SearchBox';

let query = '';
</script>

<CriteriaField 
  label="Advanced Search" 
  size="x40"
  label$style="color: #2563eb; font-weight: 600; font-size: 14px;"
  labelSuffix=""
>
  <SearchBox 
    bind:value={query}
    placeholder="Enter search terms..."
  />
</CriteriaField>
```

## Advanced Examples

### Search Form with Multiple Criteria

```svelte
<script>
import CriteriaField from '@ticatec/uniface-element/CriteriaField';
import TextEditor from '@ticatec/uniface-element/TextEditor';
import DateRange from '@ticatec/uniface-element/DateRange';
import OptionsSelect from '@ticatec/uniface-element/OptionsSelect';
import CheckBox from '@ticatec/uniface-element/CheckBox';

let criteria = {
  name: '',
  email: '',
  dateFrom: '',
  dateTo: '',
  status: '',
  includeInactive: false
};

const statusOptions = [
  { code: 'active', text: 'Active' },
  { code: 'inactive', text: 'Inactive' },
  { code: 'pending', text: 'Pending' }
];

const handleSearch = () => {
  console.log('Searching with criteria:', criteria);
};

const clearCriteria = () => {
  criteria = {
    name: '',
    email: '',
    dateFrom: '',
    dateTo: '',
    status: '',
    includeInactive: false
  };
};
</script>

<div class="search-form">
  <h3>Customer Search</h3>
  
  <div class="criteria-row">
    <CriteriaField label="Name" size="x25">
      <TextEditor 
        variant="outlined" 
        bind:value={criteria.name}
        placeholder="Customer name (* for wildcard)"
      />
    </CriteriaField>

    <CriteriaField label="Email" size="x30">
      <TextEditor 
        variant="outlined" 
        bind:value={criteria.email}
        placeholder="email@domain.com"
      />
    </CriteriaField>

    <CriteriaField label="Status" size="x20">
      <OptionsSelect 
        variant="outlined"
        bind:value={criteria.status}
        options={statusOptions}
        placeholder="All statuses"
      />
    </CriteriaField>
  </div>

  <div class="criteria-row">
    <CriteriaField label="Registration Date" size="x35">
      <DateRange 
        variant="outlined"
        bind:fromValue={criteria.dateFrom}
        bind:toValue={criteria.dateTo}
      />
    </CriteriaField>

    <CriteriaField label="Options" size="x25" labelSuffix="">
      <CheckBox 
        label="Include inactive customers"
        bind:value={criteria.includeInactive}
      />
    </CriteriaField>
  </div>

  <div class="form-actions">
    <button class="btn-primary" on:click={handleSearch}>Search</button>
    <button class="btn-secondary" on:click={clearCriteria}>Clear</button>
  </div>
</div>

<style>
  .search-form {
    padding: 24px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
  }
  
  .criteria-row {
    display: flex;
    gap: 16px;
    margin: 16px 0;
    flex-wrap: wrap;
  }
  
  .form-actions {
    margin-top: 24px;
    display: flex;
    gap: 12px;
  }
  
  .btn-primary, .btn-secondary {
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid;
    cursor: pointer;
    font-weight: 500;
  }
  
  .btn-primary {
    background: #2563eb;
    color: white;
    border-color: #2563eb;
  }
  
  .btn-secondary {
    background: white;
    color: #374151;
    border-color: #d1d5db;
  }
</style>
```

### Filter Panel Layout

```svelte
<script>
import CriteriaField from '@ticatec/uniface-element/CriteriaField';
import TextEditor from '@ticatec/uniface-element/TextEditor';
import NumberRange from '@ticatec/uniface-element/NumberRange';
import OptionsSelect from '@ticatec/uniface-element/OptionsSelect';
import OptionsMultiSelect from '@ticatec/uniface-element/OptionsMultiSelect';

let filters = {
  productName: '',
  priceFrom: null,
  priceTo: null,
  category: '',
  tags: '',
  availability: ''
};

const categories = [
  { code: 'electronics', text: 'Electronics' },
  { code: 'clothing', text: 'Clothing' },
  { code: 'books', text: 'Books' },
  { code: 'home', text: 'Home & Garden' }
];

const availabilityOptions = [
  { code: 'in-stock', text: 'In Stock' },
  { code: 'out-of-stock', text: 'Out of Stock' },
  { code: 'pre-order', text: 'Pre-order' }
];

const applyFilters = () => {
  console.log('Applying filters:', filters);
};
</script>

<div class="filter-panel">
  <h3>Product Filters</h3>

  <div class="filter-group">
    <h4>Basic</h4>
    <CriteriaField label="Product Name" size="x35">
      <TextEditor 
        variant="outlined"
        bind:value={filters.productName}
        placeholder="Search by product name"
      />
    </CriteriaField>

    <CriteriaField label="Category" size="x25">
      <OptionsSelect 
        variant="outlined"
        bind:value={filters.category}
        options={categories}
        placeholder="Select category"
      />
    </CriteriaField>
  </div>

  <div class="filter-group">
    <h4>Pricing</h4>
    <CriteriaField label="Price Range" size="x30">
      <NumberRange 
        variant="outlined"
        bind:fromValue={filters.priceFrom}
        bind:toValue={filters.priceTo}
        placeholder="0.00"
      />
    </CriteriaField>
  </div>

  <div class="filter-group">
    <h4>Advanced</h4>
    <CriteriaField label="Tags" size="x35">
      <OptionsMultiSelect 
        variant="outlined"
        bind:value={filters.tags}
        options={[
          { code: 'new', text: 'New' },
          { code: 'sale', text: 'On Sale' },
          { code: 'featured', text: 'Featured' },
          { code: 'bestseller', text: 'Bestseller' }
        ]}
        placeholder="Select tags"
      />
    </CriteriaField>

    <CriteriaField label="Availability" size="x25">
      <OptionsSelect 
        variant="outlined"
        bind:value={filters.availability}
        options={availabilityOptions}
        placeholder="Any availability"
      />
    </CriteriaField>
  </div>

  <div class="filter-actions">
    <button class="apply-btn" on:click={applyFilters}>Apply Filters</button>
  </div>
</div>

<style>
  .filter-panel {
    width: 300px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 16px;
  }
  
  .filter-panel h3 {
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
  }
  
  .filter-group {
    margin: 16px 0;
  }
  
  .filter-group h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #6b7280;
    text-transform: uppercase;
    font-weight: 600;
  }
  
  .filter-actions {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
  }
  
  .apply-btn {
    width: 100%;
    padding: 8px 16px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
  }
  
  .apply-btn:hover {
    background: #1d4ed8;
  }
</style>
```

### Different Sizes Comparison

```svelte
<script>
import CriteriaField from '@ticatec/uniface-element/CriteriaField';
import TextEditor from '@ticatec/uniface-element/TextEditor';

let values = {};
</script>

<div class="size-comparison">
  <h3>Size Comparison</h3>
  
  <CriteriaField label="Extra Small (x15)" size="x15">
    <TextEditor variant="outlined" bind:value={values.x15} />
  </CriteriaField>

  <CriteriaField label="Small (x20)" size="x20">
    <TextEditor variant="outlined" bind:value={values.x20} />
  </CriteriaField>

  <CriteriaField label="Medium-Small (x25)" size="x25">
    <TextEditor variant="outlined" bind:value={values.x25} />
  </CriteriaField>

  <CriteriaField label="Medium (x30)" size="x30">
    <TextEditor variant="outlined" bind:value={values.x30} />
  </CriteriaField>

  <CriteriaField label="Medium-Large (x35)" size="x35">
    <TextEditor variant="outlined" bind:value={values.x35} />
  </CriteriaField>

  <CriteriaField label="Large (x40)" size="x40">
    <TextEditor variant="outlined" bind:value={values.x40} />
  </CriteriaField>
</div>

<style>
  .size-comparison {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    max-width: 600px;
  }
</style>
```

## Best Practices

```svelte
<!-- Good: Clear, descriptive labels -->
<CriteriaField label="Customer Email Address">
  <TextEditor variant="outlined" type="email" />
</CriteriaField>

<!-- Good: Consistent sizing in related fields -->
<div class="criteria-group">
  <CriteriaField label="First Name" size="x25">
    <TextEditor variant="outlined" />
  </CriteriaField>
  <CriteriaField label="Last Name" size="x25">
    <TextEditor variant="outlined" />
  </CriteriaField>
</div>

<!-- Good: Appropriate field types for content -->
<CriteriaField label="Birth Date" size="x20">
  <DatePicker variant="outlined" />
</CriteriaField>

<!-- Good: Custom label styling for emphasis -->
<CriteriaField 
  label="Important Field" 
  label$style="color: red; font-weight: bold;"
>
  <TextEditor variant="outlined" />
</CriteriaField>
```

## CSS Classes

The component applies the following CSS classes:

- `.uniface-filter-field` - Base class
- `.x15`, `.x20`, `.x25`, `.x30`, `.x35`, `.x40` - Size classes

## Browser Support

Works in all modern browsers that support:
- ES6+ JavaScript
- Modern DOM APIs
- CSS custom properties
- Flexbox layout

## Performance Considerations

- Lightweight component structure
- Minimal DOM elements
- Efficient slot-based content projection
- No complex state management