+
+
+
+
+
+
+
+
+ @if (showClearBtn() && value() !== undefined) {
+
+ }
+
+
+
+
+
+
+ @for (option of filteredOptions(); track option) {
+
+ }
+
+
+
+
+
+ @if (loading()) {
+ {{ loadingText() }}
+ } @else {
+ {{ emptyText() }}
+ }
+
+
+
+ @if (_uniqueErrors().length === 1) {
+ {{ _uniqueErrors()[0]?.message }}
+ } @else if (_uniqueErrors().length > 1) {
+
+
+ `,
+})
+export class HlmFieldError {
+ public readonly userClass = input-
+ @for (error of _uniqueErrors(); track $index) {
+ @if (error?.message) {
+
- {{ error?.message }} + } + } +
+
+ }
+ `,
+})
+export class HlmResizableHandle {
+ protected readonly _brnResizableHandle = inject(BrnResizableHandle);
+
+ constructor() {
+ classes(
+ () =>
+ 'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-none data-[panel-group-direction=horizontal]:hover:cursor-ew-resize data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:hover:cursor-ns-resize [&[data-panel-group-direction=vertical]>div]:rotate-90',
+ );
+ }
+}
diff --git a/libs/ui/resizable/src/lib/hlm-resizable-panel.ts b/libs/ui/resizable/src/lib/hlm-resizable-panel.ts
new file mode 100644
index 00000000..96586a02
--- /dev/null
+++ b/libs/ui/resizable/src/lib/hlm-resizable-panel.ts
@@ -0,0 +1,16 @@
+import { Directive } from '@angular/core';
+import { BrnResizablePanel } from '@spartan-ng/brain/resizable';
+
+@Directive({
+ selector: '[hlmResizablePanel],hlm-resizable-panel',
+ hostDirectives: [
+ {
+ directive: BrnResizablePanel,
+ inputs: ['defaultSize', 'id', 'collapsible', 'maxSize', 'minSize'],
+ },
+ ],
+ host: {
+ 'data-slot': 'resizable-panel',
+ },
+})
+export class HlmResizablePanel {}
diff --git a/libs/ui/scroll-area/src/index.ts b/libs/ui/scroll-area/src/index.ts
new file mode 100644
index 00000000..7176ff42
--- /dev/null
+++ b/libs/ui/scroll-area/src/index.ts
@@ -0,0 +1,5 @@
+import { HlmScrollArea } from './lib/hlm-scroll-area';
+
+export * from './lib/hlm-scroll-area';
+
+export const HlmScrollAreaImports = [HlmScrollArea] as const;
diff --git a/libs/ui/scroll-area/src/lib/hlm-scroll-area.ts b/libs/ui/scroll-area/src/lib/hlm-scroll-area.ts
new file mode 100644
index 00000000..dde8a747
--- /dev/null
+++ b/libs/ui/scroll-area/src/lib/hlm-scroll-area.ts
@@ -0,0 +1,19 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/helm/utils';
+
+@Directive({
+ selector: 'ng-scrollbar[hlm],ng-scrollbar[hlmScrollbar]',
+ host: {
+ 'data-slot': 'scroll-area',
+ '[style.--scrollbar-border-radius]': '100 + "px"',
+ '[style.--scrollbar-offset]': '3',
+ '[style.--scrollbar-thumb-color]': '"var(--border)"',
+ '[style.--scrollbar-thumb-hover-color]': '"var(--border)"',
+ '[style.--scrollbar-thickness]': '7',
+ },
+})
+export class HlmScrollArea {
+ constructor() {
+ classes(() => 'block');
+ }
+}
diff --git a/libs/ui/select/src/index.ts b/libs/ui/select/src/index.ts
new file mode 100644
index 00000000..2380284e
--- /dev/null
+++ b/libs/ui/select/src/index.ts
@@ -0,0 +1,31 @@
+import { HlmSelect } from './lib/hlm-select';
+import { HlmSelectContent } from './lib/hlm-select-content';
+import { HlmSelectGroup } from './lib/hlm-select-group';
+import { HlmSelectLabel } from './lib/hlm-select-label';
+import { HlmSelectOption } from './lib/hlm-select-option';
+import { HlmSelectScrollDown } from './lib/hlm-select-scroll-down';
+import { HlmSelectScrollUp } from './lib/hlm-select-scroll-up';
+import { HlmSelectTrigger } from './lib/hlm-select-trigger';
+import { HlmSelectValue } from './lib/hlm-select-value';
+
+export * from './lib/hlm-select';
+export * from './lib/hlm-select-content';
+export * from './lib/hlm-select-group';
+export * from './lib/hlm-select-label';
+export * from './lib/hlm-select-option';
+export * from './lib/hlm-select-scroll-down';
+export * from './lib/hlm-select-scroll-up';
+export * from './lib/hlm-select-trigger';
+export * from './lib/hlm-select-value';
+
+export const HlmSelectImports = [
+ HlmSelectContent,
+ HlmSelectTrigger,
+ HlmSelectOption,
+ HlmSelectValue,
+ HlmSelect,
+ HlmSelectScrollUp,
+ HlmSelectScrollDown,
+ HlmSelectLabel,
+ HlmSelectGroup,
+] as const;
diff --git a/libs/ui/select/src/lib/hlm-select-content.ts b/libs/ui/select/src/lib/hlm-select-content.ts
new file mode 100644
index 00000000..f1aefa37
--- /dev/null
+++ b/libs/ui/select/src/lib/hlm-select-content.ts
@@ -0,0 +1,26 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import { Directive, booleanAttribute, input } from '@angular/core';
+import { injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
+import { classes } from '@spartan-ng/helm/utils';
+
+@Directive({
+ selector: '[hlmSelectContent], hlm-select-content',
+ host: {
+ '[attr.data-state]': '_stateProvider?.state() ?? "open"',
+ '[attr.data-side]': '_sideProvider?.side() ?? "bottom"',
+ },
+})
+export class HlmSelectContent {
+ public readonly stickyLabels = input
+
+
+
+
+ }
+ `,
+})
+export class HlmSidebar {
+ protected readonly _sidebarService = inject(HlmSidebarService);
+ private readonly _config = injectHlmSidebarConfig();
+ public readonly sidebarWidthMobile = input
+
+
+
+ `,
+})
+export class HlmTabsPaginatedList extends BrnTabsPaginatedList {
+ constructor() {
+ super();
+ classes(() => 'relative flex flex-shrink-0 gap-1 overflow-hidden');
+ }
+
+ public readonly items = contentChildren(BrnTabsTrigger, { descendants: false });
+ /** Explicitly annotating type to avoid non-portable inferred type */
+ public readonly itemsChanges: Observable
+
+
+
+
-
-
+
+ @for (tabItem of tabItems; track tabItem.label) {
+
+ }
+
+
diff --git a/src/app/features/admin/settings/settings.component.ts b/src/app/features/admin/settings/settings.component.ts
index c518a588..2f77dfb5 100644
--- a/src/app/features/admin/settings/settings.component.ts
+++ b/src/app/features/admin/settings/settings.component.ts
@@ -1,9 +1,9 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject } from '@angular/core';
-import { activate } from '@angular/fire/remote-config';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
+import { Router, RouterModule } from '@angular/router';
+import { provideIcons } from '@ng-icons/core';
+import { lucideLayoutDashboard } from '@ng-icons/lucide';
+import { HlmTabsImports } from '@spartan-ng/helm/tabs';
+import { HlmIconImports } from '@spartan-ng/helm/icon';
interface TabItem {
icon: string;
@@ -16,22 +16,26 @@ interface TabItem {
templateUrl: './settings.component.html',
styleUrls: ['./settings.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
- imports: [MatToolbarModule, MatTabsModule, RouterModule, MatIconModule],
+ imports: [RouterModule, HlmTabsImports, HlmIconImports],
+ providers: [
+ provideIcons({
+ lucideLayoutDashboard,
+ }),
+ ],
})
export class SettingsComponent {
- private readonly route = inject(ActivatedRoute);
private readonly router = inject(Router);
- private readonly cd = inject(ChangeDetectorRef);
- activeTab = 'ui';
- tabItems: TabItem[] = [{ icon: 'palette', label: 'UI', link: 'ui' }];
+ activeTab = signal('ui');
+ tabItems: TabItem[] = [{ icon: 'lucideLayoutDashboard', label: 'UI', link: 'ui' }];
constructor() {
- const router = this.router;
-
- const idx = router.url.lastIndexOf('/');
- this.activeTab = router.url.substring(idx + 1);
+ const idx = this.router.url.lastIndexOf('/');
+ this.activeTab.set(this.router.url.substring(idx + 1));
}
- protected readonly activate = activate;
+ onTabActivated(tabLink: string) {
+ this.activeTab.set(tabLink);
+ this.router.navigate(['features', 'admin', 'settings', tabLink]);
+ }
}
diff --git a/src/app/features/admin/settings/ui/ui.component.html b/src/app/features/admin/settings/ui/ui.component.html
index 1642c20d..dbb955ca 100644
--- a/src/app/features/admin/settings/ui/ui.component.html
+++ b/src/app/features/admin/settings/ui/ui.component.html
@@ -12,7 +12,9 @@
@if (isLoading()) {
-
+
+
@@ -22,8 +24,8 @@
Primary
Secondary
- Tertiary
- Error
+ Outline
+ Destructive
@if (form.controls['color'].errors; as errors) {
{{ fe.errors(errors) }}
diff --git a/src/app/features/admin/settings/ui/ui.component.ts b/src/app/features/admin/settings/ui/ui.component.ts
index 543d02d0..6e50d115 100644
--- a/src/app/features/admin/settings/ui/ui.component.ts
+++ b/src/app/features/admin/settings/ui/ui.component.ts
@@ -5,7 +5,6 @@ import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatSelectModule } from '@angular/material/select';
import { MatToolbarModule } from '@angular/material/toolbar';
import { FormErrorHandlerService } from '@core/error-handler/form-error-handler.service';
@@ -13,6 +12,7 @@ import { AppUiColor } from '@shared/models/settings.model';
import { NotificationService } from '@shared/services/notification.service';
import { SettingsService } from '@shared/services/settings.service';
import { SettingsValidator } from '@shared/validators/settings.validator';
+import { HlmProgressImports } from '@spartan-ng/helm/progress';
@Component({
selector: 'll-admin-settings-ui',
@@ -23,11 +23,11 @@ import { SettingsValidator } from '@shared/validators/settings.validator';
MatToolbarModule,
MatIconModule,
MatButtonModule,
- MatProgressBarModule,
ReactiveFormsModule,
MatFormFieldModule,
MatSelectModule,
MatInputModule,
+ HlmProgressImports,
],
})
export class UiComponent {
diff --git a/src/app/features/admin/spaces/spaces.component.html b/src/app/features/admin/spaces/spaces.component.html
index 6449e640..6f522f6e 100644
--- a/src/app/features/admin/spaces/spaces.component.html
+++ b/src/app/features/admin/spaces/spaces.component.html
@@ -1,17 +1,13 @@
-
-
- Spaces
-
-
-
+
+
}
@@ -27,10 +23,6 @@
Name
- @if (element.icon; as icon) {
- {{ icon }}
-
- }
{{ element.name }}
diff --git a/src/app/features/admin/spaces/spaces.component.ts b/src/app/features/admin/spaces/spaces.component.ts
index f14c99be..68d6dc9c 100644
--- a/src/app/features/admin/spaces/spaces.component.ts
+++ b/src/app/features/admin/spaces/spaces.component.ts
@@ -6,16 +6,19 @@ import { MatButtonModule } from '@angular/material/button';
import { MatDialog } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatSort, MatSortModule } from '@angular/material/sort';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
+import { provideIcons } from '@ng-icons/core';
+import { lucidePlus } from '@ng-icons/lucide';
import { ConfirmationDialogComponent } from '@shared/components/confirmation-dialog/confirmation-dialog.component';
import { ConfirmationDialogModel } from '@shared/components/confirmation-dialog/confirmation-dialog.model';
import { Space } from '@shared/models/space.model';
import { NotificationService } from '@shared/services/notification.service';
import { SpaceService } from '@shared/services/space.service';
+import { HlmButtonImports } from '@spartan-ng/helm/button';
+import { HlmIconImports } from '@spartan-ng/helm/icon';
+import { HlmProgressImports } from '@spartan-ng/helm/progress';
import { filter, switchMap } from 'rxjs/operators';
import { SpaceDialogComponent } from './space-dialog/space-dialog.component';
import { SpaceDialogModel } from './space-dialog/space-dialog.model';
@@ -26,16 +29,22 @@ import { SpaceDialogModel } from './space-dialog/space-dialog.model';
styleUrls: ['./spaces.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [
- MatToolbarModule,
MatIconModule,
MatButtonModule,
- MatProgressBarModule,
ClipboardModule,
MatTooltipModule,
CommonModule,
MatTableModule,
MatSortModule,
MatPaginatorModule,
+ HlmButtonImports,
+ HlmIconImports,
+ HlmProgressImports,
+ ],
+ providers: [
+ provideIcons({
+ lucidePlus,
+ }),
],
})
export class SpacesComponent implements OnInit {
diff --git a/src/app/features/admin/users/users.component.html b/src/app/features/admin/users/users.component.html
index 776dfb78..6b8073f5 100644
--- a/src/app/features/admin/users/users.component.html
+++ b/src/app/features/admin/users/users.component.html
@@ -1,22 +1,22 @@
-
-
- Users
-
-
-
@if (isLoading()) {
-
+
}
-
-
-
+
+
@if (isLoading) {
-
-
+
-
+
+
+
-
-
@@ -33,21 +33,23 @@
{{ element.email }}
@if (element.emailVerified) {
- verified
+
Name
- {{ element.displayName }}
+
+ {{ element.displayName }}
+
Active
@if (element.disabled) {
- block
+ check
+
@@ -57,10 +59,10 @@
@for (provider of element.providers; track provider) {
@switch (provider) {
@case ('password') {
- email
+ verified_user
+
Actions
-
diff --git a/src/app/features/admin/users/users.component.scss b/src/app/features/admin/users/users.component.scss
index 9d2cad55..b93454f8 100644
--- a/src/app/features/admin/users/users.component.scss
+++ b/src/app/features/admin/users/users.component.scss
@@ -33,6 +33,6 @@ mat-cell {
}
&.mat-column-actions {
- max-width: 125px;
+ max-width: 115px;
}
}
diff --git a/src/app/features/admin/users/users.component.ts b/src/app/features/admin/users/users.component.ts
index ea8b67f9..d42f684f 100644
--- a/src/app/features/admin/users/users.component.ts
+++ b/src/app/features/admin/users/users.component.ts
@@ -1,23 +1,26 @@
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, OnInit, signal, viewChild } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { MatButtonModule } from '@angular/material/button';
import { MatDialog } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatSort, MatSortModule } from '@angular/material/sort';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
+import { provideIcons } from '@ng-icons/core';
+import { lucideCheck, lucideMail, lucidePencil, lucideRefreshCcw, lucideTrash, lucideUserPlus, lucideX } from '@ng-icons/lucide';
import { ConfirmationDialogComponent } from '@shared/components/confirmation-dialog/confirmation-dialog.component';
import { ConfirmationDialogModel } from '@shared/components/confirmation-dialog/confirmation-dialog.model';
-import { AnimateDirective } from '@shared/directives/animate.directive';
import { User } from '@shared/models/user.model';
import { NotificationService } from '@shared/services/notification.service';
import { UserService } from '@shared/services/user.service';
+import { HlmButtonImports } from '@spartan-ng/helm/button';
+import { HlmIconImports } from '@spartan-ng/helm/icon';
+import { HlmProgressImports } from '@spartan-ng/helm/progress';
+import { HlmSpinnerImports } from '@spartan-ng/helm/spinner';
+import { HlmTooltipImports } from '@spartan-ng/helm/tooltip';
import { filter, switchMap } from 'rxjs/operators';
import { UserDialogComponent } from './user-dialog/user-dialog.component';
import { UserDialogModel } from './user-dialog/user-dialog.model';
@@ -30,18 +33,30 @@ import { UserInviteDialogResponse } from './user-invite-dialog/user-invite-dialo
styleUrls: ['./users.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [
- MatToolbarModule,
MatTooltipModule,
MatTableModule,
- MatProgressBarModule,
MatFormFieldModule,
MatInputModule,
MatSortModule,
MatIconModule,
CommonModule,
- MatButtonModule,
MatPaginatorModule,
- AnimateDirective,
+ HlmButtonImports,
+ HlmIconImports,
+ HlmTooltipImports,
+ HlmProgressImports,
+ HlmSpinnerImports,
+ ],
+ providers: [
+ provideIcons({
+ lucideUserPlus,
+ lucideRefreshCcw,
+ lucidePencil,
+ lucideTrash,
+ lucideCheck,
+ lucideX,
+ lucideMail,
+ }),
],
})
export class UsersComponent implements OnInit {
diff --git a/src/app/features/features-routing.module.ts b/src/app/features/features-routing.module.ts
index f8e5d5e9..a35b6870 100644
--- a/src/app/features/features-routing.module.ts
+++ b/src/app/features/features-routing.module.ts
@@ -1,10 +1,11 @@
import { NgModule } from '@angular/core';
import { AuthGuard, customClaims } from '@angular/fire/auth-guard';
import { RouterModule, Routes } from '@angular/router';
+import { BreadcrumbItem } from '@shared/models/breadcrumb.model';
import { UserPermission } from '@shared/models/user.model';
import { pipe } from 'rxjs';
import { map } from 'rxjs/operators';
-import { FeaturesComponent } from './features.component';
+import FeaturesComponent from './features.component';
const ROLE_ADMIN = 'admin';
const ROLE_CUSTOM = 'custom';
@@ -154,6 +155,12 @@ const routes: Routes = [
path: 'welcome',
title: 'Welcome',
loadComponent: () => import('./welcome/welcome.component').then(m => m.WelcomeComponent),
+ data: {
+ breadcrumb: {
+ label: 'Welcome',
+ route: '/welcome',
+ } satisfies BreadcrumbItem,
+ },
},
{
path: 'spaces/:spaceId/dashboard',
@@ -167,6 +174,10 @@ const routes: Routes = [
canActivate: [AuthGuard],
data: {
authGuardPipe: hasPermissionTranslationRead,
+ breadcrumb: {
+ label: 'Translations',
+ helpUrl: 'https://localess.org/docs/translations/overview',
+ } satisfies BreadcrumbItem,
},
},
{
@@ -176,6 +187,10 @@ const routes: Routes = [
canActivate: [AuthGuard],
data: {
authGuardPipe: hasPermissionContentRead,
+ breadcrumb: {
+ label: 'Contents',
+ helpUrl: 'https://localess.org/docs/content/overview',
+ } satisfies BreadcrumbItem,
},
},
{
@@ -185,6 +200,10 @@ const routes: Routes = [
canActivate: [AuthGuard],
data: {
authGuardPipe: hasPermissionAssetRead,
+ breadcrumb: {
+ label: 'Assets',
+ helpUrl: 'https://localess.org/docs/assets/overview',
+ } satisfies BreadcrumbItem,
},
},
{
@@ -194,6 +213,10 @@ const routes: Routes = [
canActivate: [AuthGuard],
data: {
authGuardPipe: hasPermissionSchemaRead,
+ breadcrumb: {
+ label: 'Schemas',
+ helpUrl: 'https://localess.org/docs/schemas/overview',
+ } satisfies BreadcrumbItem,
},
},
{
@@ -203,12 +226,20 @@ const routes: Routes = [
canActivate: [AuthGuard],
data: {
authGuardPipe: hasPermissionTranslationRead,
+ breadcrumb: {
+ label: 'Tasks',
+ } satisfies BreadcrumbItem,
},
},
{
path: 'spaces/:spaceId/open-api',
title: 'Open API',
loadChildren: () => import('./spaces/open-api/open-api.module').then(m => m.OpenApiModule),
+ data: {
+ breadcrumb: {
+ label: 'Open API',
+ } satisfies BreadcrumbItem,
+ },
},
{
path: 'spaces/:spaceId/settings',
@@ -217,6 +248,9 @@ const routes: Routes = [
canActivate: [AuthGuard],
data: {
authGuardPipe: hasPermissionSpaceManagement,
+ breadcrumb: {
+ label: 'Settings',
+ } satisfies BreadcrumbItem,
},
},
{
@@ -226,6 +260,9 @@ const routes: Routes = [
canActivate: [AuthGuard],
data: {
authGuardPipe: hasPermissionUserManagement,
+ breadcrumb: {
+ label: 'Users',
+ } satisfies BreadcrumbItem,
},
},
{
@@ -235,6 +272,9 @@ const routes: Routes = [
canActivate: [AuthGuard],
data: {
authGuardPipe: hasPermissionSpaceManagement,
+ breadcrumb: {
+ label: 'Spaces',
+ } satisfies BreadcrumbItem,
},
},
{
@@ -244,6 +284,9 @@ const routes: Routes = [
canActivate: [AuthGuard],
data: {
authGuardPipe: hasPermissionSettingsManagement,
+ breadcrumb: {
+ label: 'Settings',
+ } satisfies BreadcrumbItem,
},
},
],
diff --git a/src/app/features/features.component.html b/src/app/features/features.component.html
index 9db3b108..c6439884 100644
--- a/src/app/features/features.component.html
+++ b/src/app/features/features.component.html
@@ -1,153 +1,245 @@
-
-
-
- 
- @if (appSettingsStore.ui(); as ui) {
- @if (ui.text) {
-
- @for (space of spaces; track space.id) {
-
+
- @if (appSettingsStore.ui(); as ui) {
- @if (ui.text) {
-
+
+
+
+
- @for (item of communitySideMenu; track item.label) {
-
+
+
+
+ {{ ui.text }}
+
+
}
-
+ }
}
- } @else {
-
- }
-
-
-
+
+
+
-
+ @if (spaceStore.spaces().length > 0) {
+
-
+
+
+ + @for (space of spaceStore.spaces(); track space.id) { +