@gntik-ai/blocks 0.0.0-stage → 0.5.0

package/src/tables/FilterBar/FilterBar.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { FilterBar } from './FilterBar';
+
+describe('FilterBar', () => {
+  it('renders search, controls and the default chips', async () => {
+    const { container } = render(<FilterBar resultCount={12} />);
+    expect(screen.getByRole('search', { name: 'Filters' })).toBeInTheDocument();
+    expect(screen.getByRole('searchbox', { name: 'Search' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Remove filter Status: Running' })).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('adds, removes and clears filters', async () => {
+    const user = userEvent.setup();
+    const onFiltersChange = vi.fn();
+    const onQueryChange = vi.fn();
+    render(<FilterBar onFiltersChange={onFiltersChange} onQueryChange={onQueryChange} />);
+    await user.click(screen.getByRole('button', { name: 'Remove filter Region: eu-west-1' }));
+    expect(onFiltersChange).toHaveBeenLastCalledWith([{ field: 'status', value: 'Running' }]);
+    await user.click(screen.getByRole('button', { name: 'Add filter' }));
+    await user.click(await screen.findByRole('menuitemcheckbox', { name: 'Failed' }));
+    await user.keyboard('{Escape}');
+    expect(screen.getByRole('button', { name: 'Remove filter Status: Failed' })).toBeInTheDocument();
+    await user.type(screen.getByRole('searchbox', { name: 'Search' }), 'api');
+    expect(onQueryChange).toHaveBeenLastCalledWith('api');
+    await user.click(screen.getByRole('button', { name: 'Clear all' }));
+    expect(onFiltersChange).toHaveBeenLastCalledWith([]);
+    expect(screen.queryByRole('list', { name: 'Active filters' })).toBeNull();
+  });
+
+  it('applies a saved view', async () => {
+    const user = userEvent.setup();
+    const onViewChange = vi.fn();
+    render(<FilterBar onViewChange={onViewChange} />);
+    await user.click(screen.getByRole('combobox', { name: 'Saved view' }));
+    await user.click(await screen.findByRole('option', { name: 'Needs attention' }));
+    expect(onViewChange).toHaveBeenCalledWith(expect.objectContaining({ value: 'attention' }));
+    expect(screen.getByRole('button', { name: 'Remove filter Status: Degraded' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Remove filter Status: Running' })).toBeNull();
+  });
+});

package/src/tables/FilterBar/FilterBar.tsx

@@ -0,0 +1,199 @@
+import { ListFilter, Plus, Search } from '@gntik-ai/icons';
+import {
+  Button,
+  cn,
+  Input,
+  Menu,
+  MenuCheckboxItem,
+  MenuContent,
+  MenuGroup,
+  MenuGroupLabel,
+  MenuSeparator,
+  MenuTrigger,
+  SimpleSelect,
+  Token,
+  useI18n,
+} from '@gntik-ai/ui';
+import { Fragment, useState } from 'react';
+import { DEPLOYMENT_DEFAULT_FILTERS, DEPLOYMENT_FILTER_FIELDS, DEPLOYMENT_SAVED_VIEWS } from './fixtures';
+
+export interface FilterField {
+  id: string;
+  label: string;
+  options: readonly string[];
+}
+
+export interface ActiveFilter {
+  field: string;
+  value: string;
+}
+
+export interface SavedView {
+  value: string;
+  label: string;
+  query?: string;
+  filters: readonly ActiveFilter[];
+}
+
+export interface FilterBarProps {
+  fields?: readonly FilterField[];
+  /** Search text (controlled). */
+  query?: string;
+  defaultQuery?: string;
+  onQueryChange?: (query: string) => void;
+  /** Active filters (controlled). */
+  filters?: readonly ActiveFilter[];
+  defaultFilters?: readonly ActiveFilter[];
+  onFiltersChange?: (filters: ActiveFilter[]) => void;
+  /** Saved views; picking one applies its query and filters. Empty hides the Select. */
+  views?: readonly SavedView[];
+  defaultView?: string | null;
+  onViewChange?: (view: SavedView) => void;
+  searchLabel?: string;
+  placeholder?: string;
+  /** Optional result count shown at the end ("12 results"). */
+  resultCount?: number;
+  className?: string;
+}
+
+const same = (a: ActiveFilter, b: ActiveFilter) => a.field === b.field && a.value === b.value;
+
+/**
+ * Filter bar: search Input, saved views Select, an "Add filter" Menu (multi-select per field),
+ * removable filter chips (Token) and Clear all.
+ */
+export function FilterBar({
+  fields = DEPLOYMENT_FILTER_FIELDS,
+  query: queryProp,
+  defaultQuery = '',
+  onQueryChange,
+  filters: filtersProp,
+  defaultFilters = DEPLOYMENT_DEFAULT_FILTERS,
+  onFiltersChange,
+  views = DEPLOYMENT_SAVED_VIEWS,
+  defaultView = null,
+  onViewChange,
+  searchLabel: searchLabelProp,
+  placeholder = 'Search by name…',
+  resultCount,
+  className,
+}: FilterBarProps) {
+  const { t } = useI18n();
+  const searchLabel = searchLabelProp ?? t('common.search');
+  const [innerQuery, setInnerQuery] = useState(defaultQuery);
+  const [innerFilters, setInnerFilters] = useState<readonly ActiveFilter[]>(defaultFilters);
+  const [view, setView] = useState<string | null>(defaultView);
+  const query = queryProp ?? innerQuery;
+  const filters = filtersProp ?? innerFilters;
+
+  const setQuery = (next: string) => {
+    setInnerQuery(next);
+    onQueryChange?.(next);
+  };
+  const setFilters = (next: ActiveFilter[], keepView = false) => {
+    setInnerFilters(next);
+    onFiltersChange?.(next);
+    if (!keepView) setView(null);
+  };
+  const toggle = (filter: ActiveFilter, on: boolean) =>
+    setFilters(on ? [...filters.filter((f) => !same(f, filter)), filter] : filters.filter((f) => !same(f, filter)));
+  const applyView = (value: string | null) => {
+    const picked = views.find((v) => v.value === value);
+    if (!picked) return;
+    setView(picked.value);
+    setFilters([...picked.filters], true);
+    if (picked.query !== undefined) setQuery(picked.query);
+    onViewChange?.(picked);
+  };
+  const clearAll = () => {
+    setFilters([]);
+    setQuery('');
+  };
+  const labelOf = (id: string) => fields.find((f) => f.id === id)?.label ?? id;
+  const hasAny = filters.length > 0 || query !== '';
+
+  return (
+    <div role="search" aria-label={t('filters.label')} className={cn('flex flex-col gap-3', className)}>
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+        <Input
+          aria-label={searchLabel}
+          type="search"
+          size="sm"
+          leadingIcon={Search}
+          placeholder={placeholder}
+          value={query}
+          onValueChange={(v) => setQuery(String(v))}
+          className="w-full sm:max-w-xs"
+        />
+        <div className="flex flex-wrap items-center gap-2">
+          {views.length > 0 && (
+            <SimpleSelect
+              aria-label={t('filters.savedView')}
+              size="sm"
+              placeholder={t('filters.savedViews')}
+              value={view}
+              onValueChange={applyView}
+              items={views.map((v) => ({ value: v.value, label: v.label }))}
+              className="min-w-[160px]"
+            />
+          )}
+          <Menu>
+            <MenuTrigger render={<Button variant="secondary" size="sm" icon={Plus} />}>{t('filters.add')}</MenuTrigger>
+            <MenuContent className="max-h-80 min-w-[220px] overflow-y-auto">
+              {fields.map((field, i) => (
+                <Fragment key={field.id}>
+                  {i > 0 && <MenuSeparator />}
+                  <MenuGroup>
+                    <MenuGroupLabel>{field.label}</MenuGroupLabel>
+                    {field.options.map((option) => {
+                      const filter = { field: field.id, value: option };
+                      return (
+                        <MenuCheckboxItem
+                          key={option}
+                          checked={filters.some((f) => same(f, filter))}
+                          onCheckedChange={(on) => toggle(filter, on)}
+                        >
+                          {option}
+                        </MenuCheckboxItem>
+                      );
+                    })}
+                  </MenuGroup>
+                </Fragment>
+              ))}
+            </MenuContent>
+          </Menu>
+        </div>
+        {resultCount !== undefined && (
+          <p className="text-[12.5px] text-muted-foreground sm:ms-auto" aria-live="polite">
+            <span className="font-mono text-foreground tabular-nums">{resultCount.toLocaleString('en-US')}</span>{' '}
+            {resultCount === 1 ? 'result' : 'results'}
+          </p>
+        )}
+      </div>
+      {hasAny && (
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="inline-flex items-center gap-1.5 font-mono text-[10px] tracking-[0.14em] text-muted-foreground uppercase">
+            <ListFilter size={12} aria-hidden />
+            Filters
+          </span>
+          <ul aria-label={t('filters.active')} className="flex flex-wrap items-center gap-2">
+            {filters.map((f) => (
+              <li key={`${f.field}:${f.value}`} className="flex">
+                <Token
+                  size="sm"
+                  prefix={`${labelOf(f.field)}:`}
+                  label={f.value}
+                  removeLabel={t('filters.remove', { field: labelOf(f.field), value: f.value })}
+                  onRemove={() => toggle(f, false)}
+                />
+              </li>
+            ))}
+          </ul>
+          <Button variant="ghost" size="sm" className="h-7 px-2 hover:text-destructive-text" onClick={clearAll}>
+            Clear all
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/tables/FilterBar/block.meta.ts

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Filter bar',
+  family: 'tables',
+  status: 'beta',
+  description:
+    'Search Input, saved views Select, an Add filter Menu with multi-select per field, removable filter chips and Clear all.',
+  uses: ['Input', 'SimpleSelect', 'Menu', 'MenuCheckboxItem', 'Token', 'Button'],
+};

package/src/tables/FilterBar/fixtures.ts

@@ -0,0 +1,32 @@
+import type { ActiveFilter, FilterField, SavedView } from './FilterBar';
+
+export const DEPLOYMENT_FILTER_FIELDS: FilterField[] = [
+  { id: 'status', label: 'Status', options: ['Running', 'Queued', 'Paused', 'Degraded', 'Failed'] },
+  { id: 'region', label: 'Region', options: ['eu-west-1', 'us-east-1', 'ap-south-1', 'eu-central-1'] },
+  { id: 'owner', label: 'Owner', options: ['Platform team', 'Payments team', 'Data team'] },
+];
+
+export const DEPLOYMENT_DEFAULT_FILTERS: ActiveFilter[] = [
+  { field: 'status', value: 'Running' },
+  { field: 'region', value: 'eu-west-1' },
+];
+
+export const DEPLOYMENT_SAVED_VIEWS: SavedView[] = [
+  { value: 'all', label: 'All deployments', filters: [] },
+  {
+    value: 'attention',
+    label: 'Needs attention',
+    filters: [
+      { field: 'status', value: 'Degraded' },
+      { field: 'status', value: 'Failed' },
+    ],
+  },
+  {
+    value: 'eu',
+    label: 'EU regions',
+    filters: [
+      { field: 'region', value: 'eu-west-1' },
+      { field: 'region', value: 'eu-central-1' },
+    ],
+  },
+];

package/src/tables/InlineEditRow/InlineEditRow.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { InlineEditTable } from './InlineEditRow';
+
+describe('InlineEditRow', () => {
+  it('renders the editable table in read mode', async () => {
+    const { container } = render(<InlineEditTable />);
+    expect(screen.getByRole('table', { name: 'Members' })).toBeInTheDocument();
+    expect(screen.getAllByRole('button', { name: /^Edit / })).toHaveLength(3);
+    await expectNoAxeViolations(container);
+  });
+
+  it('edits, saves with Enter and returns focus', async () => {
+    const user = userEvent.setup();
+    const onRowSave = vi.fn();
+    const { container } = render(<InlineEditTable onRowSave={onRowSave} />);
+    await user.click(screen.getByRole('button', { name: 'Edit Sam Carter' }));
+    const name = screen.getByRole('textbox', { name: 'Name' });
+    expect(name).toHaveFocus();
+    await expectNoAxeViolations(container);
+    await user.clear(name);
+    await user.type(name, 'Sam Rivera{Enter}');
+    expect(onRowSave).toHaveBeenCalledWith(expect.objectContaining({ id: 'm2', name: 'Sam Rivera', seats: 2 }));
+    expect(screen.getByRole('cell', { name: 'Sam Rivera' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Edit Sam Rivera' })).toHaveFocus();
+  });
+
+  it('cancels with Escape and blocks empty required fields', async () => {
+    const user = userEvent.setup();
+    render(<InlineEditTable />);
+    await user.click(screen.getByRole('button', { name: 'Edit Ana Lopez' }));
+    const row = screen.getByRole('textbox', { name: 'Name' }).closest('tr')!;
+    await user.clear(screen.getByRole('textbox', { name: 'Name' }));
+    expect(within(row).getByRole('button', { name: 'Save' })).toBeDisabled();
+    await user.keyboard('{Escape}');
+    expect(screen.queryByRole('textbox')).toBeNull();
+    expect(screen.getByRole('cell', { name: 'Ana Lopez' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Edit Ana Lopez' })).toHaveFocus();
+  });
+});

package/src/tables/InlineEditRow/InlineEditRow.tsx

@@ -0,0 +1,215 @@
+import { Check, Pencil, X } from '@gntik-ai/icons';
+import {
+  cn,
+  IconButton,
+  Input,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  useI18n,
+} from '@gntik-ai/ui';
+import { useEffect, useRef, useState, type KeyboardEvent } from 'react';
+import { EDITABLE_MEMBER_FIELDS, EDITABLE_MEMBERS, type EditableMember } from './fixtures';
+
+type Editable = string | number;
+
+export interface InlineEditField<T> {
+  key: Extract<keyof T, string>;
+  label: string;
+  type?: 'text' | 'number' | 'email';
+  align?: 'left' | 'right';
+  required?: boolean;
+  /** Read-mode cell classes. */
+  className?: string;
+}
+
+export interface InlineEditRowProps<T extends object> {
+  row: T;
+  fields: ReadonlyArray<InlineEditField<T>>;
+  /** Called with the edited row on Save (or Enter). */
+  onSave?: (next: T) => void;
+  onCancel?: () => void;
+  /** Row name for the Edit button label ("Edit Ana Lopez"). */
+  rowLabel?: string;
+  /** Start in edit mode. */
+  defaultEditing?: boolean;
+}
+
+const read = <T extends object>(row: T, key: string): Editable => {
+  const v = (row as Record<string, unknown>)[key];
+  return typeof v === 'number' ? v : v == null ? '' : String(v);
+};
+
+/**
+ * A table row that switches into edit mode: inputs replace the cells, with Save and Cancel.
+ * Enter saves, Escape cancels; focus moves to the first input and back to Edit afterwards.
+ */
+export function InlineEditRow<T extends object>({
+  row,
+  fields,
+  onSave,
+  onCancel,
+  rowLabel,
+  defaultEditing = false,
+}: InlineEditRowProps<T>) {
+  const { t } = useI18n();
+  const [editing, setEditing] = useState(defaultEditing);
+  const [draft, setDraft] = useState<Record<string, string>>({});
+  const editRef = useRef<HTMLButtonElement>(null);
+  const firstInputRef = useRef<HTMLInputElement>(null);
+  const restoreFocus = useRef(false);
+  const label = rowLabel ?? String(read(row, fields[0]?.key ?? ''));
+
+  useEffect(() => {
+    if (editing) firstInputRef.current?.focus();
+    else if (restoreFocus.current) {
+      restoreFocus.current = false;
+      editRef.current?.focus();
+    }
+  }, [editing]);
+
+  const start = () => {
+    setDraft(Object.fromEntries(fields.map((f) => [f.key, String(read(row, f.key))])));
+    setEditing(true);
+  };
+  const finish = () => {
+    restoreFocus.current = true;
+    setEditing(false);
+  };
+  const invalid = (f: InlineEditField<T>) => f.required === true && (draft[f.key] ?? '').trim() === '';
+  const save = () => {
+    if (fields.some(invalid)) return;
+    const next = { ...row } as Record<string, unknown>;
+    for (const f of fields) {
+      const value = draft[f.key] ?? '';
+      next[f.key] = f.type === 'number' ? Number(value) : value;
+    }
+    onSave?.(next as T);
+    finish();
+  };
+  const cancel = () => {
+    onCancel?.();
+    finish();
+  };
+  const onKeyDown = (event: KeyboardEvent<HTMLTableRowElement>) => {
+    if (!editing) return;
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      cancel();
+    } else if (event.key === 'Enter' && event.target instanceof HTMLInputElement) {
+      event.preventDefault();
+      save();
+    }
+  };
+
+  return (
+    <TableRow selected={editing} onKeyDown={onKeyDown} data-editing={editing || undefined}>
+      {fields.map((f, i) => (
+        <TableCell key={f.key} align={f.align} className={cn(!editing && f.className, editing && 'py-1.5')}>
+          {editing ? (
+            <Input
+              ref={i === 0 ? firstInputRef : undefined}
+              aria-label={f.label}
+              type={f.type ?? 'text'}
+              size="sm"
+              required={f.required}
+              invalid={invalid(f)}
+              value={draft[f.key] ?? ''}
+              onValueChange={(v) => setDraft((d) => ({ ...d, [f.key]: String(v) }))}
+              inputClassName={f.align === 'right' ? 'text-end' : undefined}
+              className="min-w-24"
+            />
+          ) : (
+            read(row, f.key)
+          )}
+        </TableCell>
+      ))}
+      <TableCell align="right" className="w-24 py-1.5 whitespace-nowrap">
+        {editing ? (
+          <span className="inline-flex gap-1">
+            <IconButton
+              icon={Check}
+              label={t('common.save')}
+              size="sm"
+              variant="soft"
+              onClick={save}
+              disabled={fields.some(invalid)}
+            />
+            <IconButton icon={X} label={t('common.cancel')} size="sm" variant="ghost" onClick={cancel} />
+          </span>
+        ) : (
+          <IconButton
+            ref={editRef}
+            icon={Pencil}
+            label={t('table.editRow', { label })}
+            size="sm"
+            variant="ghost"
+            onClick={start}
+          />
+        )}
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export interface InlineEditTableProps<T extends object> {
+  rows?: readonly T[];
+  fields?: ReadonlyArray<InlineEditField<T>>;
+  getRowId?: (row: T) => string;
+  caption?: string;
+  /** Called with the saved row; rows also update locally. */
+  onRowSave?: (row: T) => void;
+  className?: string;
+}
+
+/** Standalone demo of InlineEditRow: a small editable table that keeps its rows in state. */
+export function InlineEditTable<T extends object = EditableMember>({
+  rows: initialRows = EDITABLE_MEMBERS as unknown as readonly T[],
+  fields = EDITABLE_MEMBER_FIELDS as unknown as ReadonlyArray<InlineEditField<T>>,
+  getRowId = (row) => String((row as { id?: unknown }).id ?? ''),
+  caption = 'Members',
+  onRowSave,
+  className,
+}: InlineEditTableProps<T>) {
+  const { t } = useI18n();
+  const [rows, setRows] = useState<readonly T[]>(initialRows);
+  return (
+    <div className={cn('overflow-hidden rounded-xl border border-border bg-card shadow-sm', className)}>
+      <Table>
+        <TableCaption srOnly>{caption}</TableCaption>
+        <TableHeader>
+          <TableRow className="hover:bg-transparent">
+            {fields.map((f) => (
+              <TableHead key={f.key} align={f.align}>
+                {f.label}
+              </TableHead>
+            ))}
+            <TableHead align="right">
+              <span className="sr-only">{t('table.actions')}</span>
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {rows.map((row) => {
+            const id = getRowId(row);
+            return (
+              <InlineEditRow
+                key={id}
+                row={row}
+                fields={fields}
+                onSave={(next) => {
+                  setRows((prev) => prev.map((r) => (getRowId(r) === id ? next : r)));
+                  onRowSave?.(next);
+                }}
+              />
+            );
+          })}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

package/src/tables/InlineEditRow/block.meta.ts

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Inline edit row',
+  family: 'tables',
+  status: 'beta',
+  description:
+    'A table row that switches into edit mode with inputs, Save and Cancel; Enter saves, Escape cancels and focus returns to Edit. InlineEditTable is a ready-made editable table.',
+  uses: ['Table', 'Input', 'IconButton'],
+};

package/src/tables/InlineEditRow/fixtures.ts

@@ -0,0 +1,28 @@
+import type { InlineEditField } from './InlineEditRow';
+
+export interface EditableMember {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  seats: number;
+}
+
+export const EDITABLE_MEMBER_FIELDS: InlineEditField<EditableMember>[] = [
+  { key: 'name', label: 'Name', required: true },
+  {
+    key: 'email',
+    label: 'Email',
+    type: 'email',
+    required: true,
+    className: 'font-mono text-[12px] text-muted-foreground',
+  },
+  { key: 'role', label: 'Role' },
+  { key: 'seats', label: 'Seats', type: 'number', align: 'right', className: 'font-mono text-[12.5px]' },
+];
+
+export const EDITABLE_MEMBERS: EditableMember[] = [
+  { id: 'm1', name: 'Ana Lopez', email: 'ana@example.com', role: 'Owner', seats: 3 },
+  { id: 'm2', name: 'Sam Carter', email: 'sam@example.com', role: 'Admin', seats: 2 },
+  { id: 'm3', name: 'Priya Nair', email: 'priya@example.com', role: 'Member', seats: 1 },
+];

package/src/tables/PaginationFooter/PaginationFooter.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { PaginationFooter } from './PaginationFooter';
+
+describe('PaginationFooter', () => {
+  it('renders the summary and pagination', async () => {
+    const { container } = render(<PaginationFooter />);
+    expect(screen.getByText('1–10')).toBeInTheDocument();
+    expect(screen.getByRole('navigation', { name: 'Rows pagination' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Page 10' })).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('pages and changes the page size', async () => {
+    const user = userEvent.setup();
+    const onPageChange = vi.fn();
+    const onPageSizeChange = vi.fn();
+    render(<PaginationFooter onPageChange={onPageChange} onPageSizeChange={onPageSizeChange} />);
+    await user.click(screen.getByRole('button', { name: 'Next page' }));
+    expect(onPageChange).toHaveBeenLastCalledWith(2);
+    expect(screen.getByText('11–20')).toBeInTheDocument();
+    await user.click(screen.getByRole('combobox', { name: 'Rows per page' }));
+    await user.click(await screen.findByRole('option', { name: '25' }));
+    expect(onPageSizeChange).toHaveBeenCalledWith(25);
+    expect(screen.getByText('1–25')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Page 4' })).toBeInTheDocument();
+  });
+});