@masmarino/gabarit 1.4.0 → 2.1.0

package/types/masmarino-gabarit-pagination.d.ts

@@ -0,0 +1,109 @@
+import { FormControl } from "@angular/forms";
+import { SelectOption } from "@masmarino/gabarit/select";
+import * as i0 from "@angular/core";
+declare const ELLIPSIS: "…";
+type PaginationItem = number | typeof ELLIPSIS;
+declare function paginationRange(page: number, pageCount: number, siblingCount: number): PaginationItem[];
+export declare class Pagination {
+  page: import("@angular/core").InputSignal<number>;
+  pageSize: import("@angular/core").InputSignal<number>;
+  totalItems: import("@angular/core").InputSignal<number>;
+  siblingCount: import("@angular/core").InputSignal<number>;
+  disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  ariaLabel: import("@angular/core").InputSignal<string>;
+  previousLabel: import("@angular/core").InputSignal<string>;
+  nextLabel: import("@angular/core").InputSignal<string>;
+  pageLabel: import("@angular/core").InputSignal<(page: number) => string>;
+  pageSizeOptions: import("@angular/core").InputSignal<number[]>;
+  pageSizeLabel: import("@angular/core").InputSignal<(size: number) => string>;
+  pageSizeSelectLabel: import("@angular/core").InputSignal<string>;
+  showItemsSummary: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  itemsSummaryLabel: import("@angular/core").InputSignal<(shown: number, total: number) => string>;
+  pageChange: import("@angular/core").OutputEmitterRef<number>;
+  pageSizeChange: import("@angular/core").OutputEmitterRef<number>;
+  protected readonly ELLIPSIS: "…";
+  protected readonly pageCount: import("@angular/core").Signal<number>;
+  protected readonly items: import("@angular/core").Signal<PaginationItem[]>;
+  protected readonly itemsShown: import("@angular/core").Signal<number>;
+  protected readonly itemsSummary: import("@angular/core").Signal<string>;
+  protected readonly pageSizeSelectOptions: import("@angular/core").Signal<SelectOption<number>[]>;
+  protected readonly pageSizeControl: FormControl<number>;
+  constructor();
+  protected goTo(page: number): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<Pagination, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<Pagination, "gbt-pagination", never, {
+    "page": {
+      "alias": "page";
+      "required": false;
+      "isSignal": true;
+    };
+    "pageSize": {
+      "alias": "pageSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "totalItems": {
+      "alias": "totalItems";
+      "required": true;
+      "isSignal": true;
+    };
+    "siblingCount": {
+      "alias": "siblingCount";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "previousLabel": {
+      "alias": "previousLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "nextLabel": {
+      "alias": "nextLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "pageLabel": {
+      "alias": "pageLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "pageSizeOptions": {
+      "alias": "pageSizeOptions";
+      "required": false;
+      "isSignal": true;
+    };
+    "pageSizeLabel": {
+      "alias": "pageSizeLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "pageSizeSelectLabel": {
+      "alias": "pageSizeSelectLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "showItemsSummary": {
+      "alias": "showItemsSummary";
+      "required": false;
+      "isSignal": true;
+    };
+    "itemsSummaryLabel": {
+      "alias": "itemsSummaryLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "pageChange": "pageChange";
+    "pageSizeChange": "pageSizeChange";
+  }, never, never, true, never>;
+}

package/types/masmarino-gabarit-panel.d.ts

@@ -0,0 +1,21 @@
+import * as i0 from "@angular/core";
+type PanelHeadingLevel = 2 | 3 | 4;
+export declare class Panel {
+  heading: import("@angular/core").InputSignal<string>;
+  headingLevel: import("@angular/core").InputSignal<PanelHeadingLevel>;
+  protected readonly headingId: string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<Panel, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<Panel, "gbt-panel", never, {
+    "heading": {
+      "alias": "heading";
+      "required": true;
+      "isSignal": true;
+    };
+    "headingLevel": {
+      "alias": "headingLevel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["[panel-actions]", "*"], true, never>;
+}
+export type { PanelHeadingLevel };

package/types/masmarino-gabarit-passkey-settings.d.ts

@@ -0,0 +1,94 @@
+import { Passkey, PasskeySettingsLabels } from "@masmarino/gabarit/auth";
+import * as i0 from "@angular/core";
+type View = 'loading' | 'failed' | 'ready' | 'revoked';
+export declare class PasskeySettings {
+  private readonly mfa;
+  private readonly auth;
+  private readonly state;
+  private readonly host;
+  private readonly injector;
+  labels: import("@angular/core").InputSignal<Partial<PasskeySettingsLabels>>;
+  locale: import("@angular/core").InputSignal<string | null>;
+  sessionRevoked: import("@angular/core").OutputEmitterRef<void>;
+  protected readonly text: import("@angular/core").Signal<Readonly<PasskeySettingsLabels>>;
+  protected readonly id: string;
+  protected readonly relativeOptions: import("@angular/core").Signal<{
+    style: "short";
+    maxUnit: "day";
+    absoluteAfterDays: number;
+    locale: string | undefined;
+  }>;
+  protected readonly dateOptions: import("@angular/core").Signal<{
+    day: "2-digit";
+    month: "2-digit";
+    year: "numeric";
+    hour: "2-digit";
+    minute: "2-digit";
+    locale: string | undefined;
+  }>;
+  protected readonly absolute: (iso: string) => boolean;
+  protected view: import("@angular/core").WritableSignal<View>;
+  protected passkeys: import("@angular/core").WritableSignal<Passkey[]>;
+  protected totpEnabled: import("@angular/core").WritableSignal<boolean>;
+  private serverAvailable;
+  private readonly browserSupported;
+  protected blockedReason: import("@angular/core").Signal<string | null>;
+  protected result: import("@angular/core").WritableSignal<string | null>;
+  protected adding: import("@angular/core").WritableSignal<boolean>;
+  protected name: import("@angular/core").WritableSignal<string>;
+  protected nameError: import("@angular/core").WritableSignal<string | null>;
+  protected password: import("@angular/core").WritableSignal<string>;
+  protected passwordError: import("@angular/core").WritableSignal<string | null>;
+  protected notice: import("@angular/core").WritableSignal<string>;
+  protected noticeVariant: import("@angular/core").WritableSignal<"error" | "info">;
+  protected busy: import("@angular/core").WritableSignal<boolean>;
+  protected promptOpen: import("@angular/core").WritableSignal<boolean>;
+  private ceremony;
+  protected deleting: import("@angular/core").WritableSignal<Passkey | null>;
+  protected deletePassword: import("@angular/core").WritableSignal<string>;
+  protected deletePasswordError: import("@angular/core").WritableSignal<string | null>;
+  protected deleteNotice: import("@angular/core").WritableSignal<string>;
+  protected confirmingDelete: import("@angular/core").WritableSignal<boolean>;
+  protected deleteBusy: import("@angular/core").WritableSignal<boolean>;
+  protected count: import("@angular/core").Signal<number | null>;
+  protected appBusy: import("@angular/core").Signal<boolean>;
+  protected lastFactor: import("@angular/core").Signal<boolean>;
+  protected deleteMessage: import("@angular/core").Signal<string>;
+  constructor();
+  protected load(): void;
+  protected openAdd(): void;
+  protected cancelAdd(): void;
+  protected setName(value: string): void;
+  protected setPassword(value: string): void;
+  protected submitAdd(): void;
+  private addFailed;
+  private fail;
+  private clearNotice;
+  private resetAdd;
+  protected openDelete(passkey: Passkey): void;
+  protected cancelDelete(): void;
+  protected setDeletePassword(value: string): void;
+  protected submitDelete(): void;
+  protected closeDeleteDialog(): void;
+  protected delete(): void;
+  private deleteFailed;
+  private closeDelete;
+  private resetDelete;
+  private cancelAddQuietly;
+  private focus;
+  static ɵfac: i0.ɵɵFactoryDeclaration<PasskeySettings, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<PasskeySettings, "gbt-passkey-settings", never, {
+    "labels": {
+      "alias": "labels";
+      "required": false;
+      "isSignal": true;
+    };
+    "locale": {
+      "alias": "locale";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "sessionRevoked": "sessionRevoked";
+  }, never, never, true, never>;
+}

package/types/masmarino-gabarit-pie-chart.d.ts

@@ -0,0 +1,94 @@
+import { LegendEntry } from "@masmarino/gabarit/chart";
+import * as i0 from "@angular/core";
+interface PieSlice {
+  label: string;
+  value: number;
+}
+interface RenderedSlice {
+  label: string;
+  formattedValue: string;
+  formattedShare: string;
+  path: string;
+  color: string;
+  showLabel: boolean;
+  labelX: number;
+  labelY: number;
+  labelAnchor: 'start' | 'middle' | 'end';
+  accessibleLabel: string;
+}
+export declare class PieChart {
+  slices: import("@angular/core").InputSignal<PieSlice[]>;
+  label: import("@angular/core").InputSignal<string>;
+  locale: import("@angular/core").InputSignal<string>;
+  emptyMessage: import("@angular/core").InputSignal<string>;
+  tableCaption: import("@angular/core").InputSignal<string>;
+  categoryColumn: import("@angular/core").InputSignal<string>;
+  valueColumn: import("@angular/core").InputSignal<string>;
+  shareColumn: import("@angular/core").InputSignal<string>;
+  sliceAnnouncement: import("@angular/core").InputSignal<(label: string, value: string, share: string) => string>;
+  innerRadiusRatio: import("@angular/core").InputSignal<number>;
+  protected readonly activeIndex: import("@angular/core").WritableSignal<number | null>;
+  private readonly total;
+  protected readonly renderedSlices: import("@angular/core").Signal<RenderedSlice[]>;
+  protected readonly legendEntries: import("@angular/core").Signal<LegendEntry[]>;
+  protected readonly activeSlice: import("@angular/core").Signal<RenderedSlice | null>;
+  protected readonly columns: import("@angular/core").Signal<string[]>;
+  protected readonly tableRows: import("@angular/core").Signal<(string | number)[][]>;
+  private colorFor;
+  protected onMouseLeave(event: MouseEvent): void;
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<PieChart, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<PieChart, "gbt-pie-chart", never, {
+    "slices": {
+      "alias": "slices";
+      "required": true;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": true;
+      "isSignal": true;
+    };
+    "locale": {
+      "alias": "locale";
+      "required": true;
+      "isSignal": true;
+    };
+    "emptyMessage": {
+      "alias": "emptyMessage";
+      "required": true;
+      "isSignal": true;
+    };
+    "tableCaption": {
+      "alias": "tableCaption";
+      "required": true;
+      "isSignal": true;
+    };
+    "categoryColumn": {
+      "alias": "categoryColumn";
+      "required": true;
+      "isSignal": true;
+    };
+    "valueColumn": {
+      "alias": "valueColumn";
+      "required": true;
+      "isSignal": true;
+    };
+    "shareColumn": {
+      "alias": "shareColumn";
+      "required": true;
+      "isSignal": true;
+    };
+    "sliceAnnouncement": {
+      "alias": "sliceAnnouncement";
+      "required": true;
+      "isSignal": true;
+    };
+    "innerRadiusRatio": {
+      "alias": "innerRadiusRatio";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+export type { PieSlice };

package/types/masmarino-gabarit-popover.d.ts

@@ -0,0 +1,32 @@
+import * as i0 from "@angular/core";
+type PopoverAlign = 'start' | 'end';
+interface PopoverPosition {
+  top: string;
+  left: string | null;
+  right: string | null;
+}
+export declare class Popover {
+  private readonly elementRef;
+  private readonly triggerSlot;
+  align: import("@angular/core").InputSignal<PopoverAlign>;
+  readonly panelId: string;
+  private readonly isOpen;
+  readonly open: import("@angular/core").Signal<boolean>;
+  protected readonly position: import("@angular/core").WritableSignal<PopoverPosition | null>;
+  toggle(): void;
+  close(returnFocus?: boolean): void;
+  protected onTriggerClick(event: MouseEvent): void;
+  protected updatePosition(): void;
+  protected handleClickOutside(event: MouseEvent): void;
+  protected onKeydown(event: KeyboardEvent): void;
+  private focusTrigger;
+  static ɵfac: i0.ɵɵFactoryDeclaration<Popover, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<Popover, "gbt-popover", ["gbtPopover"], {
+    "align": {
+      "alias": "align";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*", "[popover-content]"], true, never>;
+}
+export type { PopoverAlign };

package/types/masmarino-gabarit-radio-group.d.ts

@@ -0,0 +1,66 @@
+import { ControlValueAccessor } from "@angular/forms";
+import * as i0 from "@angular/core";
+interface RadioOption<T = string> {
+  value: T;
+  label: string;
+  disabled?: boolean;
+}
+export declare class RadioGroup<T = string> implements ControlValueAccessor {
+  id: import("@angular/core").InputSignal<string>;
+  label: import("@angular/core").InputSignal<string>;
+  options: import("@angular/core").InputSignal<RadioOption<T>[]>;
+  orientation: import("@angular/core").InputSignal<"vertical" | "horizontal">;
+  disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  errorMessage: import("@angular/core").InputSignal<string | null>;
+  protected readonly selected: import("@angular/core").WritableSignal<T | null>;
+  private readonly formDisabled;
+  protected readonly isDisabled: import("@angular/core").Signal<boolean>;
+  private onChange;
+  private onTouched;
+  writeValue(value: T | null): void;
+  registerOnChange(fn: (value: T) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(isDisabled: boolean): void;
+  protected isSelected(value: T): boolean;
+  protected selectOption(value: T): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RadioGroup<any>, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RadioGroup<any>, "gbt-radio-group", never, {
+    "id": {
+      "alias": "id";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": true;
+      "isSignal": true;
+    };
+    "options": {
+      "alias": "options";
+      "required": true;
+      "isSignal": true;
+    };
+    "orientation": {
+      "alias": "orientation";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "errorMessage": {
+      "alias": "errorMessage";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+export type { RadioOption };

package/types/masmarino-gabarit-save-status.d.ts

@@ -0,0 +1,39 @@
+import * as i0 from "@angular/core";
+type SaveStatusState = 'idle' | 'saving' | 'saved' | 'error';
+export declare class SaveStatus {
+  state: import("@angular/core").InputSignal<SaveStatusState>;
+  savingLabel: import("@angular/core").InputSignal<string>;
+  savedLabel: import("@angular/core").InputSignal<string>;
+  errorLabel: import("@angular/core").InputSignal<string>;
+  message: import("@angular/core").InputSignal<string | null>;
+  protected readonly text: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<SaveStatus, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<SaveStatus, "gbt-save-status", never, {
+    "state": {
+      "alias": "state";
+      "required": false;
+      "isSignal": true;
+    };
+    "savingLabel": {
+      "alias": "savingLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "savedLabel": {
+      "alias": "savedLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "errorLabel": {
+      "alias": "errorLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "message": {
+      "alias": "message";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+export type { SaveStatusState };

package/types/masmarino-gabarit-search-bar.d.ts

@@ -0,0 +1,183 @@
+import * as i0 from "@angular/core";
+import { ElementRef, TemplateRef } from "@angular/core";
+interface SearchResultCategory<T = unknown> {
+  label: string;
+  icon?: string;
+  items: T[];
+}
+type SearchBarCollapsible = boolean | 'narrow';
+export declare class SearchBar<T = unknown> {
+  private readonly elementRef;
+  private readonly injector;
+  id: import("@angular/core").InputSignal<string>;
+  results: import("@angular/core").InputSignal<T[] | null>;
+  groupedResults: import("@angular/core").InputSignal<SearchResultCategory<T>[] | null>;
+  placeholder: import("@angular/core").InputSignal<string>;
+  ariaLabel: import("@angular/core").InputSignal<string>;
+  displayFn: import("@angular/core").InputSignal<(item: T) => string>;
+  itemTemplate: import("@angular/core").InputSignal<TemplateRef<unknown> | undefined>;
+  keepQueryOnSelect: import("@angular/core").InputSignal<boolean>;
+  noResultsMessage: import("@angular/core").InputSignal<string>;
+  noResultsHint: import("@angular/core").InputSignal<string>;
+  clearLabel: import("@angular/core").InputSignal<string>;
+  resultsAnnouncement: import("@angular/core").InputSignal<(count: number) => string>;
+  navigateHint: import("@angular/core").InputSignal<string>;
+  selectHint: import("@angular/core").InputSignal<string>;
+  closeHint: import("@angular/core").InputSignal<string>;
+  collapsible: import("@angular/core").InputSignalWithTransform<SearchBarCollapsible, string | boolean | null | undefined>;
+  expanded: import("@angular/core").ModelSignal<boolean>;
+  openLabel: import("@angular/core").InputSignal<string>;
+  closeLabel: import("@angular/core").InputSignal<string>;
+  queryChange: import("@angular/core").OutputEmitterRef<string>;
+  itemSelected: import("@angular/core").OutputEmitterRef<T>;
+  clear: import("@angular/core").OutputEmitterRef<void>;
+  protected readonly isFocused: import("@angular/core").WritableSignal<boolean>;
+  protected readonly showResults: import("@angular/core").WritableSignal<boolean>;
+  protected readonly searchQuery: import("@angular/core").WritableSignal<string>;
+  protected readonly activeIndex: import("@angular/core").WritableSignal<number>;
+  protected readonly searchInput: import("@angular/core").Signal<ElementRef<HTMLInputElement> | undefined>;
+  private readonly toggleButton;
+  protected readonly collapsibleMode: import("@angular/core").Signal<"narrow" | "always" | null>;
+  protected readonly folded: import("@angular/core").Signal<boolean>;
+  protected readonly triggerId: import("@angular/core").Signal<string>;
+  private readonly hasGroupedResultsInput;
+  protected readonly allVisibleItems: import("@angular/core").Signal<T[]>;
+  protected readonly showOverlay: import("@angular/core").Signal<boolean>;
+  protected readonly panelId: import("@angular/core").Signal<string>;
+  protected itemDomId(index: number): string;
+  protected readonly indexedGroupedResults: import("@angular/core").Signal<{
+    indexedItems: {
+      item: T;
+      index: number;
+      formatted: string;
+    }[];
+    label: string;
+    icon?: string;
+    items: T[];
+  }[] | null>;
+  protected readonly indexedResults: import("@angular/core").Signal<{
+    item: T;
+    index: number;
+    formatted: string;
+  }[]>;
+  protected readonly activeItemDomId: import("@angular/core").Signal<string | null>;
+  protected readonly resultCount: import("@angular/core").Signal<number>;
+  protected readonly hasGroupedResults: import("@angular/core").Signal<boolean>;
+  protected readonly hasNoResults: import("@angular/core").Signal<boolean>;
+  protected onNavigationKeydown(event: KeyboardEvent): void;
+  protected handleClickOutside(event: MouseEvent): void;
+  focusSearch(): void;
+  protected blurSearch(): void;
+  protected onFocus(): void;
+  protected expand(): void;
+  private fold;
+  protected close(event: Event): void;
+  protected onBlur(event?: FocusEvent): void;
+  protected onInput(event: Event): void;
+  protected onClear(): void;
+  protected onSelect(item: T): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<SearchBar<any>, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<SearchBar<any>, "gbt-search-bar", never, {
+    "id": {
+      "alias": "id";
+      "required": false;
+      "isSignal": true;
+    };
+    "results": {
+      "alias": "results";
+      "required": false;
+      "isSignal": true;
+    };
+    "groupedResults": {
+      "alias": "groupedResults";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "displayFn": {
+      "alias": "displayFn";
+      "required": false;
+      "isSignal": true;
+    };
+    "itemTemplate": {
+      "alias": "itemTemplate";
+      "required": false;
+      "isSignal": true;
+    };
+    "keepQueryOnSelect": {
+      "alias": "keepQueryOnSelect";
+      "required": false;
+      "isSignal": true;
+    };
+    "noResultsMessage": {
+      "alias": "noResultsMessage";
+      "required": false;
+      "isSignal": true;
+    };
+    "noResultsHint": {
+      "alias": "noResultsHint";
+      "required": false;
+      "isSignal": true;
+    };
+    "clearLabel": {
+      "alias": "clearLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "resultsAnnouncement": {
+      "alias": "resultsAnnouncement";
+      "required": false;
+      "isSignal": true;
+    };
+    "navigateHint": {
+      "alias": "navigateHint";
+      "required": false;
+      "isSignal": true;
+    };
+    "selectHint": {
+      "alias": "selectHint";
+      "required": false;
+      "isSignal": true;
+    };
+    "closeHint": {
+      "alias": "closeHint";
+      "required": false;
+      "isSignal": true;
+    };
+    "collapsible": {
+      "alias": "collapsible";
+      "required": false;
+      "isSignal": true;
+    };
+    "expanded": {
+      "alias": "expanded";
+      "required": false;
+      "isSignal": true;
+    };
+    "openLabel": {
+      "alias": "openLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "closeLabel": {
+      "alias": "closeLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "expanded": "expandedChange";
+    "queryChange": "queryChange";
+    "itemSelected": "itemSelected";
+    "clear": "clear";
+  }, never, never, true, never>;
+}
+export type { SearchBarCollapsible, SearchResultCategory };