@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

package/dist/types/components/co-column-picker/co-column-picker.d.ts

@@ -0,0 +1,60 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type ColumnOption, type ColumnSection } from './utils/column-picker-tree';
+export declare class CoColumnPicker {
+    label?: string;
+    secondaryLabel?: string;
+    options: ColumnOption[] | string[] | string;
+    value: string | string[];
+    multiple: boolean;
+    disabled: boolean;
+    showToolbar: boolean;
+    showSearch: boolean;
+    clearable: boolean;
+    placeholder: string;
+    maxHeight: number;
+    emptyText: string;
+    selectAllText: string;
+    clearText: string;
+    expandText: string;
+    collapseText: string;
+    selectedText: string;
+    sections: ColumnSection[] | string;
+    status: 'default' | 'error' | 'success' | 'warning' | 'info';
+    helperText?: string;
+    isOpen: boolean;
+    query: string;
+    expandedKeys: Set<string>;
+    focused: boolean;
+    el: HTMLElement;
+    coChange: EventEmitter<string[]>;
+    coClear: EventEmitter<void>;
+    coSearch: EventEmitter<string>;
+    private searchInputEl?;
+    private get parsedOptions();
+    private get parsedSections();
+    private get selectedValues();
+    private get optionLabelMap();
+    private get hasValue();
+    private get statusIcon();
+    private emitSelection;
+    onOptionsChange(): void;
+    handleDocumentClick(e: MouseEvent): void;
+    private handleFieldClick;
+    private handleSearchInput;
+    private handleSearchClear;
+    private handleClear;
+    private handleSelectAll;
+    private handleDeselectAll;
+    private handleExpandAll;
+    private handleCollapseAll;
+    private handleOptionClick;
+    private handleParentCheck;
+    private handleChipRemove;
+    private handleToggleExpand;
+    private getTree;
+    private getSectionedTree;
+    private renderField;
+    private renderTree;
+    private renderEmpty;
+    render(): any;
+}

package/dist/types/components/co-column-picker/column-picker-node.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Stencil FunctionalComponent for rendering a single tree node
+ * in the column-picker dropdown.
+ */
+import { FunctionalComponent } from '../../stencil-public-runtime';
+import { type TreeNode } from './utils/column-picker-tree';
+export interface ColumnPickerNodeProps {
+    node: TreeNode;
+    depth: number;
+    selected: string[];
+    expandedKeys: Set<string>;
+    disabled: boolean;
+    query: string;
+    onOptionClick: (path: string) => void;
+    onParentCheck: (node: TreeNode) => void;
+    onToggleExpand: (key: string, e: MouseEvent) => void;
+}
+export declare const ColumnPickerNode: FunctionalComponent<ColumnPickerNodeProps>;

package/dist/types/components/co-column-picker/utils/column-picker-tree.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Pure tree-building, filtering, and string utilities for co-column-picker.
+ * No Stencil dependency — fully unit-testable.
+ */
+import { normalizeText as normalize } from '../../../utils/normalizeText';
+export interface ColumnOption {
+    label: string;
+    value: string;
+    icon?: string;
+    disabled?: boolean;
+}
+export interface ColumnSection {
+    label: string;
+    prefix: string;
+}
+export interface TreeNode {
+    label: string;
+    key: string;
+    fullPath: string;
+    children: TreeNode[] | null;
+    isSelf?: boolean;
+}
+export declare function parsePaths(raw: ColumnOption[] | string[] | string): string[];
+export declare function parseSections(raw: ColumnSection[] | string): ColumnSection[];
+export declare function parseValues(raw: string | string[]): string[];
+export declare function buildLabelMap(raw: ColumnOption[] | string[] | string): Map<string, string>;
+export { normalize };
+export declare function formatLabel(str: string): string;
+export declare function escapeHtml(str: string): string;
+export declare function highlightLabel(text: string, search: string): string;
+export declare function buildTree(flatPaths: string[], labelMap?: Map<string, string>): TreeNode[];
+export declare function sortNodes(nodes: TreeNode[]): TreeNode[];
+export declare function filterTree(nodes: TreeNode[], q: string): TreeNode[];
+export declare function collectAllLeafPaths(nodes: TreeNode[]): string[];
+export declare function expandForSelected(tree: TreeNode[], selected: string[], current: Set<string>): Set<string>;
+export declare function expandForQuery(nodes: TreeNode[], q: string, current: Set<string>): Set<string>;
+export declare function collectAllExpandableKeys(nodes: TreeNode[]): Set<string>;

package/dist/types/components/co-combobox/co-combobox.d.ts

@@ -7,9 +7,12 @@ export interface ComboboxOption {
 export declare class CoCombobox {
     /** Label text displayed above the combobox */
     label?: string;
+    /** Whether the field is required (renders a required marker on the label). */
+    required: boolean;
     /** Secondary label displayed on the right side */
     secondaryLabel?: string;
-    /** Placeholder text */
+    /** Placeholder text. Empty by default — a literal "Placeholder" leaking into
+     *  product UIs when the consumer forgets the prop is worse than no hint. */
     placeholder: string;
     /** Disabled state */
     disabled: boolean;
@@ -33,8 +36,14 @@ export declare class CoCombobox {
     value: string[] | string;
     /** Whether multiple values can be selected */
     multiple: boolean;
+    /** Trigger size (mirrors co-input/co-select): s 28 / sm 32 / md 40 / lg 48 */
+    size: 's' | 'sm' | 'md' | 'lg';
     /** Helper text displayed below the combobox */
     helperText?: string;
+    /** Validation status */
+    status: 'default' | 'error' | 'success' | 'warning' | 'info';
+    /** Label layout: vertical (label above) or horizontal (label beside) */
+    layout: 'vertical' | 'horizontal';
     isOpen: boolean;
     searchQuery: string;
     overflowCount: number;
@@ -42,6 +51,7 @@ export declare class CoCombobox {
     el: HTMLElement;
     private chipContainerEl?;
     private optionsContainerEl?;
+    private osInstance?;
     private resizeObserver?;
     private static readonly ITEM_HEIGHT;
     private static readonly VIEWPORT_ITEMS;
@@ -62,9 +72,12 @@ export declare class CoCombobox {
     private get parsedOptions();
     private get selectedValues();
     private get filteredOptions();
+    /** Option label with the matched substring wrapped for highlighting. */
+    private renderLabel;
     private get displayText();
     private get selectedOptions();
     private get hasValue();
+    private get statusIcon();
     onOpenChange(open: boolean): void;
     onValueChange(): void;
     connectedCallback(): void;

package/dist/types/components/co-command-search/co-command-search.d.ts

@@ -1,10 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export interface CommandItem {
-    label: string;
-    icon?: string;
-    value: string;
-    section?: string;
-}
+import { CommandItem } from './commandSearchGroup';
 /**
  * A command palette / search component (⌘K style).
  * Opens as an overlay with a search input and filterable list of items.
@@ -21,16 +16,56 @@ export declare class CoCommandSearch {
     items: string | CommandItem[];
     /** Empty state message when no results match */
     emptyMessage: string;
+    /** When true, the host supplies already-filtered, ordered items: disable
+     *  internal client filtering so fetch-as-you-type results pass through. */
+    async: boolean;
+    /** Show a loading indicator in the results area (async fetch in flight). */
+    loading: boolean;
+    /** Facet chips as JSON string: [{label:string, icon?:string}[]] */
+    chips: string;
+    /** Module tabs (mac-Spotlight style) as JSON: [{value,label,icon}]. Empty = no tabs row. */
+    tabs: string;
+    /** The active tab's value (the scope model key), or '' = no active tab. */
+    activeTab: string;
+    /** Show the "Más ▾" overflow tab. */
+    hasMore: boolean;
+    /** Label for the overflow tab. */
+    moreLabel: string;
+    /** Favorites / shortcuts grid (mac-Spotlight app grid) as JSON: [{value,label,icon,color}].
+     *  Shown as a grid at the top of the results, only while the query is empty. */
+    favorites: string;
     private query;
     private activeIndex;
     coSelect: EventEmitter<string>;
     coClose: EventEmitter<void>;
+    coQueryChange: EventEmitter<string>;
+    /** Emitted when an item with keepOpen=true is selected. Detail = item.value (scope model key). */
+    coScopeChange: EventEmitter<string>;
+    /** Emitted when Backspace is pressed with an empty query, or when the scope chip ✕ is clicked.
+     *  Detail = current query string (always '' at emit time). Host decides: pop scope or remove last facet. */
+    coBackspaceEmpty: EventEmitter<string>;
+    /**
+     * Emitted when the user clicks ✕ on a facet chip.
+     * detail = chip index (number).
+     */
+    coChipRemove: EventEmitter<number>;
+    /** Emitted when a module tab is clicked. detail = tab value; '' when the active tab is re-clicked (deselect). */
+    coTabSelect: EventEmitter<string>;
+    /** Emitted when the "Más ▾" overflow tab is clicked. */
+    coMoreTabs: EventEmitter<void>;
     private inputEl?;
     private get parsedItems();
     private get filteredItems();
+    private get parsedChips();
+    private get parsedTabs();
+    private get parsedFavorites();
+    /** Item label with the matched substring wrapped for highlighting. */
+    private renderLabel;
+    onActiveTabChange(newVal: string): void;
     onOpenChange(newVal: boolean): void;
     private handleInput;
     private handleKeyDown;
+    /** Two-stage commit: keepOpen items emit coScopeChange only; all others emit coSelect + close. */
     private selectItem;
     private close;
     private handleOverlayClick;

package/dist/types/components/co-command-search/commandSearchGroup.d.ts

@@ -0,0 +1,20 @@
+export interface CommandItem {
+    label: string;
+    value: string;
+    icon?: string;
+    subtitle?: string;
+    section?: string;
+    /** When true, selectItem emits coScopeChange only (no coSelect, no close). Two-stage commit. */
+    keepOpen?: boolean;
+}
+export type RenderRow = {
+    kind: 'header';
+    label: string;
+} | {
+    kind: 'item';
+    item: CommandItem;
+    index: number;
+};
+/** Flatten an ordered CommandItem[] into render rows, inserting a header
+ *  whenever the section changes. `index` counts items only (drives activeIndex). */
+export declare function groupItems(items: CommandItem[]): RenderRow[];

package/dist/types/components/co-command-search/commandSearchLogic.d.ts

@@ -0,0 +1,17 @@
+import { CommandItem } from './commandSearchGroup.js';
+/**
+ * Pure: should the component keep open and emit coScopeChange
+ * instead of the default coSelect+close?
+ */
+export declare function shouldKeepOpen(item: CommandItem): boolean;
+/**
+ * Pure: should coBackspaceEmpty fire?
+ * True when the user presses Backspace with an empty query.
+ */
+export declare function isEmptyBackspace(key: string, query: string): boolean;
+/**
+ * Pure: client-side item filtering.
+ * Mirrors the filteredItems getter logic from co-command-search.tsx.
+ * When async=true all items pass through (host already filtered them).
+ */
+export declare function applyClientFilter(items: CommandItem[], query: string, async: boolean): CommandItem[];

package/dist/types/components/co-data-table/co-data-table.d.ts

@@ -42,7 +42,7 @@ export declare class CoDataTable {
     /** Emitted when a column sort is requested */
     coSort: EventEmitter<{
         field: string;
-        order: 'asc' | 'desc';
+        order: 'asc' | 'desc' | '';
     }>;
     /** Emitted when a row is selected/deselected */
     coRowSelect: EventEmitter<{
@@ -79,6 +79,7 @@ export declare class CoDataTable {
     resizingColumn: string | null;
     resizeStartX: number;
     resizeStartWidth: number;
+    private suppressNextSort;
     parseColumns(): void;
     parseRows(): void;
     parseSelectedKeys(): void;
@@ -97,6 +98,7 @@ export declare class CoDataTable {
     private getColumnWidth;
     private getTableWidth;
     private renderColgroup;
+    private renderSortIcon;
     private renderHeader;
     private renderBody;
     private renderEmpty;

package/dist/types/components/co-date-field/co-date-field.d.ts

@@ -0,0 +1,96 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Text input for a single date with manual typing as a first-class input.
+ *
+ * The committed `value` is always a date-only string "YYYY-MM-DD" (or `null`
+ * when empty) — the visible text is formatted per `displayFormat` (default
+ * dd/MM/yyyy, es-CO). The component keeps a `draft` (raw text) separate from the
+ * committed `value`, so a controlled parent setting `value` never clobbers what
+ * the user is typing.
+ *
+ * It owns its own `<input>` (rather than embedding `co-input`) so it can control
+ * the Enter key — committing/validating the typed date instead of submitting the
+ * enclosing form on an unparsed value.
+ *
+ * Events: `coInput` (typing, raw), `coChange` (committed valid value or null),
+ * `coInvalid` (commit failed, value unchanged), `coClear`, `coFocus`, `coBlur`.
+ *
+ * @part wrapper - Root container
+ * @part label - The field label
+ * @part field - The bordered input row
+ * @part input - The native input element
+ * @part clear - The clear button
+ * @part helper - The helper/error text row
+ */
+export declare class CoDateField {
+    el: HTMLElement;
+    /** Committed value, "YYYY-MM-DD" or null. */
+    value: string | null;
+    /** Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48. */
+    size: 's' | 'sm' | 'md' | 'lg';
+    /** Earliest allowed date, "YYYY-MM-DD". */
+    min?: string;
+    /** Latest allowed date, "YYYY-MM-DD". */
+    max?: string;
+    /** Blocked dates (string[] or JSON/comma string). */
+    disabledDates?: string[] | string;
+    /** Blocked weekdays 0=Sun..6=Sat (number[] or JSON/comma string). */
+    disabledDaysOfWeek?: number[] | string;
+    /** BCP-47 locale. */
+    locale: string;
+    /** Display pattern (tokens yyyy/yy/MMMM/MMM/MM/M/dd/d). */
+    displayFormat: string;
+    label?: string;
+    placeholder?: string;
+    name?: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    clearable: boolean;
+    /** External invalid flag (e.g. from a form controller). OR'd with internal parse failure. */
+    invalid: boolean;
+    /** Message shown when invalid. */
+    errorMessage?: string;
+    /** Helper text shown when valid. */
+    helperText?: string;
+    /** Label layout: vertical (label above) or horizontal (label beside) */
+    layout: 'vertical' | 'horizontal';
+    /** Override the clear-button aria-label (defaults from `locale`). */
+    clearLabel?: string;
+    /** Emitted on every keystroke with the raw text. */
+    coInput: EventEmitter<string>;
+    /** Emitted when a valid value (or null) is committed. */
+    coChange: EventEmitter<string | null>;
+    /** Emitted when a committed parse fails. Detail carries the raw text. */
+    coInvalid: EventEmitter<{
+        raw: string;
+    }>;
+    /** Emitted when cleared. */
+    coClear: EventEmitter<void>;
+    coFocus: EventEmitter<void>;
+    coBlur: EventEmitter<void>;
+    /** Raw text in the box (display-formatted on commit). */
+    draft: string;
+    /** Internal parse-failure flag. */
+    internalInvalid: boolean;
+    hasFocus: boolean;
+    private inputEl?;
+    componentWillLoad(): void;
+    onValueChange(): void;
+    /** Focus the text input (used by co-date-picker to return focus on close). */
+    focusInput(): Promise<void>;
+    private get order();
+    private get isInvalid();
+    private get hasValue();
+    private handleInput;
+    private handleFocus;
+    private handleBlur;
+    private handleKeyDown;
+    private handleClear;
+    /**
+     * Parse the draft and commit. Returns true when the field is in a valid,
+     * committed state (including empty → null), false when invalid.
+     */
+    private commit;
+    render(): any;
+}

package/dist/types/components/co-date-picker/co-date-picker.d.ts

@@ -0,0 +1,92 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { Placement } from '../../utils/positioning';
+/**
+ * Single-date picker: composes `co-date-field` (manual typing) + `co-popover`
+ * (floating panel, outside-click) + `co-calendar` (visual selection, keyboard).
+ *
+ * The committed value is a date-only "YYYY-MM-DD" string (or null). Manual
+ * typing and calendar selection both flow into the same value; the calendar is
+ * an aid, never the only input.
+ *
+ * Interaction:
+ *   - Click the field → opens the calendar (focus stays in the input to type).
+ *   - ArrowDown in the field → moves focus into the calendar grid.
+ *   - Enter/click a day → selects, commits, closes (closeOnSelect), focus returns.
+ *   - Escape → closes and returns focus to the field.
+ *   - Outside click → closes (handled by co-popover).
+ *
+ * Escape is owned here (co-popover `closeOnEscape=false`) so focus can return to
+ * the field; outside-click stays with co-popover.
+ */
+export declare class CoDatePicker {
+    el: HTMLElement;
+    /** Committed value, "YYYY-MM-DD" or null. */
+    value: string | null;
+    min?: string;
+    max?: string;
+    disabledDates?: string[] | string;
+    disabledDaysOfWeek?: number[] | string;
+    locale: string;
+    displayFormat: string;
+    firstDayOfWeek: number;
+    label?: string;
+    placeholder?: string;
+    /** Field size, forwarded to the inner co-date-field. */
+    size: 's' | 'sm' | 'md' | 'lg';
+    name?: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    clearable: boolean;
+    invalid: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    /** Label layout: vertical (label above) or horizontal (label beside) */
+    layout: 'vertical' | 'horizontal';
+    /** Popover placement relative to the field. */
+    placement: Placement;
+    /** Close the popover when a day is selected. */
+    closeOnSelect: boolean;
+    /** Whether the calendar popover is open. */
+    open: boolean;
+    /** Max viewport width (px) that renders the calendar as a bottom sheet. */
+    mobileBreakpoint: number;
+    /** True when the viewport is at/under `mobileBreakpoint`. */
+    isMobile: boolean;
+    coInput: EventEmitter<string>;
+    coChange: EventEmitter<string | null>;
+    coInvalid: EventEmitter<{
+        raw: string;
+    }>;
+    coClear: EventEmitter<void>;
+    coFocus: EventEmitter<void>;
+    coBlur: EventEmitter<void>;
+    coOpen: EventEmitter<void>;
+    coClose: EventEmitter<void>;
+    private internalInvalid;
+    private fieldEl?;
+    private calendarEl?;
+    private pendingFocusGrid;
+    private pendingFocusField;
+    private mql?;
+    private mqlHandler;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get isInvalid();
+    private setOpen;
+    private onFieldChange;
+    private onFieldInput;
+    private onFieldInvalid;
+    private onFieldClear;
+    private onFieldKeyDown;
+    private onCalendarSelect;
+    private onPopoverOpen;
+    private onPopoverClose;
+    private onRootKeyDown;
+    private focusGridSoon;
+    componentDidRender(): void;
+    private renderField;
+    private renderCalendar;
+    private renderHelper;
+    render(): any;
+}

package/dist/types/components/co-date-range/co-date-range.d.ts

@@ -1,70 +1,32 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export interface DateRangeValue {
-    from: string | null;
-    to: string | null;
-}
+import type { DateRangeValue } from '../co-date-range-picker/co-date-range-picker';
 /**
- * Date range picker. Renders an input-style trigger and, on open, a popover
- * with optional preset chips + a single-month calendar.
- *
- * Selection model:
- *   - first click  → sets `from`
- *   - second click → sets `to` (auto-swaps if before `from`)
- *   - third click  → restarts (sets new `from`, clears `to`)
- *   - hover over a day with `from` set → previews the range
+ * @deprecated Use `<co-date-range-picker>` instead.
  *
- * `value` is a JSON string `{"from":"YYYY-MM-DD","to":"YYYY-MM-DD"}` (or empty
- * for unset) so it survives JSX attribute serialization. `coChange` fires
- * with `{from, to}` only when the user clicks "Apply".
+ * Thin compatibility shim kept for one release: it renders the canonical
+ * `<co-date-range-picker>` (accessible, manual input, presets, timezone-safe)
+ * and re-emits its `coApply` as the legacy `coChange`. The legacy per-preset
+ * label props are no longer honored — preset labels now come from `locale`.
  */
 export declare class CoDateRange {
     el: HTMLElement;
-    /** JSON `{from, to}` or empty string. */
+    /** JSON `{from,to}` or empty string. */
     value: string;
     label: string;
     placeholder: string;
     disabled: boolean;
     clearable: boolean;
     presets: boolean;
-    status: 'default' | 'error' | 'success';
     helperText: string;
-    /** BCP-47 locale tag used by Intl.DateTimeFormat. */
+    /** BCP-47 locale. */
     locale: string;
-    presetTodayLabel: string;
-    presetThisWeekLabel: string;
-    presetThisMonthLabel: string;
-    presetLast30DaysLabel: string;
-    presetLast90DaysLabel: string;
-    presetThisYearLabel: string;
-    applyLabel: string;
-    clearLabel: string;
+    applyLabel?: string;
+    clearLabel?: string;
+    /** Fires (with `{from,to}`) when the user applies a range. */
     coChange: EventEmitter<DateRangeValue>;
     coClear: EventEmitter<void>;
-    isOpen: boolean;
-    draftFrom: string | null;
-    draftTo: string | null;
-    hoverDay: string | null;
-    viewMonth: number;
-    viewYear: number;
-    onValueChange(): void;
-    componentWillLoad(): void;
+    private warned;
     connectedCallback(): void;
-    disconnectedCallback(): void;
-    private parseValue;
-    private formatISO;
-    private handleTriggerClick;
-    private handleDocumentClick;
-    private handleCancel;
-    private handleDayClick;
-    private handleDayHover;
-    private handlePresetClick;
     private handleApply;
-    private handleClear;
-    private prevMonth;
-    private nextMonth;
-    private renderTriggerLabel;
-    private inRange;
-    private renderCalendar;
-    private renderPresets;
     render(): any;
 }