codexly-ui 0.22.0 → 0.22.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codexly-ui",
-  "version": "0.22.0",
+  "version": "0.22.1",
   "description": "Standalone, signal-based Angular UI component library for Codexly, styled with Tailwind CSS.",
   "keywords": [
     "angular",

package/types/codexly-ui.d.ts

@@ -1184,6 +1184,8 @@ declare class ClxSelectComponent implements ControlValueAccessor {
     readonly hint: _angular_core.InputSignal<string>;
     readonly errorMessage: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Multiple mode: "Seleccionar todos" / "Quitar todos" on top of the options. */
+    readonly selectAll: _angular_core.InputSignal<boolean>;
     readonly async: _angular_core.InputSignal<boolean>;
     readonly loadOptions: _angular_core.InputSignal<((query: string) => Observable<ClxSelectOption[]>) | null>;
     readonly debounceMs: _angular_core.InputSignal<number>;
@@ -1249,6 +1251,10 @@ declare class ClxSelectComponent implements ControlValueAccessor {
     private _loadPreviewFont;
     protected _closePanel(): void;
     protected _selectOption(opt: ClxSelectOption): void;
+    protected readonly _selectableFiltered: Signal<ClxSelectOption[]>;
+    protected readonly _allFilteredSelected: Signal<boolean>;
+    /** Selects every option the search shows, or removes them all when they already are. */
+    protected _toggleAll(): void;
     protected _deselect(value: string | number): void;
     protected _clearAll(): void;
     protected _onTriggerKeydown(event: KeyboardEvent): void;
@@ -1259,7 +1265,7 @@ declare class ClxSelectComponent implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(disabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxSelectComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxSelectComponent, "clx-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "activeColor": { "alias": "activeColor"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "async": { "alias": "async"; "required": false; "isSignal": true; }; "loadOptions": { "alias": "loadOptions"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "minChars": { "alias": "minChars"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxSelectComponent, "clx-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "activeColor": { "alias": "activeColor"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selectAll": { "alias": "selectAll"; "required": false; "isSignal": true; }; "async": { "alias": "async"; "required": false; "isSignal": true; }; "loadOptions": { "alias": "loadOptions"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "minChars": { "alias": "minChars"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 type ClxCheckboxVariant = 'solid' | 'outline';
@@ -3832,6 +3838,8 @@ interface ClxProduct {
     tags: string[];
     main_image?: string;
     in_stock: boolean;
+    /** Units left — for the "Últimas unidades" tag (ClxProductTagService). */
+    stock_quantity?: number;
     /** Cuántas variantes/combinaciones distintas representa esta card (ej. un catálogo agrupado por
      *  Color donde la card "Azul" cubre varias Tallas). > 1 hace que el botón de acción muestre "Ver
      *  opciones" en vez de agregar directo al carrito, ya que la card no identifica una combinación
@@ -3844,8 +3852,9 @@ type ClxProductTag = 'new' | 'sale' | 'out-of-stock' | 'featured' | 'limited' |
 /** Corner of the product image where a tag sits; tags sharing a corner stack. */
 type ClxTagPosition = 'TOP_LEFT' | 'TOP_RIGHT' | 'BOTTOM_LEFT' | 'BOTTOM_RIGHT';
 /** MANUAL = assigned per product (its code comes in ClxProduct.tags); the others are computed:
- *  STOCK ('{n} en stock', product detail), OUT_OF_STOCK and DISCOUNT ('{n}' = percentage). */
-type ClxTagKind = 'MANUAL' | 'STOCK' | 'OUT_OF_STOCK' | 'DISCOUNT';
+ *  STOCK ('{n} en stock', product detail), LOW_STOCK ('{n}' units left, up to stockThreshold),
+ *  OUT_OF_STOCK and DISCOUNT ('{n}' = percentage). */
+type ClxTagKind = 'MANUAL' | 'STOCK' | 'LOW_STOCK' | 'OUT_OF_STOCK' | 'DISCOUNT';
 /** One configured tag, as the host app's backend stores it (Catálogo → Etiquetas). */
 interface ClxTagStyle {
     code: string;
@@ -3857,6 +3866,8 @@ interface ClxTagStyle {
     shape: 'pill' | 'rounded';
     position: ClxTagPosition;
     sortOrder?: number;
+    /** LOW_STOCK: shown while the units left are 1..stockThreshold. */
+    stockThreshold?: number | null;
 }
 /** A tag ready to render — label with '{n}' already replaced. */
 interface ClxTagBadge {
@@ -3874,8 +3885,10 @@ interface ClxTagContext {
     /** Codes of its manual tags (ClxProduct.tags); computed ones mixed in ('out-of-stock') are ignored. */
     tags: readonly string[];
     inStock: boolean;
-    /** Units, for the STOCK tag — only the product detail passes it. */
+    /** Units left, for the LOW_STOCK tag (and STOCK with showStockCount). */
     stockQuantity?: number | null;
+    /** Show the STOCK tag ('{n} en stock') — the product detail, not the cards. */
+    showStockCount?: boolean;
     /** Discount percentage, for the DISCOUNT tag (0 / undefined = no discount). */
     discountPercent?: number | null;
 }