1010100: add the spreadsheet custom dialog and rtl sample

README.md

@@ -1 +1,63 @@
-# syncfusion-angular-spreadsheet-globalization-localization
+# syncfusion-angular-spreadsheet-globalization-localization
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.0.4.
+
+## Development server
+
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+
+Navigating to `/globalization` will show your globalization sample
+
+Navigating to `/rtl` will show your RTL sample.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the project run:
+
+```bash
+ng build
+```
+
+This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
+
+## Running unit tests
+
+To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

angular.json

@@ -0,0 +1,74 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "npm",
+    "analytics": false
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "my-app": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "src/main.ts",
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "my-app:build:production"
+            },
+            "development": {
+              "buildTarget": "my-app:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "test": {
+          "builder": "@angular/build:unit-test"
+        }
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,60 @@
+{
+  "name": "my-app",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "prettier": {
+    "printWidth": 100,
+    "singleQuote": true,
+    "overrides": [
+      {
+        "files": "*.html",
+        "options": {
+          "parser": "angular"
+        }
+      }
+    ]
+  },
+  "private": true,
+  "packageManager": "npm@11.6.2",
+  "dependencies": {
+    "@angular/common": "^21.0.0",
+    "@angular/compiler": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/platform-browser": "^21.0.0",
+    "@angular/router": "^21.0.0",
+    "@syncfusion/ej2-angular-spreadsheet": "^32.1.20",
+    "@syncfusion/ej2-locale": "^32.1.19",
+    "@syncfusion/ej2-angular-base": "*",
+    "@syncfusion/ej2-angular-grids": "*",
+    "@syncfusion/ej2-base": "*",
+    "@syncfusion/ej2-buttons": "*",
+    "@syncfusion/ej2-calendars": "*",
+    "@syncfusion/ej2-dropdowns": "*",
+    "@syncfusion/ej2-grids": "*",
+    "@syncfusion/ej2-inputs": "*",
+    "@syncfusion/ej2-lists": "*",
+    "@syncfusion/ej2-navigations": "*",
+    "@syncfusion/ej2-popups": "*",
+    "@syncfusion/ej2-splitbuttons": "*",
+    "@syncfusion/ej2-spreadsheet": "*",
+    "@syncfusion/ej2-angular-dropdowns": "*",
+    "cldr-data": "^36.0.4",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular/build": "^21.0.4",
+    "@angular/cli": "^21.0.4",
+    "@angular/compiler-cli": "^21.0.0",
+    "jsdom": "^27.1.0",
+    "typescript": "~5.9.2",
+    "vitest": "^4.0.8"
+  }
+}

src/app/app.routes.ts

@@ -0,0 +1,10 @@
+import { Routes } from '@angular/router';
+import { GlobalizationSample } from './globalization.sample';
+import { RtlSample } from './rtl.sample';
+
+export const routes: Routes = [
+  { path: '', redirectTo: '/globalization', pathMatch: 'full' },
+  { path: 'globalization', component: GlobalizationSample },
+  { path: 'rtl', component: RtlSample },
+  { path: '**', redirectTo: '/globalization' }
+];

src/app/app.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+import { App } from './app';
+
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [App],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it('should render title', async () => {
+    const fixture = TestBed.createComponent(App);
+    await fixture.whenStable();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, my-app');
+  });
+});

src/app/app.ts

@@ -0,0 +1,77 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  standalone: true,
+  imports: [RouterModule, CommonModule],
+  selector: 'app-root',
+  template: `
+    <div class="app-container">
+      <nav class="navbar">
+        <h2>Syncfusion Spreadsheet Samples</h2>
+        <ul class="nav-links">
+          <li><a routerLink="/globalization" routerLinkActive="active">Localization Sample</a></li>
+          <li><a routerLink="/rtl" routerLinkActive="active">RTL Sample</a></li>
+        </ul>
+      </nav>
+      <div class="content">
+        <router-outlet></router-outlet>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .app-container {
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+    .navbar {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      padding: 15px 30px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    }
+    .navbar h2 {
+      margin: 0;
+      font-size: 22px;
+      font-weight: 600;
+    }
+    .nav-links {
+      list-style: none;
+      display: flex;
+      gap: 15px;
+      margin: 0;
+      padding: 0;
+    }
+    .nav-links li a {
+      color: white;
+      text-decoration: none;
+      padding: 10px 20px;
+      border-radius: 5px;
+      transition: all 0.3s ease;
+      display: inline-block;
+    }
+    .nav-links li a:hover {
+      background-color: rgba(255, 255, 255, 0.2);
+      transform: translateY(-2px);
+    }
+    .nav-links li a.active {
+      background-color: rgba(255, 255, 255, 0.3);
+      font-weight: 600;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+    }
+    .content {
+      flex: 1;
+      overflow: auto;
+      background-color: #f5f5f5;
+    }
+  `]
+})
+export class App {
+  title = 'Spreadsheet Samples';
+}

src/app/data.ts

@@ -0,0 +1,14 @@
+export function getDefaultData(): Object[] {
+  return [
+    { 'Item Name': 'Casual Shoes', Date: '14.02.2014', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: '=PRODUCT(D2;E2)', Discount: '2%', Profit: '=PRODUCT(G2;F2)' },
+    { 'Item Name': 'Sports Shoes', Date: '11.06.2014', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: '=PRODUCT(D3;E3)', Discount: '5%', Profit: '=PRODUCT(G3;F3)' },
+    { 'Item Name': 'Formal Shoes', Date: '27.07.2014', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: '=PRODUCT(D4;E4)', Discount: '7,5%', Profit: '=PRODUCT(G4;F4)' },
+    { 'Item Name': 'Sandals & Floaters', Date: '21.11.2014', Time: '06:23:54 AM', Quantity: 15, Price: '20,45', Amount: '=PRODUCT(D5;E5)', Discount: '11%', Profit: '=PRODUCT(G5;F5)' },
+    { 'Item Name': 'Flip- Flops & Slippers', Date: '23.06.2014', Time: '12:43:59 AM', Quantity: 30, Price: 10, Amount: '=PRODUCT(D6;E6)', Discount: '10%', Profit: '=PRODUCT(G6;F6)' },
+    { 'Item Name': 'Sneakers', Date: '22.07.2014', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: '=PRODUCT(D7;E7)', Discount: '13,2%', Profit: '=PRODUCT(G7;F7)' },
+    { 'Item Name': 'Running Shoes', Date: '04.02.2014', Time: '03:44:34 AM', Quantity: 20, Price: 10, Amount: '=PRODUCT(D8;E8)', Discount: '3%', Profit: '=PRODUCT(G8;F8)' },
+    { 'Item Name': 'Loafers', Date: '30.11.2014', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: '=PRODUCT(D9;E9)', Discount: '6,67', Profit: '=PRODUCT(G9;F9)' },
+    { 'Item Name': 'Cricket Shoes', Date: '09.07.2014', Time: '11:32:14 AM', Quantity: 41, Price: 30, Amount: '=PRODUCT(D10;E10)', Discount: '12.5%', Profit: '=PRODUCT(G10;F10)' },
+    { 'Item Name': 'T-Shirts', Date: '31.10.2014', Time: '12:01:44 AM', Quantity: 50, Price: '10,75', Amount: '=PRODUCT(D11;E11)', Discount: '9%', Profit: '=PRODUCT(G11;F11)' }
+  ];
+}

src/app/dataSource.ts

@@ -0,0 +1,40 @@
+export let data: Object[] = [ {
+  OrderID: 10248,
+  CustomerID: 'VINET',
+  EmployeeID: 5,
+  ShipName: 'Vins et alcools Chevalier',
+  ShipCity: 'Reims',
+  Website: 'https://www.amazon.com/'
+},
+{
+  OrderID: 10249,
+  CustomerID: 'TOMSP',
+  EmployeeID: 6,
+  ShipName: 'Toms Spezialitäten',
+  ShipCity: 'Münster',
+  Website: 'https://www.overstock.com/'
+},
+{
+  OrderID: 10250,
+  CustomerID: 'HANAR',
+  EmployeeID: 4,
+  ShipName: 'Hanari Carnes',
+  ShipCity: 'Rio de Janeiro',
+  Website: 'https://www.aliexpress.com/'
+},
+{
+  OrderID: 10251,
+  CustomerID: 'VICTE',
+  EmployeeID: 3,
+  ShipName: 'Victuailles en stock',
+  ShipCity: 'Lyon',
+  Website: 'http://www.alibaba.com/'
+},
+{
+  OrderID: 10252,
+  CustomerID: 'SUPRD',
+  EmployeeID: 4,
+  ShipName: 'Suprêmes délices',
+  ShipCity: 'Charleroi',
+  Website: 'https://taobao.com/'
+}];