@kaufmann-lab/ui 0.1.8 → 0.1.9

package/package.json

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

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

@@ -206,7 +206,7 @@ declare class Avatar {
  * no existe un `-strong` para secondary todavía — usa el color base).
  */
 declare class Badge {
-    readonly tone: _angular_core.InputSignal<"error" | "info" | "ok" | "warn" | "neutral" | "service">;
+    readonly tone: _angular_core.InputSignal<"info" | "ok" | "warn" | "error" | "neutral" | "service">;
     readonly dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Badge, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Badge, "kf-badge", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
@@ -393,7 +393,7 @@ declare class Checkbox implements ControlValueAccessor {
  * de superficie/borde/texto-muted más cercanos).
  */
 declare class Chip {
-    readonly tone: _angular_core.InputSignal<"error" | "ok" | "warn" | "neutral">;
+    readonly tone: _angular_core.InputSignal<"ok" | "warn" | "error" | "neutral">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Chip, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Chip, "kf-chip", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
@@ -881,6 +881,21 @@ interface FolderTabOption {
     label: string;
     icon?: IconName;
 }
+/**
+ * Marca el contenido que `kf-folder-tabs` debe proyectar dentro de su
+ * panel. Sin lógica propia — existe solo como token de tipo para que
+ * `contentChild(FolderTabsPanel)` pueda detectar si el consumidor proyectó
+ * algo (mismo mecanismo que `kf-dropdown` usa con `contentChild(DropdownPanel)`;
+ * acá no hace falta un componente completo, alcanza con una directiva de
+ * atributo porque el panel no necesita comportamiento propio, solo marcar
+ * su presencia).
+ *
+ *   <div kf-folder-tabs-panel>...</div>
+ */
+declare class FolderTabsPanel {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FolderTabsPanel, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FolderTabsPanel, "[kf-folder-tabs-panel]", never, {}, {}, never, never, true, never>;
+}
 /**
  * Tabs con forma de "carpeta": el borde superior queda redondeado y el borde
  * inferior de la pestaña activa se funde visualmente con el panel de
@@ -891,20 +906,61 @@ interface FolderTabOption {
  * `--active` se mueve de un botón a otro, y eso vuelve a disparar el keyframe
  * sin tocar JS.
  *
- * El consumidor es responsable de renderizar el panel de contenido debajo;
- * este componente solo resuelve la fila de pestañas y emite `valueChange`.
- *
+ * El panel de contenido es un `<ng-content>` OPCIONAL — si el consumidor no
+ * proyecta nada, `kf-folder-tabs` renderiza solo la fila de pestañas (mismo
+ * comportamiento que antes de que existiera este slot, detectado con
+ * `contentChild()` sin `.required`, igual patrón que usa `kf-dropdown` para
+ * saber si hay un `kf-dropdown-panel` proyectado). Si SÍ proyecta contenido,
+ * se envuelve en un panel con la esquina superior-izquierda recta (nace ahí
+ * la primera pestaña, siempre pegada al borde izquierdo de la fila — un
+ * radio ahí competiría visualmente con el propio borde redondeado de esa
+ * pestaña) y las otras tres redondeadas. El `border-bottom` de 2px de la
+ * pestaña activa (ver `.kf-folder-tabs__tab--active` más abajo) es la señal
+ * visual de conexión con el panel para CUALQUIER pestaña activa, sin
+ * necesitar mover ni medir nada.
+ *
+ * El borde izquierdo de toda la fila (y por lo tanto de la esquina recta
+ * del panel) depende de que ninguna pestaña se corra al cambiar de estado
+ * — ver `transform-origin: bottom left` en `.kf-folder-tabs__tab`: con el
+ * origen centrado (como estaba antes), el `scale()` de la pestaña inactiva
+ * encogía el borde izquierdo unos px, y ese corrimiento sub-pixel es lo que
+ * hacía que este mismo diseño (esquina fija) se viera "roto" cuando la
+ * pestaña activa no era la primera. Con el origen anclado a la izquierda,
+ * el corrimiento desaparece y la esquina fija vuelve a ser una solución
+ * válida y simple — sin necesitar medir la pestaña activa por JS.
+ *
+ * Antes de este slot, el patrón era que el consumidor pusiera su propia
+ * card como HERMANO de `kf-folder-tabs` y anulara a mano el radio superior
+ * completo (`border-top-left-radius: 0`, `border-top-right-radius: 0` — ver
+ * el caso original de `web-portal-latam-frontend`). Encapsular esto acá
+ * evita que cada consumidor repita esas reglas a mano.
+ *
+ *   <kf-folder-tabs [options]="tabs" [value]="active" (valueChange)="active = $event">
+ *     <div kf-folder-tabs-panel>contenido de la pestaña activa</div>
+ *   </kf-folder-tabs>
+ *
+ *   <!-- o, sin contenido, como antes: -->
  *   <kf-folder-tabs [options]="tabs" [value]="active" (valueChange)="active = $event" />
  */
 declare class FolderTabs {
     readonly options: _angular_core.InputSignal<FolderTabOption[]>;
     readonly value: _angular_core.InputSignal<string>;
     readonly valueChange: _angular_core.OutputEmitterRef<string>;
+    /**
+     * Detecta si el consumidor proyectó contenido marcado con
+     * `kf-folder-tabs-panel` — sin `.required`, así que es `undefined`
+     * cuando no hay nada proyectado (mismo patrón que usa `kf-dropdown` con
+     * `contentChild(DropdownPanel)` para saber si hay un panel que
+     * attachear). `hasPanel()` decide si el wrapper del panel participa del
+     * layout (`display: contents` si no).
+     */
+    private readonly projectedPanel;
+    protected readonly hasPanel: _angular_core.Signal<boolean>;
     select(value: string): void;
     /** Navegación estándar de ARIA tabs: flechas mueven el foco y activan la pestaña. */
     onKeydown(event: KeyboardEvent, currentValue: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FolderTabs, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FolderTabs, "kf-folder-tabs", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FolderTabs, "kf-folder-tabs", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, { "valueChange": "valueChange"; }, ["projectedPanel"], ["[kf-folder-tabs-panel]"], true, never>;
 }
 
 /**
@@ -1258,12 +1314,29 @@ interface PortalHeaderAdminAction {
  * Es distinto de `kf-page-header`/`kf-page-head` (título de una vista
  * interna) — este es el chrome global del portal, se monta una sola vez.
  *
+ * `:host` es `position: sticky; top: 0` — el header queda pegado arriba al
+ * hacer scroll. No es `fixed`: como no se superpone al contenido en el
+ * primer render, no hace falta que el consumidor compense con
+ * `padding-top`.
+ *
+ * Bajo los 768px, el `<nav>` deja de mostrarse en línea junto al logo y
+ * colapsa detrás de un botón de menú (ícono `menu`/`x`) que despliega un
+ * drawer lateral (desde el borde derecho, `position: fixed` + overlay de
+ * fondo) con los mismos `navItems` en columna. Ese drawer expone un slot
+ * (`<ng-content select="[kf-portal-header-extra]">`) al final, pensado
+ * para que el consumidor proyecte contenido propio que en escritorio vive
+ * en otro lugar (ej. el menú de sesión) — `PortalHeader` no sabe qué es
+ * ese contenido ni cómo se abre, solo le da un lugar dentro del drawer ya
+ * desplegado. El overlay cierra el drawer al tocarlo, y `Escape` también.
+ *
  *   <kf-portal-header
  *     [isAdmin]="true"
  *     [adminActions]="[{ label: 'Consultar deuda clientes', href: '/deuda' }, { label: 'Cambiar DNI', href: '/dni' }]"
  *     [navItems]="[{ label: 'Home', href: '/', active: true }, { label: 'Vehículos', href: '/vehiculos' }]"
  *     userInitials="TS"
- *   />
+ *   >
+ *     <div kf-portal-header-extra>contenido propio, solo visible en el panel mobile</div>
+ *   </kf-portal-header>
  */
 declare class PortalHeader {
     readonly brand: _angular_core.InputSignal<string>;
@@ -1272,8 +1345,23 @@ declare class PortalHeader {
     readonly navItems: _angular_core.InputSignal<PortalHeaderNavItem[]>;
     readonly userInitials: _angular_core.InputSignal<string>;
     readonly sessionClick: _angular_core.OutputEmitterRef<void>;
+    /** Visibilidad del drawer de navegación mobile (bajo los 768px). */
+    protected readonly mobileMenuOpen: _angular_core.WritableSignal<boolean>;
+    /** Cierra el drawer con Escape — mismo patrón que cualquier drawer/modal. */
+    protected onEscape(): void;
+    /**
+     * `ElementRef` real del botón de sesión (el avatar en la esquina
+     * derecha), no de todo el header. Pensado para anclar un `kf-dropdown`
+     * externo — sin esto, el único `ElementRef` disponible desde afuera es el
+     * del host de `PortalHeader`, que ocupa el ancho completo de la pantalla
+     * (logo + nav + sesión), y el overlay del CDK termina "pegado" a la
+     * esquina del header entero en vez de al botón que el usuario clickeó.
+     *
+     *   <kf-dropdown [(open)]="menuOpen" [anchor]="header().sessionButtonRef()">
+     */
+    readonly sessionButtonRef: _angular_core.Signal<ElementRef<any>>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PortalHeader, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PortalHeader, "kf-portal-header", never, { "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "isAdmin": { "alias": "isAdmin"; "required": false; "isSignal": true; }; "adminActions": { "alias": "adminActions"; "required": false; "isSignal": true; }; "navItems": { "alias": "navItems"; "required": false; "isSignal": true; }; "userInitials": { "alias": "userInitials"; "required": true; "isSignal": true; }; }, { "sessionClick": "sessionClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PortalHeader, "kf-portal-header", never, { "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "isAdmin": { "alias": "isAdmin"; "required": false; "isSignal": true; }; "adminActions": { "alias": "adminActions"; "required": false; "isSignal": true; }; "navItems": { "alias": "navItems"; "required": false; "isSignal": true; }; "userInitials": { "alias": "userInitials"; "required": true; "isSignal": true; }; }, { "sessionClick": "sessionClick"; }, never, ["[kf-portal-header-extra]"], true, never>;
 }
 
 /**
@@ -1522,7 +1610,7 @@ declare class StatTile {
  *   <kf-status-pill tone="error" dot>Fuera de servicio</kf-status-pill>
  */
 declare class StatusPill {
-    readonly tone: _angular_core.InputSignal<"error" | "ok" | "warn" | "blue">;
+    readonly tone: _angular_core.InputSignal<"ok" | "warn" | "error" | "blue">;
     readonly dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatusPill, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatusPill, "kf-status-pill", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
@@ -1754,5 +1842,5 @@ declare class ViewToggle {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ViewToggle, "kf-view-toggle", never, { "view": { "alias": "view"; "required": true; "isSignal": true; }; }, { "viewChange": "viewChange"; }, never, never, true, never>;
 }
 
-export { ActionTile, AdminBadge, Alert, Avatar, Badge, Breadcrumb, Button, Card, Carousel, CarouselSlide, Checkbox, Chip, CompanySelector, ContentSlot, ContentState, DataTable, Divider, Dropdown, DropdownItem, DropdownPanel, EmptyState, FeatureCard, Field, FieldLabel, FilterChips, FolderTabs, Icon, Input, Link, MetricCard, Modal, MultiSelect, PageHeader, Pagination, Panel, PortalHeader, ReserveBlock, SectionHeader, Segmented, Select, Skeleton, Spinner, StatTile, StatusPill, Tabs, Text, ToastHost, ToastService, VehicleHeader, ViewToggle };
+export { ActionTile, AdminBadge, Alert, Avatar, Badge, Breadcrumb, Button, Card, Carousel, CarouselSlide, Checkbox, Chip, CompanySelector, ContentSlot, ContentState, DataTable, Divider, Dropdown, DropdownItem, DropdownPanel, EmptyState, FeatureCard, Field, FieldLabel, FilterChips, FolderTabs, FolderTabsPanel, Icon, Input, Link, MetricCard, Modal, MultiSelect, PageHeader, Pagination, Panel, PortalHeader, ReserveBlock, SectionHeader, Segmented, Select, Skeleton, Spinner, StatTile, StatusPill, Tabs, Text, ToastHost, ToastService, VehicleHeader, ViewToggle };
 export type { AlertTone, BreadcrumbItem, CompanySelectorMeta, ContentStateKind, ContentStateLoad, DataTableCardRole, DataTableColumn, DataTableView, DividerOrientation, DropdownItemTone, FolderTabOption, IconName, IconSize, LinkVariant, MultiSelectOption, PaginationItem, PortalHeaderAdminAction, PortalHeaderNavItem, SegmentedOption, SkeletonVariant, SpinnerSize, TabOption, TextAs, TextTone, TextVariant, ToastOptions, ToastPromiseMessages, ToastState, ToastTone, VehicleHeaderStatus, ViewToggleOption };