@datatechsolutions/tympan 0.3.0 → 0.3.1

package/src/components/brand-wordmark/BrandWordmark.css

@@ -0,0 +1,37 @@
+/* BrandWordmark (element-first: <ty-brand-wordmark>; docs/design/single-source-components.md). */
+@layer tympan.components {
+  .ty-brand-wordmark {
+    color: var(--ty-ink);
+    font-family: var(--ty-font-serif);
+    font-size: var(--ty-font-size-h3);
+    font-weight: var(--ty-font-weight-semibold);
+    letter-spacing: var(--ty-font-tracking-h1);
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .ty-brand-wordmark[data-size='small'] {
+    font-size: var(--ty-font-size-body-lg);
+  }
+  .ty-brand-wordmark[data-size='large'] {
+    font-size: var(--ty-font-size-display);
+  }
+
+  /* The accent segment in the brand gradient, clipped to the glyphs. */
+  .ty-brand-wordmark__accent {
+    background-image: linear-gradient(100deg, var(--ty-info), var(--ty-brand) 55%, var(--ty-brand-strong));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+
+  @media (forced-colors: active) {
+    .ty-brand-wordmark {
+      color: CanvasText;
+    }
+    .ty-brand-wordmark__accent {
+      background: none;
+      color: CanvasText;
+      forced-color-adjust: none;
+    }
+  }
+}

package/src/components/breadcrumbs/Breadcrumbs.css

@@ -0,0 +1,158 @@
+/* Breadcrumbs (spec: wave-1/breadcrumbs.md; design direction §2.2, §2.3). */
+@layer tympan.components {
+  .ty-breadcrumbs {
+    min-inline-size: 0;
+    font-size: var(--ty-font-size-label);
+    line-height: var(--ty-font-line-height-label);
+  }
+
+  .ty-breadcrumbs__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ty-space-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .ty-breadcrumbs__item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ty-space-1);
+    min-inline-size: 0;
+  }
+
+  .ty-breadcrumbs__label,
+  .ty-breadcrumbs__current,
+  .ty-breadcrumbs__back-label,
+  .ty-breadcrumbs__title {
+    display: inline-block;
+    max-inline-size: 16rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: bottom;
+  }
+
+  .ty-breadcrumbs__link {
+    position: relative;
+  }
+
+  .ty-breadcrumbs__current {
+    color: var(--ty-ink);
+    font-weight: var(--ty-font-weight-semibold);
+  }
+
+  .ty-breadcrumbs__separator {
+    inline-size: 0.9em;
+    block-size: 0.9em;
+    color: var(--ty-ink-3);
+  }
+
+  .ty-breadcrumbs__bar {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    gap: var(--ty-space-2);
+    min-block-size: var(--ty-control-target);
+  }
+  .ty-breadcrumbs__back .ty-link {
+    gap: var(--ty-space-1);
+  }
+  .ty-breadcrumbs__center {
+    justify-self: center;
+    color: var(--ty-ink);
+    font-weight: var(--ty-font-weight-semibold);
+  }
+  .ty-breadcrumbs__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--ty-space-1);
+  }
+
+  /* <ty-breadcrumbs> resolves `mode="auto"` by hiding the unused container;
+     the class display would beat the UA's [hidden]. */
+  .ty-breadcrumbs__list[hidden],
+  .ty-breadcrumbs__bar[hidden] {
+    display: none;
+  }
+
+  /* <ty-breadcrumbs>: the overflow of collapsed middle levels — a native
+     disclosure whose toggle shows an ellipsis. */
+  .ty-breadcrumbs__overflow {
+    position: relative;
+    display: inline-flex;
+  }
+  .ty-breadcrumbs__overflow-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--ty-space-7, 1.75rem);
+    min-block-size: 1.75rem;
+    padding-inline: var(--ty-space-1);
+    border-radius: var(--ty-radius-control);
+    color: var(--ty-ink-3);
+    cursor: pointer;
+    list-style: none;
+  }
+  .ty-breadcrumbs__overflow-toggle::-webkit-details-marker {
+    display: none;
+  }
+  .ty-breadcrumbs__overflow-toggle:hover {
+    color: var(--ty-ink);
+    background: var(--ty-surface-sunken);
+  }
+  .ty-breadcrumbs__overflow-toggle:focus-visible {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 2px;
+  }
+  .ty-breadcrumbs__overflow[open] .ty-breadcrumbs__overflow-toggle {
+    color: var(--ty-ink);
+    background: var(--ty-surface-sunken);
+  }
+  .ty-breadcrumbs__overflow-list {
+    position: absolute;
+    inset-block-start: calc(100% + var(--ty-space-1));
+    inset-inline-start: 0;
+    z-index: var(--ty-z-popover);
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-1);
+    min-inline-size: 10rem;
+    margin: 0;
+    padding: var(--ty-space-2);
+    list-style: none;
+    border: 1px solid var(--ty-line);
+    border-radius: var(--ty-radius-control);
+    background: var(--ty-surface-raised-solid);
+    box-shadow: var(--ty-shadow-floating);
+  }
+
+  /* Touch: every link keeps a 44 px hit height. */
+  @media (max-width: 1023.98px) {
+    .ty-breadcrumbs__link::before {
+      content: '';
+      position: absolute;
+      inset-inline: 0;
+      inset-block-start: 50%;
+      block-size: max(100%, var(--ty-control-target));
+      transform: translateY(-50%);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ty-breadcrumbs * {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ty-breadcrumbs .ty-link {
+      color: LinkText;
+    }
+    .ty-breadcrumbs__current {
+      color: CanvasText;
+    }
+  }
+}

package/src/components/breadcrumbs/Breadcrumbs.test.tsx

@@ -0,0 +1,104 @@
+import { screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { cssOf, mediaBlock } from '../../../test/css'
+import { setViewportWidth } from '../../../test/media'
+import { renderWithProvider } from '../../../test/render'
+import { Breadcrumbs } from './Breadcrumbs'
+
+import { expectNoAxeViolations as axeRtl } from '../../../test/axe'
+import { renderRtl } from '../../../test/rtl'
+
+const three = [
+  { label: 'Organisation', href: '/org' },
+  { label: 'Project', href: '/org/project' },
+  { label: 'Sources', href: '/org/project/sources' },
+]
+
+describe('Breadcrumbs', () => {
+  it('renders a named navigation with two links and the current page', () => {
+    renderWithProvider(<Breadcrumbs items={three} />, { navigate: vi.fn() })
+    const nav = screen.getByRole('navigation', { name: 'Breadcrumb' })
+    expect(within(nav).getAllByRole('link')).toHaveLength(2)
+    const current = within(nav).getByText('Sources')
+    expect(current).toHaveAttribute('aria-current', 'page')
+    expect(current.closest('a')).toBeNull()
+    expect(nav.querySelector('ol')).not.toBeNull()
+    nav.querySelectorAll('.ty-breadcrumbs__separator').forEach((s) => expect(s).toHaveAttribute('aria-hidden', 'true'))
+  })
+
+  it('shows only a back link below 640 px in auto mode', () => {
+    setViewportWidth(500)
+    renderWithProvider(<Breadcrumbs items={three} />, { navigate: vi.fn() })
+    const links = screen.getAllByRole('link')
+    expect(links).toHaveLength(1)
+    expect(links[0]).toHaveAccessibleName('Back to Project')
+    expect(links[0]).toHaveAttribute('href', '/org/project')
+  })
+
+  it('points the compact back link to rootHref when there is one item', () => {
+    renderWithProvider(<Breadcrumbs mode="compact" items={[{ label: 'Projects', href: '/projects' }]} rootHref="/" rootLabel="Home" />, {
+      navigate: vi.fn(),
+    })
+    expect(screen.getByRole('link', { name: 'Back to Home' })).toHaveAttribute('href', '/')
+  })
+
+  it('collapses middle items into an overflow menu', async () => {
+    const navigate = vi.fn()
+    const five = [
+      { label: 'A', href: '/a' },
+      { label: 'B', href: '/b' },
+      { label: 'C', href: '/c' },
+      { label: 'D', href: '/d' },
+      { label: 'E', href: '/e' },
+    ]
+    renderWithProvider(<Breadcrumbs items={five} maxVisible={3} />, { navigate })
+    const nav = screen.getByRole('navigation', { name: 'Breadcrumb' })
+    expect(within(nav).getByRole('link', { name: 'A' })).toBeInTheDocument()
+    expect(within(nav).getByRole('link', { name: 'D' })).toBeInTheDocument()
+    expect(within(nav).getByText('E')).toHaveAttribute('aria-current', 'page')
+    expect(within(nav).queryByRole('link', { name: 'B' })).not.toBeInTheDocument()
+    await userEvent.click(within(nav).getByRole('button', { name: 'Show hidden levels' }))
+    await userEvent.click(await screen.findByRole('menuitem', { name: 'C' }))
+    expect(navigate).toHaveBeenCalledWith('/c', undefined)
+  })
+
+  it('navigates through the router adapter', async () => {
+    const navigate = vi.fn()
+    renderWithProvider(<Breadcrumbs items={three} />, { navigate })
+    await userEvent.click(screen.getByRole('link', { name: 'Project' }))
+    expect(navigate).toHaveBeenCalledWith('/org/project', undefined)
+  })
+
+  it('renders a compact bar with title and actions', () => {
+    renderWithProvider(<Breadcrumbs mode="compact" items={three} actions={<button type="button">Share</button>} />, { navigate: vi.fn() })
+    expect(screen.getByText('Sources')).toHaveAttribute('aria-current', 'page')
+    expect(screen.getByRole('button', { name: 'Share' })).toBeInTheDocument()
+  })
+
+  it('keeps full labels for truncation, 44 px touch targets and system colours', () => {
+    renderWithProvider(<Breadcrumbs items={three} />, { navigate: vi.fn() })
+    expect(screen.getByText('Project')).toHaveAttribute('title', 'Project')
+    const css = cssOf('components/breadcrumbs/Breadcrumbs.css')
+    expect(mediaBlock(css, /\(max-width:\s*1023\.98px\)/)).toMatch(/var\(--ty-control-target\)/)
+    const forced = mediaBlock(css, /\(forced-colors:\s*active\)/)
+    expect(forced).toMatch(/LinkText/)
+    expect(forced).toMatch(/CanvasText/)
+  })
+
+  it('has no axe violations', async () => {
+    const { container } = renderWithProvider(<Breadcrumbs items={three} />, { navigate: vi.fn() })
+    await expectNoAxeViolations(container)
+  })
+})
+
+describe('Breadcrumbs in right-to-left (ar)', () => {
+  it('renders mirrored where directional and passes axe', async () => {
+    const { container } = renderRtl(<Breadcrumbs mode="trail" items={[{ label: 'الجامعة', href: '/org' }, { label: 'التعداد', href: '/org/c' }, { label: 'القاعدة', href: '/org/c/b' }]} />, { navigate: () => {} })
+    const separators = container.querySelectorAll('.ty-breadcrumbs__separator')
+    expect(separators.length).toBeGreaterThan(0)
+    for (const s of separators) expect(s).toHaveClass('ty-mirror-rtl')
+    await axeRtl(container)
+  })
+})

package/src/components/breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,130 @@
+import { ArrowLeft, ChevronRight, Ellipsis } from 'lucide-react'
+import type { ReactNode } from 'react'
+import { cx } from '../../internal/cx'
+import { breakpoints, useMinWidth } from '../../internal/media'
+import { useMessages } from '../../internal/provider'
+import { ActionMenu } from '../action-menu/ActionMenu'
+import { Button } from '../button/Button'
+import { Link } from '../link/Link'
+
+export interface BreadcrumbItem {
+  label: string
+  href: string
+}
+
+export interface BreadcrumbsProps {
+  /** Ancestors then the current page (the last item is current). */
+  items: BreadcrumbItem[]
+  /** Accessible name of the navigation landmark. */
+  label?: string
+  /** `auto` shows the trail at 640 px and above, compact below. */
+  mode?: 'trail' | 'compact' | 'auto'
+  /** Parent used in compact mode when there is only one item. */
+  rootHref?: string
+  rootLabel?: string
+  /** Collapses middle items into an overflow menu when exceeded. */
+  maxVisible?: number
+  /** Trailing slot of the compact bar. */
+  actions?: ReactNode
+  /** Replaces the centred title of the compact bar. */
+  centerContent?: ReactNode
+  className?: string
+}
+
+type Entry = { kind: 'item'; item: BreadcrumbItem; index: number } | { kind: 'overflow'; items: BreadcrumbItem[] }
+
+function visibleEntries(items: BreadcrumbItem[], maxVisible?: number): Entry[] {
+  const all: Entry[] = items.map((item, index) => ({ kind: 'item', item, index }))
+  if (!maxVisible || items.length <= maxVisible || maxVisible < 2) return all
+  const tail = maxVisible - 1
+  return [all[0]!, { kind: 'overflow', items: items.slice(1, items.length - tail) }, ...all.slice(items.length - tail)]
+}
+
+/** Where the page sits in the hierarchy (spec: wave-1/breadcrumbs.md). */
+export function Breadcrumbs(props: BreadcrumbsProps) {
+  const { items, label, mode = 'auto', rootHref, rootLabel, maxVisible, actions, centerContent, className } = props
+  const messages = useMessages()
+  const wide = useMinWidth(breakpoints.sm)
+  const navLabel = label ?? messages.breadcrumbs.label
+  const compact = mode === 'compact' || (mode === 'auto' && !wide)
+  const current = items[items.length - 1]
+
+  if (compact) {
+    const parent = items.length > 1 ? items[items.length - 2] : rootHref ? { href: rootHref, label: rootLabel ?? '' } : undefined
+    return (
+      <nav aria-label={navLabel} className={cx('ty-breadcrumbs', className)} data-mode="compact">
+        <div className="ty-breadcrumbs__bar">
+          <div className="ty-breadcrumbs__back">
+            {parent ? (
+              <Link href={parent.href} emphasis="subtle" standalone aria-label={messages.breadcrumbs.backTo(parent.label)}>
+                <ArrowLeft className="ty-icon ty-mirror-rtl" aria-hidden="true" focusable="false" />
+                <span className="ty-breadcrumbs__back-label">{parent.label}</span>
+              </Link>
+            ) : null}
+          </div>
+          {centerContent !== undefined || actions ? (
+            <div className="ty-breadcrumbs__center">
+              {centerContent ?? (
+                <span className="ty-breadcrumbs__title" aria-current="page">
+                  {current?.label}
+                </span>
+              )}
+            </div>
+          ) : null}
+          {actions ? <div className="ty-breadcrumbs__actions">{actions}</div> : null}
+        </div>
+      </nav>
+    )
+  }
+
+  const entries = visibleEntries(items, maxVisible)
+  return (
+    <nav aria-label={navLabel} className={cx('ty-breadcrumbs', className)} data-mode="trail">
+      <ol className="ty-breadcrumbs__list">
+        {entries.map((entry, i) => {
+          const isLast = i === entries.length - 1
+          const separator = isLast ? null : <ChevronRight className="ty-icon ty-mirror-rtl ty-breadcrumbs__separator" aria-hidden="true" focusable="false" />
+          if (entry.kind === 'overflow') {
+            return (
+              <li key="overflow" className="ty-breadcrumbs__item">
+                <ActionMenu
+                  label={messages.breadcrumbs.overflow}
+                  items={entry.items.map((it, n) => ({ id: `${n}:${it.href}`, label: it.label, href: it.href }))}
+                  onAction={() => {}}
+                  trigger={
+                    <Button
+                      variant="quiet"
+                      size="compact"
+                      iconOnly
+                      accessibleLabel={messages.breadcrumbs.overflow}
+                      leadingIcon={<Ellipsis />}
+                    />
+                  }
+                />
+                {separator}
+              </li>
+            )
+          }
+          const { item } = entry
+          const isCurrent = entry.index === items.length - 1
+          return (
+            <li key={`${entry.index}:${item.href}`} className="ty-breadcrumbs__item">
+              {isCurrent ? (
+                <span className="ty-breadcrumbs__current" aria-current="page" title={item.label}>
+                  {item.label}
+                </span>
+              ) : (
+                <Link href={item.href} emphasis="subtle" className="ty-breadcrumbs__link">
+                  <span className="ty-breadcrumbs__label" title={item.label}>
+                    {item.label}
+                  </span>
+                </Link>
+              )}
+              {separator}
+            </li>
+          )
+        })}
+      </ol>
+    </nav>
+  )
+}

package/src/components/button/Button.css

@@ -0,0 +1,214 @@
+/* Button (spec: wave-1/button.md; design direction §2.6, §2.7, §2.10). */
+@layer tympan.components {
+  .ty-button {
+    --ty-button-height: var(--ty-control-height);
+    --ty-button-padding-inline: var(--ty-space-4);
+    --ty-button-fill: var(--ty-secondary);
+    --ty-button-ink: var(--ty-on-secondary);
+    --ty-button-border: var(--ty-line-strong);
+
+    position: relative;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ty-space-2);
+    min-block-size: var(--ty-button-height);
+    padding-block: 0;
+    padding-inline: var(--ty-button-padding-inline);
+    border: 1px solid var(--ty-button-border);
+    border-radius: var(--ty-radius-control);
+    background: var(--ty-button-fill);
+    color: var(--ty-button-ink);
+    font: inherit;
+    font-family: var(--ty-font-sans);
+    font-size: var(--ty-font-size-body);
+    font-weight: var(--ty-font-weight-semibold);
+    line-height: var(--ty-font-line-height-label);
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    transition:
+      background-color var(--ty-dur-instant) var(--ty-ease),
+      border-color var(--ty-dur-instant) var(--ty-ease),
+      color var(--ty-dur-instant) var(--ty-ease),
+      transform var(--ty-dur-instant) var(--ty-ease);
+    outline: none;
+  }
+
+  /* Invisible hit area: at least 44 x 44 px whatever the visible size (§2.10). */
+  .ty-button::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    /* physical: centring with translate(-50%) is the same in both directions */
+    left: 50%;
+    inline-size: max(100%, var(--ty-control-target));
+    block-size: max(100%, var(--ty-control-target));
+    transform: translate(-50%, -50%);
+  }
+
+  .ty-button[data-size='compact'] {
+    --ty-button-height: var(--ty-control-height-compact);
+    --ty-button-padding-inline: var(--ty-space-3);
+    font-size: var(--ty-font-size-label);
+  }
+
+  .ty-button[data-size='large'] {
+    --ty-button-height: calc(var(--ty-control-height) + var(--ty-space-2));
+    --ty-button-padding-inline: var(--ty-space-5);
+    font-size: var(--ty-font-size-body-lg);
+  }
+
+  .ty-button[data-shape='pill'],
+  .ty-button[data-shape='circle'] {
+    border-radius: var(--ty-radius-pill);
+  }
+
+  .ty-button[data-icon-only] {
+    inline-size: var(--ty-button-height);
+    padding-inline: 0;
+  }
+
+  .ty-button[data-full-width] {
+    display: flex;
+    inline-size: 100%;
+  }
+
+  /* Variants */
+  .ty-button[data-variant='primary'] {
+    --ty-button-fill: var(--ty-cta);
+    --ty-button-ink: var(--ty-on-cta);
+    --ty-button-border: transparent;
+  }
+
+  .ty-button[data-variant='quiet'] {
+    --ty-button-fill: transparent;
+    --ty-button-ink: var(--ty-ink-2);
+    --ty-button-border: transparent;
+  }
+
+  .ty-button[data-variant='danger'] {
+    --ty-button-fill: transparent;
+    --ty-button-ink: var(--ty-danger);
+    --ty-button-border: var(--ty-danger);
+  }
+
+  /* States */
+  .ty-button[data-hovered]:not([data-disabled], [data-soft-disabled], [data-busy]) {
+    --ty-button-border: var(--ty-ink-3);
+  }
+  .ty-button[data-variant='primary'][data-hovered]:not([data-disabled], [data-soft-disabled], [data-busy]) {
+    --ty-button-fill: var(--ty-cta-solid);
+    --ty-button-border: transparent;
+  }
+  .ty-button[data-variant='quiet'][data-hovered]:not([data-disabled], [data-soft-disabled], [data-busy]) {
+    --ty-button-fill: var(--ty-surface-sunken);
+    --ty-button-border: transparent;
+  }
+  .ty-button[data-variant='danger'][data-hovered]:not([data-disabled], [data-soft-disabled], [data-busy]) {
+    --ty-button-fill: var(--ty-danger-soft);
+    --ty-button-ink: var(--ty-on-danger-soft);
+    --ty-button-border: var(--ty-danger);
+  }
+
+  /* Pressed: slight inward feedback, no lift (§2.7). */
+  .ty-button[data-pressed] {
+    transform: scale(0.98);
+  }
+
+  .ty-button[data-focus-visible] {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 2px;
+  }
+  /* Double ring on the gradient primary (§2.6). */
+  .ty-button[data-variant='primary'][data-focus-visible] {
+    outline: none;
+    box-shadow:
+      0 0 0 2px var(--ty-bg),
+      0 0 0 calc(2px + var(--ty-focus-width)) var(--ty-focus-ring);
+  }
+
+  .ty-button[data-disabled],
+  .ty-button[data-soft-disabled] {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  .ty-button[data-busy] {
+    cursor: progress;
+  }
+
+  .ty-button[data-current] {
+    --ty-button-fill: var(--ty-accent-soft);
+    --ty-button-ink: var(--ty-accent);
+  }
+
+  .ty-button__icon {
+    display: inline-flex;
+    flex: none;
+  }
+  .ty-button__icon > svg,
+  .ty-button .ty-icon {
+    inline-size: 1.15em;
+    block-size: 1.15em;
+  }
+
+  .ty-button__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .ty-button__busy {
+    animation: ty-button-spin 900ms linear infinite;
+  }
+
+  @keyframes ty-button-spin {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+
+  /* Touch step below 1024 px (§2.10). */
+  @media (max-width: 1023.98px) {
+    .ty-button:not([data-size='compact']) {
+      --ty-button-height: var(--ty-control-height-touch);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ty-button {
+      transition: none;
+    }
+    .ty-button[data-pressed] {
+      transform: none;
+      opacity: 0.85;
+    }
+    .ty-button__busy {
+      animation: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ty-button {
+      border: 1px solid ButtonText;
+      background: ButtonFace;
+      color: ButtonText;
+      forced-color-adjust: none;
+    }
+    .ty-button[data-focus-visible],
+    .ty-button[data-variant='primary'][data-focus-visible] {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+    .ty-button[data-disabled],
+    .ty-button[data-soft-disabled] {
+      border-color: GrayText;
+      color: GrayText;
+      opacity: 1;
+    }
+  }
+}