@apexara/ng-components 1.0.6-test.5 → 1.0.6-test.7

package/README.md

@@ -979,6 +979,64 @@ Simple styled radio-button that can accept a formGroup and a control.
 ><apex-select>
 >```
 
+### In-dropdown search
+>Set `searchInDropdown: true` to move the search input inside the dropdown
+>(instead of the trigger). Intended for multi-select. The trigger then shows
+>chips (or a counter when `counterAsValue: true`) and the arrow only, and the
+>search input auto-focuses when the dropdown opens.
+>```typescript
+>public selectOptions: ApexSelectOptions = {
+>  label: 'Property Type',
+>  data: [
+>    { label: 'SFR', value: 'sfr' },
+>    { label: 'Duplex', value: 'duplex' },
+>    { label: 'Condo', value: 'condo' },
+>  ],
+>  multiple: true,
+>  searchInDropdown: true,
+>  counterAsValue: true,
+>  placeholder: 'Select property types',
+>  formGroup: this.selectForm,
+>  formControlName: 'selectControl',
+>};
+>```
+
+### Grouped options with categories
+>Pass a `groups` array to render category headers above each section. `groups`
+>supersedes `data` when both are present. Grouped mode requires
+>`searchInDropdown: true` and uses native scroll (not virtual scroll), so it is
+>intended for bounded lists that fit comfortably within
+>`--apex-select-dropdown-body-max-height`. Search filters inside each category
+>and empty categories disappear.
+>```typescript
+>public selectOptions: ApexSelectOptions = {
+>  label: 'Property Type',
+>  data: [], // ignored when groups is present
+>  groups: [
+>    {
+>      label: 'Residential',
+>      data: [
+>        { label: 'SFR', value: 'sfr' },
+>        { label: 'SFR w/ ADU', value: 'sfr-adu' },
+>        { label: 'Duplex', value: 'duplex' },
+>      ],
+>    },
+>    {
+>      label: 'Commercial',
+>      data: [
+>        { label: 'Medical', value: 'medical' },
+>        { label: 'Mixed Use', value: 'mixed-use' },
+>      ],
+>    },
+>  ],
+>  multiple: true,
+>  searchInDropdown: true,
+>  counterAsValue: true,
+>  formGroup: this.selectForm,
+>  formControlName: 'selectControl',
+>};
+>```
+
 ### CSS Variables
 >Here are all the available CSS variables (and their default values) you can set when using the apex-select:
 >```css
@@ -1041,6 +1099,16 @@ Simple styled radio-button that can accept a formGroup and a control.
 >    --apex-select-dropdown-border-color: #E9E9E9;
 >    --apex-select-dropdown-background-color: #FFFFFF;
 >
+>    /* In-dropdown search row (searchInDropdown: true) */
+>    --apex-select-dropdown-search-border-color: #E9E9E9;
+>    --apex-select-dropdown-search-icon-color: #5D6068;
+>
+>    /* Dropdown body scroll area (grouped mode) */
+>    --apex-select-dropdown-body-max-height: 320px;
+>
+>    /* Group header (grouped mode) */
+>    --apex-select-group-header-color: #9A9A9A;
+>
 >    /* Option icons (per-item icons in dropdown): */
 >    --apex-select-option-icon-size: 20px;
 >    --apex-select-option-icon-spacing: 10px;
@@ -1679,6 +1747,7 @@ Two types of tables are available. One with local data and local sorting & filte
 >  NumberMath,  // A column for displaying combined properties' values numbers with additional addition, subtraction, multiplication, division logic.
 >  Actions,     // A column for action buttons
 >  List,        // A column for displaying arrays with overflow badge
+>  Status,      // A column for displaying multi-step progress indicators
 >}
 >```
 >
@@ -1697,6 +1766,8 @@ Two types of tables are available. One with local data and local sorting & filte
 >Actions Column: Displays action buttons with dynamic visibility based on context.
 >
 >List Column: Displays an array of objects as a formatted text string joined by " / " (e.g., "Miami / Orlando / Tampa"). When the array exceeds `listOptions.max` items, an overflow badge (+N) appears. Hovering the badge shows a tooltip with all remaining items.
+>
+>Status Column: Displays a horizontal sequence of labeled steps, each underlined by a colored bar. Steps up to and including the row's current status show their configured color; later steps show a muted gray bar. Useful for deal pipelines, order progress, approval flows, etc.
 
 ### List Column Usage
 
@@ -1744,6 +1815,53 @@ Two types of tables are available. One with local data and local sorting & filte
 >| `--apex-table-list-overflow-color` | `#FFA753` | Overflow badge text color |
 >| `--apex-table-list-overflow-border-color` | `#FFEFE1` | Overflow badge border color |
 
+### Status Column Usage
+
+>```typescript
+>export interface ApexTableStatusStep {
+>  label: string;                          // Display label for the step
+>  value: string | number | boolean;       // Identifier matched against the row's status value (strict equality)
+>  color: string;                          // Bar color when this step is reached
+>}
+>```
+>
+>The row's status value (resolved from `column.value`) is matched against each step's `value`. All steps up to and including the matched one are considered completed and show their configured `color`. Remaining steps show the muted incomplete color. If the value doesn't match any step → every step renders as incomplete.
+>
+>```typescript
+>// Data
+>public tableData = [
+>  { id: 1, offerStatus: 'listed' },
+>  { id: 2, offerStatus: 'sold' },
+>  { id: 3, offerStatus: 'offerAccepted' }
+>];
+>
+>// Column config
+>public tableColumns: ApexTableColumn[] = [
+>  {
+>    label: 'Offer Status',
+>    value: 'offerStatus',
+>    type: ApexTableColumnType.Status,
+>    width: '320px',
+>    statusSteps: [
+>      { label: 'Listed',           value: 'listed',          color: '#FBD84A' },
+>      { label: 'Receiving Offers', value: 'receivingOffers', color: '#4AC0E0' },
+>      { label: 'Offer Accepted',   value: 'offerAccepted',   color: '#26D280' },
+>      { label: 'Sold',             value: 'sold',            color: '#FFA753' }
+>    ]
+>  }
+>];
+>```
+
+### Status Column CSS Variables
+
+>| Variable | Default | Description |
+>|---|---|---|
+>| `--apex-table-status-gap` | `8px` | Gap between steps |
+>| `--apex-table-status-bar-height` | `3px` | Height of the underline bar |
+>| `--apex-table-status-incomplete-color` | `#E5E7EB` | Bar color for not-yet-reached steps |
+>| `--apex-table-status-label-color` | `#888B95` | Label color for not-yet-reached steps |
+>| `--apex-table-status-label-completed-color` | `#191B22` | Label color for reached steps |
+
 ### Cell Icons
 
 Cell icons allow you to display an icon next to the text in a cell. The icon can be static or mapped per value, making it useful for status indicators, engagement levels, etc.