@c8y/tutorial 1021.80.1 → 1022.3.2

package/cumulocity.config.ts

@@ -1,6 +1,6 @@
 import { ConfigurationOptions } from '@c8y/devkit';
 import { DefinePlugin } from 'webpack';
-import { author, description, name, version } from './package.json';
+import { author, description, name, version, license } from './package.json';
 
 export default {
   runTime: {
@@ -15,6 +15,7 @@ export default {
     icon: {
       class: 'c8y-icon-tools'
     },
+    license,
     docs: {
       links: [
         {
@@ -415,6 +416,13 @@ export default {
         description: 'An example for a server data grid.',
         scope: 'self'
       },
+      {
+        name: 'Tree grid example',
+        module: 'TreeGridExampleModule',
+        path: './src/grids/tree-grid-example/tree-grid-example.module.ts',
+        description: 'An example for a tree data grid.',
+        scope: 'self'
+      },
       {
         name: 'Device grid example',
         module: 'DeviceGridExampleModule',
@@ -778,6 +786,20 @@ export default {
         path: './src/countdown/countdown-example.module.ts',
         description: 'This is an example for the countdown component.',
         scope: 'self'
+      },
+      {
+        name: 'Bottom drawer',
+        module: 'bottomDrawerExampleModuleProviders',
+        path: './src/bottom-drawer/bottom-drawer.providers.ts',
+        description: 'This is an example for the bottom drawer service.',
+        scope: 'self'
+      },
+      {
+        name: 'Widget Config Hook',
+        module: 'widgetConfigHookProviders',
+        path: './src/hooks/widget-config/widget-config.providers.ts',
+        description: 'This is an example for the bottom drawer service.',
+        scope: 'self'
       }
     ]
   },

package/package.json

@@ -1,23 +1,24 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1021.80.1",
+  "version": "1022.3.2",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
-    "@c8y/style": "1021.80.1",
-    "@c8y/ngx-components": "1021.80.1",
-    "@c8y/client": "1021.80.1",
-    "@c8y/bootstrap": "1021.80.1",
-    "@angular/cdk": "^18.2.14",
-    "ngx-bootstrap": "18.0.0",
+    "@c8y/style": "1022.3.2",
+    "@c8y/ngx-components": "1022.3.2",
+    "@c8y/client": "1022.3.2",
+    "@c8y/bootstrap": "1022.3.2",
+    "@angular/cdk": "^19.2.18",
+    "ngx-bootstrap": "19.0.2",
     "leaflet": "1.9.4",
-    "rxjs": "^7.8.1"
+    "rxjs": "7.8.1"
   },
   "devDependencies": {
-    "@c8y/options": "1021.80.1",
-    "@c8y/devkit": "1021.80.1"
+    "@c8y/options": "1022.3.2",
+    "@c8y/devkit": "1022.3.2"
   },
   "peerDependencies": {
-    "@angular/common": ">=18 <19"
+    "@angular/common": ">=19 <20"
   },
-  "author": "Cumulocity GmbH"
+  "author": "Cumulocity GmbH",
+  "license": "Apache-2.0"
 }

package/src/__mocks/index.ts

@@ -1,5 +1,172 @@
-export * from './mock.module';
 export * from './mock.service';
 export * from './mock.model';
 export * from './mock.realtime';
 export * from './mock.realtime-subject';
+import { AppStateService, OptionsService, RealtimeSubjectService } from '@c8y/ngx-components';
+import { InventoryInterceptor } from './global-mocks/inventory.interceptor';
+import { MeasurementsInterceptor } from './global-mocks/measurements.interceptor';
+import { API_MOCK_CONFIG, ApiMockConfig } from './mock.model';
+import { RealtimeSubjectServiceWithMocking } from './mock.realtime';
+import { ContextDashboardInterceptor } from './scoped-mocks/context-dashboard';
+import { DeviceDataGridInterceptor } from './scoped-mocks/device-data-grid';
+import { ListsInterceptor } from './scoped-mocks/lists';
+import { NamedContextDashboardInterceptor } from './scoped-mocks/named-context-dashboard';
+import { ServerSideDataGridInterceptor } from './scoped-mocks/server-side-data-grid';
+import { ServiceDashboardInterceptor } from './scoped-mocks/service-dashboard';
+import { TypeaheadInterceptor } from './scoped-mocks/typeahead';
+import { MeasurementsSeriesInterceptor } from './scoped-mocks/measurement-series';
+import { EnvironmentProviders, Provider, inject, provideAppInitializer } from '@angular/core';
+import { MockService } from './mock.service';
+import { IUser } from '@c8y/client';
+
+export function provideAPIMock() {
+  return [
+    // TODO: ask Jan about mocking clusters maps/cluster
+    // {
+    //   provide: API_MOCK_CONFIG,
+    //   useValue: {
+    //     id: 'a-cluster-map-interceptor',
+    //     path: 'maps/cluster',
+    //     mockService: BoilerplateInterceptor,
+    //     debug: true
+    //   } as ApiMockConfig,
+    //   multi: true
+    // },
+    {
+      provide: API_MOCK_CONFIG,
+      useValue: {
+        id: 'a-datapoints-export-selector-interceptor',
+        path: 'datapoints-export-selector-example',
+        mockService: MeasurementsSeriesInterceptor,
+        debug: true
+      } as ApiMockConfig,
+      multi: true
+    },
+    {
+      provide: API_MOCK_CONFIG,
+      useValue: {
+        id: 'a-service-dashboard-interceptor',
+        path: 'service-dashboard',
+        mockService: ServiceDashboardInterceptor,
+        debug: true
+      } as ApiMockConfig,
+      multi: true
+    },
+    {
+      provide: API_MOCK_CONFIG,
+      useValue: {
+        id: 'list-group-interceptor',
+        path: 'lists',
+        mockService: ListsInterceptor,
+        debug: true
+      } as ApiMockConfig,
+      multi: true
+    },
+    {
+      provide: API_MOCK_CONFIG,
+      useValue: {
+        id: 'for-of-interceptor',
+        path: 'for-of',
+        mockService: ListsInterceptor,
+        debug: true
+      } as ApiMockConfig,
+      multi: true
+    },
+    {
+      provide: API_MOCK_CONFIG,
+      useValue: {
+        id: 'typeahaed-interceptor',
+        path: 'typeahead',
+        mockService: TypeaheadInterceptor,
+        debug: true
+      } as ApiMockConfig,
+      multi: true
+    },
+    {
+      provide: API_MOCK_CONFIG,
+      useValue: {
+        id: 'server-side-data-grid-interceptor',
+        path: 'server-grid-example',
+        mockService: ServerSideDataGridInterceptor
+      } as ApiMockConfig,
+      multi: true
+    },
+    {
+      provide: API_MOCK_CONFIG,
+      useValue: {
+        id: 'device-data-grid-interceptor',
+        path: 'device-grid-example',
+        mockService: DeviceDataGridInterceptor
+      } as ApiMockConfig,
+      multi: true
+    },
+    {
+      provide: API_MOCK_CONFIG,
+      useValue: {
+        id: 'scoped-dashboard-context-interceptor',
+        path: 'dashboards/context',
+        mockService: ContextDashboardInterceptor
+      } as ApiMockConfig,
+      multi: true
+    },
+    {
+      provide: API_MOCK_CONFIG,
+      useValue: {
+        id: 'scoped-dashboard-context-interceptor-2',
+        path: 'dashboards/widget-guide-context-dashboard',
+        mockService: ContextDashboardInterceptor
+      } as ApiMockConfig,
+      multi: true
+    },
+    {
+      provide: API_MOCK_CONFIG,
+      useValue: {
+        path: 'named-context',
+        // The interceptors are sorted by their ID, so the scoped interceptors should be before the global ones.
+        id: 'named-context-interceptor-example',
+        mockService: NamedContextDashboardInterceptor
+      } as ApiMockConfig,
+      multi: true
+    },
+    {
+      provide: API_MOCK_CONFIG,
+      useValue: {
+        // The interceptors are sorted by their ID, so the scoped interceptors should be before the global ones.
+        id: 'z-global-inventory-interceptor',
+        mockService: InventoryInterceptor
+      } as ApiMockConfig,
+      multi: true
+    },
+    {
+      provide: API_MOCK_CONFIG,
+      useValue: {
+        // The interceptors are sorted by their ID, so the scoped interceptors should be before the global ones.
+        id: 'z-global-measurementsInterceptor-interceptor',
+        mockService: MeasurementsInterceptor
+      } as ApiMockConfig,
+      multi: true
+    },
+    {
+      provide: RealtimeSubjectService,
+      useExisting: RealtimeSubjectServiceWithMocking
+    },
+    provideAppInitializer(() => {
+      const initializerFn = ((
+        _service: MockService,
+        appStateService: AppStateService,
+        options: OptionsService
+      ) => {
+        return () => {
+          if (options.get('noLogin', false)) {
+            appStateService.currentUser.next({
+              id: 'NO_LOGIN',
+              userName: 'noLogin',
+              displayName: 'noLogin'
+            } as IUser);
+          }
+        };
+      })(inject(MockService), inject(AppStateService), inject(OptionsService));
+      return initializerFn();
+    })
+  ] satisfies (Provider | EnvironmentProviders)[];
+}

package/src/app/app.config.ts

@@ -0,0 +1,59 @@
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { CoreModule, hookWidget, RouterModule, VersionModule } from '@c8y/ngx-components';
+import { provideHelloSample } from '../hello';
+import { provideRouteSample } from '../hooks/route';
+import { provideDemoWidget } from '../widget';
+import { provideHooksSample } from '../hooks';
+import { provideHooksNavigatorSample } from '../hooks/navigator';
+import { provideListsSampleNavigator } from '../list';
+import { provideGridSampleNode } from '../grids';
+import { provideLazySample } from '../lazy';
+import { provideProviderConfigurationIntroduction } from '../provider-configuration/introduction-example';
+import { provideDynamicFormsNavigator } from '../dynamic-forms';
+import { provideWidgetsResolverSample } from '../widget-resolvers';
+import { provideMapExampleNavigator } from '../maps';
+import { provideTranslationsNavigator } from '../translations';
+import { provideLazyWidget } from '../lazy-widget';
+import { provideBreadcrumbsNavigator } from '../breadcrumbs';
+import { cockpitDefaultWidgets } from '@c8y/ngx-components/widgets/cockpit';
+import { deviceManagementDefaultWidgets } from '@c8y/ngx-components/widgets/device-management';
+import { provideClientInterceptorSample } from '../client-interceptor';
+import { provideUserMenuSample } from '../user-menu';
+import { AlarmsModule } from '@c8y/ngx-components/alarms';
+import { BulkOperationSchedulerModule } from '@c8y/ngx-components/operations/bulk-operation-scheduler';
+import { provideRedirectToLastRoute } from '../redirect-to-last-route';
+import { provideAPIMock } from '../__mocks';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideAnimations(),
+    importProvidersFrom(RouterModule.forRoot()),
+    importProvidersFrom(CoreModule.forRoot()),
+    // The following modules show examples of how to
+    ...provideHelloSample(),
+    ...provideRouteSample(),
+    ...provideDemoWidget(),
+    ...provideHooksSample(),
+    ...provideHooksNavigatorSample(),
+    ...provideListsSampleNavigator(),
+    ...provideGridSampleNode(),
+    ...provideLazySample(),
+    importProvidersFrom(BulkOperationSchedulerModule),
+    ...provideProviderConfigurationIntroduction(),
+    ...provideDynamicFormsNavigator(),
+    ...provideWidgetsResolverSample(),
+    ...provideUserMenuSample(),
+    ...provideClientInterceptorSample(),
+    ...provideMapExampleNavigator(),
+    ...provideTranslationsNavigator(),
+    // Get rid of a default version factory
+    importProvidersFrom(VersionModule.config({ disableWebSDKPluginVersionFactory: true })),
+    ...provideLazyWidget(),
+    hookWidget([...cockpitDefaultWidgets, ...deviceManagementDefaultWidgets]),
+    ...provideRedirectToLastRoute(),
+    ...provideAPIMock(),
+    ...provideBreadcrumbsNavigator(),
+    importProvidersFrom(AlarmsModule.config({ hybrid: false }))
+  ]
+};

package/src/bootstrap.ts

@@ -1,19 +1,23 @@
 import './polyfills';
+import '@angular/compiler';
 
 import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
-
-import './translations/locales/pt_BR.po';
-import './translations/locales/it.po';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { BootstrapComponent, provideBootstrapMetadata } from '@c8y/ngx-components';
+import { BootstrapMetaData } from '@c8y/bootstrap';
+import { appConfig } from './app/app.config';
 
 declare const __MODE__: string;
 if (__MODE__ === 'production') {
   enableProdMode();
 }
 
-export function bootstrap() {
-  return platformBrowserDynamic()
-    .bootstrapModule(AppModule)
-    .catch(err => console.log(err));
+export function bootstrap(metadata: BootstrapMetaData) {
+  appConfig.providers.push(...provideBootstrapMetadata(metadata));
+  /**
+   * Bootstrap your application with the BootstrapComponent which will use the `<c8y-bootstrap>`
+   * component to initialize the root application. Alternatively you can bootstrap
+   * a component of your choice and include that tag into its template or only reuse the given components
+   */
+  return bootstrapApplication(BootstrapComponent, appConfig).catch(err => console.log(err));
 }

package/src/bottom-drawer/bottom-drawer-content-example.component.html

@@ -0,0 +1,28 @@
+<div class="card-header separator">
+  <span class="h4 card-title">Bottom drawer title</span>
+</div>
+<div class="inner-scroll flex-grow">
+  <div class="card-block">
+    <p>Bottom drawer content</p>
+  </div>
+</div>
+<div class="card-footer text-center p-24 separator flex-no-shrink">
+  <button
+    class="btn btn-default"
+    [disabled]="isDisabled"
+  >
+    This button is disabled, as the inital state defines it.
+  </button>
+  <button
+    class="btn btn-default"
+    (click)="cancel()"
+  >
+    Cancel
+  </button>
+  <button
+    class="btn btn-primary"
+    (click)="save()"
+  >
+    Save
+  </button>
+</div>

package/src/bottom-drawer/bottom-drawer-content-example.component.ts

@@ -0,0 +1,33 @@
+import { Component, inject } from '@angular/core';
+import { BottomDrawerRef } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'tut-bottom-drawer-content-example',
+  templateUrl: './bottom-drawer-content-example.component.html',
+  standalone: true,
+  host: {
+    class: 'd-contents'
+  }
+})
+export class BottomDrawerContentExampleComponent {
+  bottomDrawerRef = inject(BottomDrawerRef);
+  isDisabled = false;
+
+  result: Promise<string> = new Promise((resolve, reject) => {
+    this._save = resolve;
+    this._cancel = reject;
+  });
+
+  private _save: (value: string) => void;
+  private _cancel: (reason?: any) => void;
+
+  cancel() {
+    this._cancel('User canceled');
+    this.bottomDrawerRef.close();
+  }
+
+  save() {
+    this._save('Value to pass back.');
+    this.bottomDrawerRef.close();
+  }
+}

package/src/bottom-drawer/bottom-drawer-example.component.html

@@ -0,0 +1,7 @@
+<button
+  class="btn btn-primary"
+  (click)="openDrawer()"
+  [disabled]="isOpen"
+>
+  Open bottom drawer via service
+</button>

package/src/bottom-drawer/bottom-drawer-example.component.ts

@@ -0,0 +1,33 @@
+import { Component, inject } from '@angular/core';
+import { AlertService, BottomDrawerService, CoreModule } from '@c8y/ngx-components';
+import { BottomDrawerContentExampleComponent } from './bottom-drawer-content-example.component';
+
+@Component({
+  selector: 'tut-bottom-drawer-example',
+  templateUrl: './bottom-drawer-example.component.html',
+  standalone: true,
+  imports: [CoreModule]
+})
+export class BottomDrawerExampleComponent {
+  bottomDrawerService = inject(BottomDrawerService);
+  alertService = inject(AlertService);
+  isOpen = false;
+
+  async openDrawer() {
+    this.isOpen = true;
+    const drawer = this.bottomDrawerService.openDrawer(BottomDrawerContentExampleComponent, {
+      initialState: {
+        // place here any content you want to pass to the component
+        isDisabled: true
+      }
+    });
+
+    try {
+      const resultOf = await drawer.instance.result;
+      this.alertService.success(resultOf);
+    } catch (ex) {
+      this.alertService.danger('Canceled as of: ' + ex);
+    }
+    this.isOpen = false;
+  }
+}

package/src/bottom-drawer/bottom-drawer.providers.ts

@@ -0,0 +1,17 @@
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+export const bottomDrawerExampleModuleProviders = [
+  hookRoute({
+    path: 'bottom-drawer',
+    loadComponent: () =>
+      import('./bottom-drawer-example.component').then(m => m.BottomDrawerExampleComponent)
+  }),
+  hookNavigator(
+    new NavigatorNode({
+      label: 'Bottom drawer',
+      path: '/bottom-drawer',
+      icon: 'th-list',
+      priority: 0
+    })
+  )
+];

package/src/breadcrumbs/index.ts

@@ -1,5 +1,17 @@
+import { hookNavigator, NavigatorNode } from '@c8y/ngx-components';
+
 export * from './basic-example/breadcrumbs-example.module';
 export * from './expand-example/breadcrumbs-expand-example.module';
 export * from './outlet/breadcrumbs-outlet-example.module';
 export * from './content-projection/breadcrumbs-content-projection-example.module';
-export * from './breadcrumbs.module';
+
+export function provideBreadcrumbsNavigator() {
+  return [
+    hookNavigator(
+      new NavigatorNode({
+        icon: 'notification',
+        label: 'Breadcrumbs'
+      })
+    )
+  ];
+}

package/src/client-interceptor/index.ts

@@ -1 +1,16 @@
-export * from './client-interceptor.module';
+import { EnvironmentProviders, Provider, inject, provideAppInitializer } from '@angular/core';
+import { ApiService } from '@c8y/ngx-components/api';
+import { ClientInterceptorService } from './client-interceptor.service';
+
+export function provideClientInterceptorSample() {
+  return [
+    provideAppInitializer(() => {
+      const initializerFn = ((apiService: ApiService, interceptor: ClientInterceptorService) => {
+        return () => {
+          apiService.addInterceptor(interceptor, 'tutorialAppDemoInterceptor');
+        };
+      })(inject(ApiService), inject(ClientInterceptorService));
+      return initializerFn();
+    })
+  ] satisfies (Provider | EnvironmentProviders)[];
+}

package/src/component-styles/syntactically-awesome-style-sheets-example/syntactically-awesome-style-sheets-example.component.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $background-color: #f6ffed;
 $border-color: #b7eb8f;
 
@@ -7,10 +9,10 @@ $border-color: #b7eb8f;
   border: 1px solid $border-color;
 
   h5 {
-    color: darken($border-color, 30%);
+    color: color.adjust($border-color, $lightness: -30%)
   }
 
   p {
-    color: darken($background-color, 50%);
+    color: color.adjust($border-color, $lightness: -30%)
   }
 }

package/src/countdown/countdown-example.module.ts

@@ -4,7 +4,7 @@ import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
 @NgModule({
   providers: [
     hookRoute({
-      path: 'help',
+      path: 'countdown',
       loadComponent: () =>
         import('./countdown-example.component').then(m => m.CountdownExampleComponent)
     }),

package/src/dashboard/widget-guide-context-dashboard/widget-guide-context-dashboard.component.ts

@@ -1,8 +1,6 @@
 import { Component } from '@angular/core';
 import { CoreModule, Widget } from '@c8y/ngx-components';
 import { CommonModule } from '@angular/common';
-import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
-import { DatapointSelectorModule } from '@c8y/ngx-components/datapoint-selector';
 import { ContextDashboardModule } from '@c8y/ngx-components/context-dashboard';
 
 @Component({
@@ -16,13 +14,7 @@ import { ContextDashboardModule } from '@c8y/ngx-components/context-dashboard';
     ></c8y-context-dashboard>
   `,
   standalone: true,
-  imports: [
-    CommonModule,
-    CoreModule,
-    AssetSelectorModule,
-    DatapointSelectorModule,
-    ContextDashboardModule
-  ]
+  imports: [ContextDashboardModule, CoreModule, CommonModule]
 })
 export class WidgetGuideContextDashboardComponent {
   defaultWidgets: Widget[] = [

package/src/date-time-range/date-time-range-example.component.ts

@@ -96,7 +96,6 @@ import { DateTimePickerModule } from '@c8y/ngx-components';
 })
 export class DateTimeRangeExampleComponent {
   form: FormGroup;
-
   constructor() {
     const dateTo = new Date();
     const dateFrom = new Date(dateTo.valueOf() - 24 * 60 * 60 * 1000);

package/src/dynamic-forms/index.ts

@@ -1,2 +1,14 @@
-export * from './dynamic-forms.module';
+import { hookNavigator, NavigatorNode } from '@c8y/ngx-components';
+
 export * from './custom-element-example/custom-element-example.module';
+
+export function provideDynamicFormsNavigator() {
+  return [
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Dynamic forms',
+        icon: 'file-text'
+      })
+    )
+  ];
+}

package/src/grids/index.ts

@@ -1 +1,13 @@
-export * from './grids.module';
+import { hookNavigator, NavigatorNode } from '@c8y/ngx-components';
+
+export function provideGridSampleNode() {
+  return [
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Data grid examples',
+        icon: 'table',
+        priority: 30
+      })
+    )
+  ];
+}

package/src/grids/server-grid-example/last-updated-data-grid-column/last-updated.cell-renderer.component.ts

@@ -3,7 +3,8 @@ import { CellRendererContext } from '@c8y/ngx-components';
 
 @Component({
   template: ` {{ context.value | c8yDate }} `,
-  selector: 'c8y-last-updated-cell-renderer'
+  selector: 'c8y-last-updated-cell-renderer',
+  standalone: false
 })
 export class LastUpdatedCellRendererComponent {
   constructor(public context: CellRendererContext) {}

package/src/grids/server-grid-example/server-grid-example.component.html

@@ -1,12 +1,14 @@
 <c8y-title>Data grid examples</c8y-title>
 
 <c8y-data-grid
+  class="content-fullpage d-flex d-col border-top border-bottom"
   [title]="title"
   [loadMoreItemsLabel]="loadMoreItemsLabel"
   [loadingItemsLabel]="loadingItemsLabel"
   [displayOptions]="displayOptions"
   [columns]="columns"
   [pagination]="pagination"
+  [childNodePagination]="childNodePagination"
   [infiniteScroll]="infiniteScroll"
   [serverSideDataCallback]="serverSideDataCallback"
   [refresh]="refresh"
@@ -16,7 +18,6 @@
   (itemsSelect)="onItemsSelect($event)"
   [bulkActionControls]="bulkActionControls"
   (onConfigChange)="onConfigChange($event)"
-  class="content-fullpage d-flex d-col border-top border-bottom"
 >
   <c8y-ui-empty-state
     [icon]="'search'"

package/src/grids/tree-grid-example/client-tree-grid-example.component.html

@@ -0,0 +1,18 @@
+<c8y-title>Data grid examples</c8y-title>
+
+<c8y-data-grid
+  class="content-fullpage d-flex d-col border-top border-bottom"
+  [title]="title"
+  [columns]="columns"
+  [rows]="data"
+  [treeGrid]="true"
+  [pagination]="pagination"
+  [selectable]="selectable"
+  (itemsSelect)="onItemsSelect($event)"
+  [actionControls]="actionControls"
+  [bulkActionControls]="bulkActionControls"
+  (onConfigChange)="onConfigChange($event)"
+  (onFilter)="onFilter($event)"
+  (onAddCustomColumn)="onAddCustomColumn($event)"
+  (onRemoveCustomColumn)="onRemoveCustomColumn($event)"
+></c8y-data-grid>