@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

package/dist/types/components/co-rich-text-toolbar/co-rich-text-toolbar.d.ts

@@ -0,0 +1,148 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { Editor, ToolbarEntry } from '@prolibu-suite/cobalt-rich-text';
+/**
+ * Formatting toolbar for co-rich-text-editor. Receives the Tiptap editor
+ * instance via the `editor` JS property, runs commands, and reflects active
+ * state. Supports separators, dropdown menus, inline popover inputs, and
+ * color palette pickers.
+ *
+ * @part toolbar - The toolbar container
+ * @part button - A toolbar button
+ */
+export declare class CoRichTextToolbar {
+    el: HTMLElement;
+    /** Editor instance (set as a property by the host editor). */
+    editor?: Editor;
+    /** Toolbar layout variant. */
+    variant: 'none' | 'compact' | 'basic' | 'full';
+    disabled: boolean;
+    /** BCP-47 locale for UI strings (e.g. 'en', 'es-CO', 'pt-BR'). Default English. */
+    locale: string;
+    /** Image upload handler (JS property): `(file) => Promise<url | {src, fileId}>`. */
+    imageUpload?: (file: File) => Promise<any>;
+    /** Emitted whenever a toolbar action runs (observability for hosts). */
+    coAction: EventEmitter<{
+        action: string;
+        payload?: unknown;
+    }>;
+    /** Emitted when a toolbar popover/dropdown opens or closes (host hides the
+     *  selection bubble while one is open to avoid spatial overlap). */
+    coPopoverChange: EventEmitter<{
+        open: boolean;
+    }>;
+    items: ToolbarEntry[];
+    /** Bumped on every editor transaction to refresh active state. */
+    tick: number;
+    /** Currently open popover/dropdown (action id) or null. */
+    openPopover: string | null;
+    /** Input value for popover forms (link URL, image URL, etc.). */
+    popoverInput: string;
+    /** Table grid picker state. */
+    gridHoverRows: number;
+    gridHoverCols: number;
+    gridLockedRows: number;
+    gridLockedCols: number;
+    tableTab: 'grid' | 'manual';
+    tableManualRows: number;
+    tableManualCols: number;
+    tableWithHeader: boolean;
+    /** Table context items shown when cursor is inside a table. */
+    tableContextItems: ToolbarEntry[];
+    /** Image popover sub-view: 'menu' shows options, 'url' shows URL input. */
+    imagePopoverMode: 'menu' | 'url';
+    /** Hex input for toolbar color picker. */
+    colorHexInput: string;
+    private onTransaction;
+    private colorPalette;
+    private _tableContextItems;
+    private get s();
+    private tItem;
+    private tOpt;
+    /**
+     * Prevent toolbar clicks from stealing focus from the editor.
+     * This handler is on the HOST element (light DOM), which reliably
+     * prevents focus change even when Shadow DOM retargets events.
+     */
+    private handleHostMouseDown;
+    private handleDocumentClick;
+    connectedCallback(): void;
+    componentWillLoad(): void;
+    onVariantChange(v: string): void;
+    onEditorChange(next?: Editor, prev?: Editor): void;
+    /**
+     * Command whose presence in the schema proves an item's extension is loaded.
+     * Items without an entry have no extension dependency (separators, core marks,
+     * link, paragraph/heading, undo/redo, text color) and are always shown.
+     */
+    private static readonly ITEM_COMMAND;
+    /**
+     * Resolve a variant to the items actually usable in the current editor:
+     * hide any control whose extension the active preset didn't load, then
+     * collapse the separators left dangling by the removals. Until the editor is
+     * wired we can't inspect the schema, so the full variant is shown and
+     * re-filtered from `onEditorChange`.
+     */
+    private resolveItems;
+    onOpenPopoverChange(next: string | null, prev: string | null): void;
+    disconnectedCallback(): void;
+    private updateTableContext;
+    private isSeparator;
+    private isActive;
+    /** Toolbar icon that reflects current state (e.g. alignment shows the active alignment). */
+    private getDynamicIcon;
+    private run;
+    private togglePopover;
+    private closePopover;
+    private submitPopover;
+    private smoothScrollToInserted;
+    private removeLink;
+    private removeIframe;
+    private selectColor;
+    private clearColor;
+    /**
+     * Whether an action is allowed in the current selection. Beyond undo/redo,
+     * this disables commands that would produce content the editor can't
+     * represent — most importantly the Table button while the cursor is already
+     * inside a table, since nested tables are invalid and corrupt the document
+     * when it's reloaded (tiptap throws "Invalid HTML content" on such markup).
+     *
+     * Each command is probed through tiptap's `can()` dry-run, so a button also
+     * disables automatically anywhere ProseMirror's schema would reject it (e.g.
+     * marks inside a code block). The probe defaults to enabled on any error or
+     * unknown command so a quirk never makes a control silently disappear.
+     */
+    /**
+     * Whether an action can run *right now*. Extension availability is already
+     * handled by `resolveItems` (unavailable controls aren't rendered), so this
+     * only covers the dynamic, cursor-dependent cases: the hard "no table inside
+     * a table" rule, and position validity (e.g. marks inside a code block) via
+     * tiptap's `can()` dry-run. A thrown dry-run defaults to enabled so a quirk
+     * never makes a visible control silently lock up.
+     */
+    private canRun;
+    private getDropdownLabel;
+    private getActiveColor;
+    private renderButton;
+    private renderAlignmentGroup;
+    private renderColorButton;
+    /** Visual grid of list-marker styles (Google-Docs style). */
+    private renderListPicker;
+    /** Visual picker for task-list variants (checkboxes; strike vs plain). */
+    private renderTaskListPicker;
+    private applyListStyle;
+    private applyTaskStyle;
+    private renderInputPopover;
+    private renderImagePopover;
+    private triggerImageFileUpload;
+    private isDropdownOptionActive;
+    /** Apply a free-form value typed into a dropdown's custom input. */
+    private applyDropdownCustom;
+    private renderDropdown;
+    private handleDropdownSelect;
+    private renderTableGrid;
+    private renderGridTab;
+    private renderManualTab;
+    private insertTable;
+    private renderColorPicker;
+    render(): any;
+}

package/dist/types/components/co-rich-text-viewer/co-rich-text-viewer.d.ts

@@ -0,0 +1,19 @@
+import type { RichTextPreset } from '@prolibu-suite/cobalt-rich-text';
+export declare class CoRichTextViewer {
+    /** HTML string (default) or ProseMirror JSON string. */
+    value: string | null;
+    /** Input format. `html` is the lightweight path. */
+    format: 'html' | 'json';
+    /** Sanitization profile to apply. */
+    preset: RichTextPreset;
+    /** Text shown when there is no content. */
+    emptyText?: string;
+    /** Reduced padding. */
+    compact: boolean;
+    html: string;
+    componentWillLoad(): Promise<void>;
+    watchInputs(): Promise<void>;
+    private sanitizeHtml;
+    private compute;
+    render(): any;
+}

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

@@ -3,41 +3,71 @@ export interface SelectOption {
     label: string;
     value: string;
     icon?: string;
+    /** Image URL shown before the label (e.g. a country flag). Takes precedence over `icon`. */
+    image?: string;
     disabled?: boolean;
 }
 export declare class CoSelect {
     label?: string;
+    /** Whether the field is required (renders a required marker on the label). */
+    required: boolean;
     secondaryLabel?: string;
     placeholder: string;
     disabled: boolean;
     iconLeft?: string;
     clearable: boolean;
     helperText?: string;
+    /** Label layout: vertical (label above) or horizontal (label beside) */
+    layout: 'vertical' | 'horizontal';
     status: 'default' | 'error' | 'success' | 'warning' | 'info';
     options: SelectOption[] | string[] | string;
     value: string | string[];
     multiple: boolean;
+    size: 's' | 'sm' | 'md' | 'lg';
+    /** Show a search box inside the dropdown to filter options client-side. */
+    searchable: boolean;
+    searchPlaceholder: string;
+    emptyText: string;
     isOpen: boolean;
     scrollTop: number;
+    searchText: string;
+    private sortSnapshot;
     el: HTMLElement;
     private optionsContainerEl?;
+    private osInstance?;
+    private searchInputEl?;
     private static readonly ITEM_HEIGHT;
     private static readonly VIEWPORT_ITEMS;
     private static readonly OVERSCAN;
     coChange: EventEmitter<string | string[]>;
     coClear: EventEmitter<void>;
+    private lastOptionsRaw;
+    private lastParsedOptions;
+    private lastRankInput?;
+    private lastRankSearch;
+    private lastRanked;
     private get parsedOptions();
+    /** Options after the in-dropdown search filter (client-side, by label), with
+     *  the selected ones pinned first in multiple mode (frozen at open time). */
+    private get filteredOptions();
     private get selectedValues();
     private get hasValue();
+    /** The selected option in single mode (used to show its flag/image in the trigger). */
+    private get selectedOption();
     private get displayText();
     private get statusIcon();
     onOpenChange(open: boolean): void;
+    private handleSearchInput;
     private handleTriggerClick;
     private handlePopoverOpen;
     private handlePopoverClose;
     private handleClear;
     private handleOptionClick;
-    private handleOptionsScroll;
+    private syncOverlayScrollbars;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    /** Option label with the matched substring wrapped for highlighting. */
+    private renderLabel;
     private getVirtualSlice;
     render(): any;
 }

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

@@ -0,0 +1,13 @@
+/**
+ * Placeholder de carga con shimmer (sweep). Componer apilando varios.
+ * Respeta prefers-reduced-motion (sin animación).
+ */
+export declare class CoSkeleton {
+    /** rect (default) | text (radio menor) | circle */
+    variant: 'rect' | 'text' | 'circle';
+    /** Ancho CSS (default 100%) */
+    width: string;
+    /** Alto CSS (default por variante en CSS) */
+    height: string;
+    render(): any;
+}

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

@@ -6,6 +6,8 @@ export declare class CoSwitch {
     disabled: boolean;
     /** Label text displayed beside the switch */
     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;
     /** Helper text displayed below */

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

@@ -0,0 +1,84 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Free-text tags input — type a value and press Enter/Tab (or comma) to add it
+ * as a chip. Backspace on an empty input removes the last chip; double-click a
+ * chip to edit it inline. Unlike `co-combobox` (which selects from a fixed list
+ * of options), this field has no option list: every chip is arbitrary text the
+ * user typed. It is the renderer for schema fields whose Mongoose type is an
+ * array of primitives (e.g. `type: [String]`).
+ *
+ * The committed `value` is a JSON array of strings (or an actual `string[]` when
+ * set programmatically). `coChange` emits the array on every add/edit/remove/clear.
+ *
+ * Visually mirrors `co-date-field`/`co-input` so it sits flush with the rest of
+ * the form controls.
+ *
+ * @part wrapper - Root container
+ * @part label - The field label
+ * @part field - The bordered chip+input row
+ * @part input - The native text input
+ * @part clear - The clear-all button
+ * @part helper - The helper/error text row
+ */
+export declare class CoTagsField {
+    el: HTMLElement;
+    /** Committed value as a JSON array of strings (or an actual `string[]`). */
+    value: string[] | string;
+    label?: string;
+    placeholder: string;
+    name?: string;
+    required: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    clearable: boolean;
+    /** Maximum number of tags allowed (no cap when undefined). */
+    maxTags?: number;
+    /** Allow the same value to be added more than once. */
+    allowDuplicates: boolean;
+    /** External invalid flag (e.g. from a form controller). */
+    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';
+    /** Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48. */
+    size: 's' | 'sm' | 'md' | 'lg';
+    /** Emitted with the full array on every add/edit/remove/clear. */
+    coChange: EventEmitter<string[]>;
+    /** Emitted on every keystroke of the inline input with the raw text. */
+    coInput: EventEmitter<string>;
+    /** Emitted when the clear-all button is clicked. */
+    coClear: EventEmitter<void>;
+    coFocus: EventEmitter<void>;
+    coBlur: EventEmitter<void>;
+    /** Raw text in the inline input. */
+    draft: string;
+    /** Index of the chip being edited inline, or null. */
+    editingIndex: number | null;
+    /** Draft text while editing a chip. */
+    editingDraft: string;
+    hasFocus: boolean;
+    private inputEl?;
+    private editEl?;
+    onEditingIndexChange(next: number | null): void;
+    private get tags();
+    private get hasValue();
+    private get isInvalid();
+    private get atCapacity();
+    private commit;
+    private addTag;
+    private removeTag;
+    private startEdit;
+    private saveEdit;
+    private cancelEdit;
+    private handleClearAll;
+    private handleInput;
+    private handleKeyDown;
+    private handleFocus;
+    private handleBlur;
+    private handleEditKeyDown;
+    private handleFieldClick;
+    render(): any;
+}

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

@@ -0,0 +1,68 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Multiline text input field with label, helper text, character counter,
+ * and clear functionality. Mirrors `co-input` styling but renders a native
+ * `<textarea>` for multiline content (bios, descriptions, notes).
+ *
+ * @part wrapper - Root container
+ * @part label - The field label
+ * @part field - The bordered textarea wrapper
+ * @part input - The native textarea element
+ * @part helper - The helper/error text row
+ * @part counter - The character counter element
+ */
+export declare class CoTextarea {
+    el: HTMLElement;
+    /** Current value */
+    value: string;
+    /** Label text displayed above the textarea */
+    label?: string;
+    /** Secondary label displayed on the right side */
+    secondaryLabel?: string;
+    /** Placeholder text */
+    placeholder: string;
+    /** Input name attribute */
+    name?: string;
+    /** Whether the field is required */
+    required: boolean;
+    /** Disabled state */
+    disabled: boolean;
+    /** Read-only state */
+    readonly: boolean;
+    /** Number of visible text rows */
+    rows: number;
+    /** Maximum character length. When set, a counter is displayed. */
+    maxLength?: number;
+    /** Validation status */
+    status: 'default' | 'error' | 'success' | 'warning';
+    /** Helper text displayed below the textarea */
+    helperText?: string;
+    /** Label layout: vertical (label above) or horizontal (label beside) */
+    layout: 'vertical' | 'horizontal';
+    /** Field size (mirrors co-input paddings/font: s / sm / md / lg).
+     *  Vertical extent still comes from `rows`. */
+    size: 's' | 'sm' | 'md' | 'lg';
+    /** Show clear button when textarea has value */
+    clearable: boolean;
+    /** Resize behavior of the textarea */
+    resize: 'vertical' | 'none' | 'both';
+    /** Emitted on every keystroke with the current text */
+    coInput: EventEmitter<string>;
+    /** Emitted with the committed text on blur */
+    coChange: EventEmitter<string>;
+    /** Emitted on focus */
+    coFocus: EventEmitter<void>;
+    /** Emitted on blur */
+    coBlur: EventEmitter<void>;
+    /** Emitted when clear button is clicked */
+    coClear: EventEmitter<void>;
+    hasFocus: boolean;
+    private textareaEl?;
+    private handleInput;
+    private handleFocus;
+    private handleBlur;
+    private handleClear;
+    private get hasValue();
+    private get charCount();
+    render(): any;
+}

package/dist/types/components/co-toggle-button-group/co-toggle-button-group.d.ts

@@ -6,6 +6,8 @@ export declare class CoToggleButtonGroup {
     size: 'l' | 'm' | 's' | 'xs';
     disabled: boolean;
     direction: 'row' | 'column';
+    /** Stretch the group to fill its container; each button shares the width equally. */
+    fullWidth: boolean;
     el: HTMLElement;
     coChange: EventEmitter<string | string[]>;
     private get selectedValues();

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

@@ -18,6 +18,10 @@ export declare class CoTooltip {
     flip: boolean;
     /** Maximum width before text wraps. */
     maxWidth: string;
+    /** Full-width wrapper (opt-in) so the tooltip can wrap a flex/grid child that
+     *  must fill its track — e.g. an ellipsised list/table cell — without the
+     *  inline-block wrapper shrink-wrapping it. Drives the `:host([block])` CSS. */
+    block: boolean;
     visible: boolean;
     actualPlacement: Placement;
     el: HTMLElement;
@@ -44,6 +48,14 @@ export declare class CoTooltip {
     private handleFocusOut;
     private handleKeyDown;
     private updatePosition;
+    /**
+     * Promote the tooltip panel to the browser top layer (Popover API) so an
+     * ancestor's filter / mask / overflow / transform can't clip or mis-anchor it
+     * — needed when the trigger lives inside another top-layer panel (co-popover).
+     * Mirrors co-popover. No-ops where unsupported (falls back to in-place fixed
+     * positioning + offset-ancestor compensation).
+     */
+    private promotePanel;
     private scheduleUpdate;
     private addScrollListeners;
     private cleanupListeners;

package/dist/types/components/co-transfer-list/co-transfer-list.d.ts

@@ -18,6 +18,8 @@ export declare class CoTransferList {
     leftChecked: Set<string>;
     rightChecked: Set<string>;
     coChange: EventEmitter<string[]>;
+    el: HTMLElement;
+    private osInstances;
     private get parsedOptions();
     private get selectedValues();
     private get leftItems();
@@ -30,5 +32,7 @@ export declare class CoTransferList {
     private moveAllRight;
     private moveAllLeft;
     private renderList;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

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

@@ -0,0 +1,203 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+type VideoLang = 'es' | 'en' | 'pt';
+/**
+ * A fully configurable video player component with custom controls.
+ *
+ * @slot - Default slot (unused, reserved for future captions/overlays)
+ */
+export declare class CoVideo {
+    /** Video source URL */
+    src: string;
+    /** Poster/thumbnail image URL */
+    poster: string;
+    /** MIME type hint */
+    type: string;
+    /** Preload behavior */
+    preload: 'none' | 'metadata' | 'auto';
+    /** Auto-start playback (requires muted for browser autoplay) */
+    autoplay: boolean;
+    /** Loop playback */
+    loop: boolean;
+    /** Muted state */
+    muted: boolean;
+    /** Initial volume (0-1) */
+    volume: number;
+    /** Current playback position in seconds (enables resume) */
+    currentTime: number;
+    /** Playback speed */
+    playbackRate: number;
+    /** Available playback speeds (JSON array string) */
+    playbackRates: string;
+    /** Master toggle for custom control bar */
+    controls: boolean;
+    /** Show play/pause button */
+    showPlay: boolean;
+    /** Show volume controls */
+    showVolume: boolean;
+    /** Show progress/seek bar */
+    showProgress: boolean;
+    /** Show time display */
+    showTime: boolean;
+    /** Show fullscreen button */
+    showFullscreen: boolean;
+    /** Show playback speed selector */
+    showSpeed: boolean;
+    /** Show Picture-in-Picture button */
+    showPip: boolean;
+    /** Show download button */
+    showDownload: boolean;
+    /** Enable download functionality */
+    allowDownload: boolean;
+    /** Container aspect ratio */
+    aspectRatio: '16:9' | '4:3' | '1:1' | '21:9' | 'auto';
+    /** Border radius */
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Auto-hide controls after inactivity */
+    controlsAutoHide: boolean;
+    /** Milliseconds before controls hide */
+    controlsAutoHideDelay: number;
+    /** Disabled state */
+    disabled: boolean;
+    /** Progress percentage (0-100) that triggers coThresholdReached. 0 = disabled */
+    watchThreshold: number;
+    /** Language for labels and aria attributes */
+    locale: VideoLang;
+    coPlay: EventEmitter<void>;
+    coPause: EventEmitter<void>;
+    coEnded: EventEmitter<void>;
+    coReady: EventEmitter<{
+        duration: number;
+    }>;
+    coError: EventEmitter<{
+        code: number;
+        message: string;
+    }>;
+    coTimeUpdate: EventEmitter<{
+        currentTime: number;
+        duration: number;
+        progressPercent: number;
+    }>;
+    coSeeked: EventEmitter<{
+        from: number;
+        to: number;
+    }>;
+    coVolumeChange: EventEmitter<{
+        volume: number;
+        muted: boolean;
+    }>;
+    coFullscreenChange: EventEmitter<{
+        fullscreen: boolean;
+    }>;
+    coPlaybackRateChange: EventEmitter<{
+        rate: number;
+    }>;
+    coPipChange: EventEmitter<{
+        pip: boolean;
+    }>;
+    coDownload: EventEmitter<{
+        src: string;
+    }>;
+    coThresholdReached: EventEmitter<{
+        threshold: number;
+        currentTime: number;
+        duration: number;
+    }>;
+    private isPlaying;
+    private internalCurrentTime;
+    private duration;
+    private buffered;
+    private volumeLevel;
+    private isMuted;
+    private isFullscreen;
+    private internalPlaybackRate;
+    private isLoading;
+    private showControlBar;
+    private hasError;
+    private errorMessage;
+    private showSpeedMenu;
+    private isPip;
+    private thresholdFired;
+    private hasStarted;
+    private isSeeking;
+    private showVolumeSlider;
+    el: HTMLElement;
+    private videoEl?;
+    private containerEl?;
+    private progressTrackEl?;
+    private volumeTrackEl?;
+    private controlsTimer?;
+    private lastTimeUpdateEmit;
+    private parsedRates;
+    private seekFromTime;
+    private externalTimeUpdate;
+    private get t();
+    private get progressPercent();
+    private get pipSupported();
+    onSrcChange(): void;
+    onMutedChange(): void;
+    onVolumeChange(): void;
+    onCurrentTimeChange(): void;
+    onPlaybackRateChange(): void;
+    onPlaybackRatesChange(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    play(): Promise<void>;
+    pause(): Promise<void>;
+    togglePlay(): Promise<void>;
+    seek(time: number): Promise<void>;
+    setVolume(level: number): Promise<void>;
+    toggleMute(): Promise<void>;
+    toggleFullscreen(): Promise<void>;
+    togglePip(): Promise<void>;
+    private parseRates;
+    private resetState;
+    private bindVideoEvents;
+    private formatTime;
+    private resetControlsTimer;
+    private handleContainerMouseMove;
+    private handleContainerMouseLeave;
+    private handleContainerTouchStart;
+    private onLoadedMetadata;
+    private onPlay;
+    private onPause;
+    private onEnded;
+    private onTimeUpdate;
+    private onWaiting;
+    private onCanPlay;
+    private onError;
+    private onProgress;
+    private onNativeVolumeChange;
+    private onNativeRateChange;
+    private handlePlayClick;
+    private handleBigPlayClick;
+    private handleMuteClick;
+    private isDraggingVolume;
+    private handleVolumeMouseEnter;
+    private handleVolumeMouseLeave;
+    private handleProgressPointerDown;
+    private seekFromPointerEvent;
+    private handleVolumePointerDown;
+    private setVolumeFromPointerEvent;
+    private handleSpeedClick;
+    private handleSpeedSelect;
+    private handleFullscreenClick;
+    private handleFullscreenChange;
+    private handlePipClick;
+    private handleEnterPip;
+    private handleLeavePip;
+    private handleDownloadClick;
+    private handleRetryClick;
+    private handleKeyDown;
+    private handleVideoAreaClick;
+    private renderBigPlayButton;
+    private renderPoster;
+    private renderLoader;
+    private renderError;
+    private renderProgressBar;
+    private renderVolumeControl;
+    private renderSpeedMenu;
+    private renderControls;
+    render(): any;
+}
+export {};