valtech-components 2.0.948 → 2.0.949

package/lib/components/organisms/search-header/search-header.component.d.ts

@@ -0,0 +1,54 @@
+import { EventEmitter } from '@angular/core';
+import { SearchHeaderMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * `val-search-header` — header/toolbar con búsqueda desplegable.
+ *
+ * El botón de búsqueda es una ICON action del toolbar (igual que
+ * menu/avatar/notificaciones), identificada por su `token` (`searchToken`).
+ * Al presionarla se despliega un `val-searchbar` debajo del toolbar: 100% del
+ * ancho en mobile, un máximo centrado en desktop.
+ *
+ * Reusa `val-toolbar` para el header — las demás acciones se emiten por
+ * `(onAction)`. La query se emite por `(search)`.
+ *
+ * @example
+ * ```html
+ * <val-search-header
+ *   [props]="{
+ *     header: { toolbar: { title: 'AWS', withActions: true, withBack: false,
+ *       actions: [
+ *         { type: 'ICON', description: 'search-outline', token: 'search', position: 'right' },
+ *         { type: 'ICON', description: 'notifications-outline', token: 'notif', position: 'right' }
+ *       ] } },
+ *     searchbar: { placeholder: 'Buscar...' }
+ *   }"
+ *   (search)="onSearch($event)"
+ *   (onAction)="onAction($event)"
+ * >
+ *   <ion-button slot="search-actions" fill="outline">Filter: All</ion-button>
+ * </val-search-header>
+ * ```
+ */
+export declare class SearchHeaderComponent {
+    private host;
+    /** Configuración del search header. */
+    props: SearchHeaderMetadata;
+    /** Emite el token de cualquier acción del toolbar que NO sea la de búsqueda. */
+    onAction: EventEmitter<string>;
+    /** Emite la query del searchbar. */
+    search: EventEmitter<string>;
+    /** Emite al abrir/cerrar la barra de búsqueda. */
+    searchToggle: EventEmitter<boolean>;
+    /** Emite cuando el searchbar pierde el foco. */
+    blur: EventEmitter<void>;
+    private readonly _open;
+    readonly open: import("@angular/core").Signal<boolean>;
+    config: import("@angular/core").Signal<SearchHeaderMetadata & Required<Pick<SearchHeaderMetadata, "maxWidth" | "searchToken" | "startOpen" | "showClose">>>;
+    constructor();
+    handleToolbar(token?: string): void;
+    toggle(): void;
+    private focusSearchbar;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SearchHeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SearchHeaderComponent, "val-search-header", never, { "props": { "alias": "props"; "required": false; }; }, { "onAction": "onAction"; "search": "search"; "searchToggle": "searchToggle"; "blur": "blur"; }, never, ["[search-actions]"], true, never>;
+}

package/lib/components/organisms/search-header/types.d.ts

@@ -0,0 +1,31 @@
+import { HeaderMetadata } from '../header/types';
+import { SearchbarMetadata } from '../../molecules/searchbar/types';
+/**
+ * Metadata for val-search-header.
+ *
+ * Header/toolbar con un botón de búsqueda que, al presionarse, despliega un
+ * `val-searchbar` colapsable debajo del toolbar (100% del ancho en mobile, un
+ * máximo centrado en desktop). El botón de búsqueda es una ICON action más del
+ * toolbar (idéntica a menu/avatar/notificaciones): se identifica por su `token`.
+ */
+export interface SearchHeaderMetadata {
+    /** Configuración del header + toolbar (reusa val-header/val-toolbar). */
+    header: HeaderMetadata;
+    /**
+     * Token de la ICON action que dispara la búsqueda. La action correspondiente
+     * debe existir en `header.toolbar.actions`. Default: 'search'.
+     */
+    searchToken?: string;
+    /** Configuración del searchbar desplegado. */
+    searchbar?: SearchbarMetadata;
+    /** Ancho máximo de la barra en desktop (CSS). Default: '720px'. */
+    maxWidth?: string;
+    /** Si arranca con la barra abierta. Default: false. */
+    startOpen?: boolean;
+    /** Mostrar botón de cierre (X) a la derecha de la barra. Default: true. */
+    showClose?: boolean;
+}
+/**
+ * Default values for SearchHeaderMetadata.
+ */
+export declare const SEARCH_HEADER_DEFAULTS: Required<Pick<SearchHeaderMetadata, 'searchToken' | 'maxWidth' | 'startOpen' | 'showClose'>>;

package/lib/version.d.ts

@@ -2,4 +2,4 @@
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-export declare const VERSION = "2.0.948";
+export declare const VERSION = "2.0.949";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.948",
+  "version": "2.0.949",
   "private": false,
   "bin": {
     "valtech-firebase-config": "./src/lib/services/firebase/scripts/generate-sw-config.js"

package/public-api.d.ts

@@ -217,6 +217,8 @@ export * from './lib/components/organisms/form/form-footer/form-footer.component
 export * from './lib/components/organisms/form/form.component';
 export * from './lib/components/organisms/header/header.component';
 export * from './lib/components/organisms/header/types';
+export * from './lib/components/organisms/search-header/search-header.component';
+export * from './lib/components/organisms/search-header/types';
 export * from './lib/components/organisms/mfa-modal/mfa-modal.component';
 export * from './lib/components/organisms/item-list/item-list.component';
 export * from './lib/components/organisms/item-list/types';