@kaufmann-lab/ui 0.1.19 → 0.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaufmann-lab/ui",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "description": "Shared Angular component library for the Kaufmann frontends",
   "license": "MIT",
   "author": "Kaufmann Lab",

package/types/kaufmann-lab-ui-business.d.ts

@@ -8,6 +8,18 @@ interface CompanySelectorMeta {
     label: string;
     value: string;
 }
+/**
+ * Empresa elegible. `value` es el identificador único (ej. número de
+ * cuenta) — dos empresas con el mismo `label` se seleccionan por separado.
+ * `tag` se muestra como badge junto al nombre (ej. 'Personal' | 'Empresa')
+ * y `detail` como línea secundaria en el panel (ej. 'RUC 20434860808').
+ */
+interface CompanySelectorOption {
+    value: string;
+    label: string;
+    tag?: string;
+    detail?: string;
+}
 /**
  * Conmutador de empresa activa con metadatos clave (página 32) — encabeza
  * la pantalla de inicio del portal. Compone `kf-select` para el propio
@@ -25,10 +37,22 @@ interface CompanySelectorMeta {
  *       { label: 'Sucursal', value: 'Sucursal Norte' },
  *     ]"
  *   />
+ *
+ * Con opciones en forma de objeto, `value`/`valueChange` usan el `value` de
+ * la opción, no su nombre:
+ *
+ *   <kf-company-selector
+ *     [companies]="[
+ *       { value: '1002099', label: 'DIANA CAROLINA PINZÓN MALDONADO', tag: 'Personal', detail: 'DNI 46594489' },
+ *       { value: '1004410', label: 'TRANSPORTES VIRGEN DE LA AGRICULTURA', tag: 'Empresa', detail: 'RUC 20434860808' },
+ *     ]"
+ *     [value]="activeAccount()"
+ *     (valueChange)="activeAccount.set($event)"
+ *   />
  */
 declare class CompanySelector {
     readonly label: _angular_core.InputSignal<string>;
-    readonly companies: _angular_core.InputSignal<string[]>;
+    readonly companies: _angular_core.InputSignal<readonly (string | CompanySelectorOption)[]>;
     readonly value: _angular_core.InputSignal<string | undefined>;
     readonly meta: _angular_core.InputSignal<CompanySelectorMeta[]>;
     readonly valueChange: _angular_core.OutputEmitterRef<string>;
@@ -310,4 +334,4 @@ declare class VehicleHeader {
 }
 
 export { CompanySelector, QuotePicker, ReserveBlock, VehicleHeader };
-export type { CompanySelectorMeta, QuotePickerChip, QuotePickerSortOption, VehicleHeaderStatus };
+export type { CompanySelectorMeta, CompanySelectorOption, QuotePickerChip, QuotePickerSortOption, VehicleHeaderStatus };

package/types/kaufmann-lab-ui-core.d.ts

@@ -2628,10 +2628,16 @@ declare class Segmented {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Segmented, "kf-segmented", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
 }
 
-/** Normalized shape used internally once `options` (string[] or object[]) is resolved. */
+/**
+ * Opción en forma de objeto. `tag` se muestra como `kf-badge` a la derecha
+ * del label (en el panel y en el trigger) y `detail` como línea secundaria
+ * atenuada debajo, solo en el panel. Ambos entran en la búsqueda.
+ */
 interface SelectOption {
     value: string;
     label: string;
+    tag?: string;
+    detail?: string;
 }
 /**
  * Dropdown de selección simple con panel propio — NUNCA usa el `<select>`
@@ -2644,6 +2650,7 @@ interface SelectOption {
  *
  *   <kf-select label="Sede" [options]="['Lima', 'Arequipa', 'Trujillo']" placeholder="Selecciona…" />
  *   <kf-select [options]="[{ value: 'pe', label: 'Perú' }]" (valueChange)="onCountry($event)" />
+ *   <kf-select [options]="[{ value: '1002099', label: 'BBVA', tag: 'Empresa', detail: 'RUC 20100130204' }]" />
  *
  * `variant="compact"` cambia el ancho de `240px` fijo a intrínseco con un
  * techo de `160px` (se ajusta al contenido de la opción seleccionada hasta
@@ -2663,7 +2670,7 @@ interface SelectOption {
  */
 declare class Select {
     readonly label: _angular_core.InputSignal<string | undefined>;
-    readonly options: _angular_core.InputSignal<string[] | SelectOption[]>;
+    readonly options: _angular_core.InputSignal<readonly (string | SelectOption)[]>;
     readonly value: _angular_core.InputSignal<string | undefined>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -2695,7 +2702,7 @@ declare class Select {
     readonly isOpen: _angular_core.WritableSignal<boolean>;
     readonly searchQuery: _angular_core.WritableSignal<string>;
     readonly activeIndex: _angular_core.WritableSignal<number>;
-    /** Resolves the union (`string[] | { value; label }[]`) into a single shape for the template. */
+    /** Resolves `string | SelectOption` entries into a single shape for the template. */
     readonly normalizedOptions: _angular_core.Signal<SelectOption[]>;
     readonly selectedOption: _angular_core.Signal<SelectOption | undefined>;
     readonly showSearch: _angular_core.Signal<boolean>;
@@ -2714,6 +2721,8 @@ declare class Select {
      */
     onDocumentEscape(): void;
     toggle(): void;
+    /** Nombre accesible explícito solo para opciones con `tag`/`detail`, para separar las partes al leerlas. */
+    optionAriaLabel(option: SelectOption): string | null;
     select(option: SelectOption): void;
     onSearchInput(event: Event): void;
     /**
@@ -3456,4 +3465,4 @@ declare class ViewToggle {
 }
 
 export { ActionTile, AdminBadge, Alert, AlertRow, Avatar, Badge, Breadcrumb, BucketProgress, Button, Calendar, Card, Carousel, CarouselSlide, Checkbox, Chip, Collapsible, ContactPopover, ContentSlot, ContentState, ContentViewer, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, Divider, DocumentRow, Drawer, Dropdown, DropdownItem, DropdownPanel, EmptyState, EventTimeline, FeatureCard, Field, FieldLabel, Filter, FilterChips, FolderTabs, FolderTabsPanel, Footer, FormatInputDirective, Icon, Input, JourneyStepper, Link, MetricCard, Modal, MultiSelect, NoteBlock, PageHeader, Pagination, Panel, PortalHeader, Progress, PulseDot, RowActions, SectionHeader, SectionNav, SectionNavItem, SectionNavSubsection, Segmented, Select, SelectableCardGroup, SidebarShell, Skeleton, Spinner, StatCard, StatTile, StatusPill, Tabs, Text, Textarea, TileGrid, TimeSlotPicker, ToastHost, ToastService, TooltipDirective, ViewToggle, dataTableViewSignal };
-export type { AlertRowTone, AlertTone, BreadcrumbItem, BucketProgressItem, CalendarDay, ContentStateKind, ContentStateLoad, ContentViewerType, DataTableCardRole, DataTableColumn, DataTableDensity, DataTableSort, DataTableView, DividerOrientation, DocumentRowTone, DrawerSide, DropdownItemTone, DropdownPanelVariant, EventTimelineItem, EventTimelineTone, FilterFieldChange, FilterFieldConfig, FilterFieldType, FilterValue, FolderTabOption, FooterLink, IconName, IconRotation, IconSize, JourneyStep, JourneyStepStatus, JourneyStepperColorScheme, JourneyStepperSurface, LinkVariant, MultiSelectOption, NoteBlockTone, PageHeaderTitleSize, PaginationItem, PortalHeaderAdminAction, PortalHeaderNavItem, ProgressTone, RowAction, RowActionKind, RowActionsMode, SectionNavSubsectionData, SegmentedOption, SelectableCardOption, SidebarNavItemData, SkeletonVariant, SpinnerSize, StatCardTone, StatTileTone, StatTileVariant, TabOption, TextAs, TextTone, TextVariant, TimeSlot, ToastAction, ToastOptions, ToastPromiseMessages, ToastState, ToastTone, TooltipPosition, ViewToggleOption };
+export type { AlertRowTone, AlertTone, BreadcrumbItem, BucketProgressItem, CalendarDay, ContentStateKind, ContentStateLoad, ContentViewerType, DataTableCardRole, DataTableColumn, DataTableDensity, DataTableSort, DataTableView, DividerOrientation, DocumentRowTone, DrawerSide, DropdownItemTone, DropdownPanelVariant, EventTimelineItem, EventTimelineTone, FilterFieldChange, FilterFieldConfig, FilterFieldType, FilterValue, FolderTabOption, FooterLink, IconName, IconRotation, IconSize, JourneyStep, JourneyStepStatus, JourneyStepperColorScheme, JourneyStepperSurface, LinkVariant, MultiSelectOption, NoteBlockTone, PageHeaderTitleSize, PaginationItem, PortalHeaderAdminAction, PortalHeaderNavItem, ProgressTone, RowAction, RowActionKind, RowActionsMode, SectionNavSubsectionData, SegmentedOption, SelectOption, SelectableCardOption, SidebarNavItemData, SkeletonVariant, SpinnerSize, StatCardTone, StatTileTone, StatTileVariant, TabOption, TextAs, TextTone, TextVariant, TimeSlot, ToastAction, ToastOptions, ToastPromiseMessages, ToastState, ToastTone, TooltipPosition, ViewToggleOption };