@ng-cn/core 1.0.11 → 1.0.14

package/src/app/lib/components/ui/sheet/sheet-header.component.ts

@@ -0,0 +1,28 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * SheetHeader component - header area of the sheet.
+ * Matches shadcn/ui React SheetHeader exactly.
+ */
+@Component({
+  selector: 'SheetHeader',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SheetHeader {
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('flex flex-col space-y-2 text-center sm:text-left', this.class())
+  );
+}

package/src/app/lib/components/ui/sheet/sheet-title.component.ts

@@ -0,0 +1,34 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    input,
+} from '@angular/core';
+import { SHEET_CONTEXT } from './sheet-context';
+
+/**
+ * SheetTitle component - title text of the sheet.
+ * Matches shadcn/ui React SheetTitle exactly.
+ * Automatically links to sheet via aria-labelledby.
+ */
+@Component({
+  selector: 'SheetTitle',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.id]': 'context.titleId',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SheetTitle {
+  protected readonly context = inject(SHEET_CONTEXT);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('text-lg font-semibold text-foreground', this.class())
+  );
+}

package/src/app/lib/components/ui/sheet/sheet-trigger.component.ts

@@ -0,0 +1,38 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    inject,
+    input,
+} from '@angular/core';
+import { SHEET_CONTEXT } from './sheet-context';
+
+/**
+ * SheetTrigger component - element that opens the sheet.
+ * Matches shadcn/ui React SheetTrigger exactly.
+ */
+@Component({
+  selector: 'SheetTrigger',
+  template: `<ng-content />`,
+  host: {
+    '(click)': 'onClick($event)',
+    '[attr.aria-haspopup]': '"dialog"',
+    '[attr.aria-expanded]': 'context.open()',
+    '[attr.aria-controls]': 'context.contentId',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SheetTrigger {
+  protected readonly context = inject(SHEET_CONTEXT);
+  private readonly elementRef = inject(ElementRef<HTMLElement>);
+
+  /** Render as child */
+  readonly asChild = input<boolean>(false);
+
+  onClick(event: Event): void {
+    event.stopPropagation();
+    // Save trigger element for focus restoration
+    this.context.triggerElement.set(this.elementRef.nativeElement);
+    this.context.setOpen(true);
+  }
+}

package/src/app/lib/components/ui/sheet/sheet-variants.ts

@@ -0,0 +1,22 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export const sheetVariants = cva(
+  'fixed z-[100] gap-4 bg-background text-foreground p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  }
+);
+
+export type SheetVariants = VariantProps<typeof sheetVariants>;

package/src/app/lib/components/ui/sheet/sheet.component.ts

@@ -0,0 +1,97 @@
+import { AriaIdService } from '@/lib/utils/accessibility';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    effect,
+    forwardRef,
+    inject,
+    input,
+    output,
+    signal,
+} from '@angular/core';
+import { SHEET_CONTEXT, type SheetContextValue } from './sheet-context';
+
+/**
+ * Sheet component - a slide-out panel from any edge of the screen.
+ * Matches shadcn/ui React Sheet exactly.
+ *
+ * @example
+ * <Sheet>
+ *   <SheetTrigger>
+ *     <Button variant="outline">Open Sheet</Button>
+ *   </SheetTrigger>
+ *   <SheetContent>
+ *     <SheetHeader>
+ *       <SheetTitle>Sheet Title</SheetTitle>
+ *       <SheetDescription>Sheet description.</SheetDescription>
+ *     </SheetHeader>
+ *     Content here...
+ *   </SheetContent>
+ * </Sheet>
+ */
+@Component({
+  selector: 'Sheet',
+  template: `<ng-content />`,
+  providers: [
+    {
+      provide: SHEET_CONTEXT,
+      useExisting: forwardRef(() => Sheet),
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Sheet implements SheetContextValue {
+  private readonly ariaIdService = inject(AriaIdService);
+
+  /** Default open state */
+  readonly defaultOpen = input<boolean>(false);
+
+  /** Controlled open state */
+  readonly controlledOpen = input<boolean | undefined>(undefined, { alias: 'open' });
+
+  /** Side from which the sheet appears */
+  readonly side: 'top' | 'right' | 'bottom' | 'left' = 'right';
+
+  /** Open change event */
+  readonly openChange = output<boolean>();
+
+  private readonly _internalOpen = signal(false);
+
+  /** ARIA IDs for accessibility relationships */
+  private readonly ariaIds = this.ariaIdService.generateDialogIds('sheet');
+  readonly titleId = this.ariaIds.titleId;
+  readonly descriptionId = this.ariaIds.descriptionId;
+  readonly contentId = this.ariaIds.contentId;
+
+  /** Reference to trigger element for focus restoration */
+  readonly triggerElement = signal<HTMLElement | null>(null);
+
+  /** Computed open state - uses controlled value if provided, otherwise internal state */
+  readonly open = computed(() => {
+    const controlled = this.controlledOpen();
+    if (controlled !== undefined) {
+      return controlled;
+    }
+    return this._internalOpen();
+  });
+
+  constructor() {
+    // Sync defaultOpen on init
+    effect(() => {
+      if (this.defaultOpen() && this.controlledOpen() === undefined) {
+        this._internalOpen.set(true);
+      }
+    }, { allowSignalWrites: true });
+  }
+
+  setOpen(open: boolean): void {
+    // Always update internal state for uncontrolled mode
+    this._internalOpen.set(open);
+    this.openChange.emit(open);
+  }
+
+  isOpen(): boolean {
+    return this.open();
+  }
+}

package/src/app/lib/components/ui/sidebar/index.ts

@@ -0,0 +1,41 @@
+export { SidebarContent } from './sidebar-content.component';
+export {
+    SIDEBAR_CONTEXT,
+    SIDEBAR_COOKIE_MAX_AGE,
+    SIDEBAR_COOKIE_NAME,
+    SIDEBAR_KEYBOARD_SHORTCUT,
+    SIDEBAR_MENU_CONTEXT,
+    SIDEBAR_WIDTH,
+    SIDEBAR_WIDTH_ICON,
+    SIDEBAR_WIDTH_MOBILE,
+    type AriaCurrentValue,
+    type SidebarCollapsible,
+    type SidebarContext,
+    type SidebarSide,
+    type SidebarState,
+    type SidebarVariant
+} from './sidebar-context';
+export { SidebarFooter } from './sidebar-footer.component';
+export { SidebarGroupAction } from './sidebar-group-action.component';
+export { SidebarGroupContent } from './sidebar-group-content.component';
+export { SidebarGroupLabel } from './sidebar-group-label.component';
+export { SidebarGroup } from './sidebar-group.component';
+export { SidebarHeader } from './sidebar-header.component';
+export { SidebarInput } from './sidebar-input.component';
+export { SidebarInset } from './sidebar-inset.component';
+export { SidebarMenuAction } from './sidebar-menu-action.component';
+export { SidebarMenuBadge } from './sidebar-menu-badge.component';
+export { SidebarMenuButton } from './sidebar-menu-button.component';
+export { SidebarMenuItem } from './sidebar-menu-item.component';
+export { SidebarMenuSkeleton } from './sidebar-menu-skeleton.component';
+export { SidebarMenuSubButton } from './sidebar-menu-sub-button.component';
+export { SidebarMenuSubItem } from './sidebar-menu-sub-item.component';
+export { SidebarMenuSub } from './sidebar-menu-sub.component';
+export { SidebarMenu } from './sidebar-menu.component';
+export { SidebarProvider } from './sidebar-provider.component';
+export { SidebarRail } from './sidebar-rail.component';
+export { SidebarRouteActiveService } from './sidebar-route-active.service';
+export { SidebarSeparator } from './sidebar-separator.component';
+export { SidebarTrigger } from './sidebar-trigger.component';
+export { Sidebar } from './sidebar.component';
+

package/src/app/lib/components/ui/sidebar/sidebar-content.component.ts

@@ -0,0 +1,31 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * SidebarContent component - main content area of sidebar.
+ */
+@Component({
+  selector: 'SidebarContent',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    'data-sidebar': 'content',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SidebarContent {
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]/sidebar-wrapper:overflow-hidden',
+      this.class()
+    )
+  );
+}

package/src/app/lib/components/ui/sidebar/sidebar-context.ts

@@ -0,0 +1,33 @@
+import { InjectionToken, WritableSignal } from '@angular/core';
+
+export type SidebarState = 'expanded' | 'collapsed';
+export type SidebarSide = 'left' | 'right';
+export type SidebarVariant = 'sidebar' | 'floating' | 'inset';
+export type SidebarCollapsible = 'offcanvas' | 'icon' | 'none';
+export type AriaCurrentValue = 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';
+
+export interface SidebarContext {
+  state: WritableSignal<SidebarState>;
+  open: WritableSignal<boolean>;
+  setOpen: (open: boolean) => void;
+  openMobile: WritableSignal<boolean>;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: WritableSignal<boolean>;
+  toggleSidebar: () => void;
+}
+
+export const SIDEBAR_CONTEXT = new InjectionToken<SidebarContext>(
+  'SidebarContext'
+);
+
+export const SIDEBAR_MENU_CONTEXT = new InjectionToken<{
+  isActive: WritableSignal<boolean>;
+}>('SidebarMenuContext');
+
+// Cookie name for sidebar state persistence
+export const SIDEBAR_COOKIE_NAME = 'sidebar:state';
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7; // 7 days
+export const SIDEBAR_WIDTH = '16rem';
+export const SIDEBAR_WIDTH_MOBILE = '18rem';
+export const SIDEBAR_WIDTH_ICON = '3rem';
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b';

package/src/app/lib/components/ui/sidebar/sidebar-footer.component.ts

@@ -0,0 +1,28 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * SidebarFooter component - footer section of sidebar.
+ */
+@Component({
+  selector: 'SidebarFooter',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    'data-sidebar': 'footer',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SidebarFooter {
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('flex flex-col gap-2 p-2', this.class())
+  );
+}

package/src/app/lib/components/ui/sidebar/sidebar-group-action.component.ts

@@ -0,0 +1,33 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * SidebarGroupAction component - action button for a sidebar group.
+ */
+@Component({
+  selector: 'SidebarGroupAction',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    'data-sidebar': 'group-action',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SidebarGroupAction {
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'after:absolute after:-inset-2 after:md:hidden',
+      'group-data-[collapsible=icon]/sidebar-wrapper:hidden',
+      this.class()
+    )
+  );
+}

package/src/app/lib/components/ui/sidebar/sidebar-group-content.component.ts

@@ -0,0 +1,28 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * SidebarGroupContent component - content wrapper for sidebar group.
+ */
+@Component({
+  selector: 'SidebarGroupContent',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    'data-sidebar': 'group-content',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SidebarGroupContent {
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('w-full text-sm', this.class())
+  );
+}

package/src/app/lib/components/ui/sidebar/sidebar-group-label.component.ts

@@ -0,0 +1,32 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * SidebarGroupLabel component - label for a sidebar group.
+ */
+@Component({
+  selector: 'SidebarGroupLabel',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    'data-sidebar': 'group-label',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SidebarGroupLabel {
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'group-data-[collapsible=icon]/sidebar-wrapper:-mt-8 group-data-[collapsible=icon]/sidebar-wrapper:opacity-0',
+      this.class()
+    )
+  );
+}

package/src/app/lib/components/ui/sidebar/sidebar-group.component.ts

@@ -0,0 +1,28 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * SidebarGroup component - groups sidebar items.
+ */
+@Component({
+  selector: 'SidebarGroup',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    'data-sidebar': 'group',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SidebarGroup {
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('relative flex w-full min-w-0 flex-col p-2', this.class())
+  );
+}

package/src/app/lib/components/ui/sidebar/sidebar-header.component.ts

@@ -0,0 +1,28 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * SidebarHeader component - header section of sidebar.
+ */
+@Component({
+  selector: 'SidebarHeader',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    'data-sidebar': 'header',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SidebarHeader {
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('flex flex-col gap-2 p-2', this.class())
+  );
+}

package/src/app/lib/components/ui/sidebar/sidebar-input.component.ts

@@ -0,0 +1,31 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * SidebarInput component - input field for sidebar.
+ */
+@Component({
+  selector: 'SidebarInput',
+  template: ``,
+  host: {
+    '[class]': 'computedClass()',
+    'data-sidebar': 'input',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SidebarInput {
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
+      this.class()
+    )
+  );
+}

package/src/app/lib/components/ui/sidebar/sidebar-inset.component.ts

@@ -0,0 +1,31 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * SidebarInset component - main content area next to sidebar.
+ */
+@Component({
+  selector: 'SidebarInset',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SidebarInset {
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'relative flex min-h-svh flex-1 flex-col bg-background',
+      'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
+      this.class()
+    )
+  );
+}

package/src/app/lib/components/ui/sidebar/sidebar-menu-action.component.ts

@@ -0,0 +1,56 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * SidebarMenuAction component - action button in menu item.
+ *
+ * Provides accessible action buttons with focus and hover states.
+ * Can be configured to show on hover or remain visible.
+ */
+@Component({
+  selector: 'SidebarMenuAction',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    'data-sidebar': 'menu-action',
+    '[attr.role]': '"button"',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SidebarMenuAction {
+  /** Whether to show on hover only */
+  readonly showOnHover = input<boolean>(false);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-[background-color,color,opacity] ease-linear duration-150',
+      // Hover and focus states
+      'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+      'focus-visible:ring-2 focus-visible:ring-sidebar-ring focus-visible:ring-offset-2',
+      // Peer interactions
+      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+      // Icons
+      '[&>svg]:size-4 [&>svg]:shrink-0',
+      // Touch target expansion on mobile
+      'after:absolute after:-inset-2 after:md:hidden',
+      // Size responsive positioning
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      // Collapse behavior
+      'group-data-[collapsible=icon]/sidebar-wrapper:hidden',
+      // Show on hover behavior
+      this.showOnHover() &&
+        'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
+      this.class()
+    )
+  );
+}

package/src/app/lib/components/ui/sidebar/sidebar-menu-badge.component.ts

@@ -0,0 +1,42 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * SidebarMenuBadge component - badge in menu item.
+ *
+ * Displays badge with interactive visual feedback.
+ * Inherits color and styling from parent menu button state.
+ */
+@Component({
+  selector: 'SidebarMenuBadge',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    'data-sidebar': 'menu-badge',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SidebarMenuBadge {
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none transition-colors ease-linear duration-150',
+      // Inherit color from parent button state
+      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+      // Size responsive positioning
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      // Hide in collapsed icon mode
+      'group-data-[collapsible=icon]/sidebar-wrapper:hidden',
+      this.class()
+    )
+  );
+}