Angular Data GridRTL - Right To Left

import { Component, signal } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";

import { AgGridAngular } from "ag-grid-angular";
import type {
  CellClassParams,
  CellStyle,
  ColDef,
  ColGroupDef,
  DefaultMenuItem,
  GetContextMenuItemsParams,
  ICellRendererParams,
  IRowNode,
  MenuItemDef,
  RowSelectedEvent,
  RowSelectionOptions,
  SelectionChangedEvent,
  StatusPanelDef,
  ValueSetterParams,
} from "ag-grid-community";
import {
  LocaleModule,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import { AllEnterpriseModule } from "ag-grid-enterprise";

import { CountryCellRenderer } from "./country-cell-renderer.component";
import { COUNTRY_CODES, LANGUAGES, createRowData } from "./data";
import type { LanguageConfig } from "./data";
import "./styles.css";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  AllEnterpriseModule.with(AgChartsEnterpriseModule),
  LocaleModule,
]);



const dataSize: string = ".1x22";

// The active language configuration. Mutated on every language switch so the framework-agnostic
// renderers/comparators/column builders below read the current locale exactly as in the vanilla example.
let currentLang: LanguageConfig = LANGUAGES["arabic"];

function getAutoGroupColumnDef(): ColDef {
  return {
    headerName: currentLang.headers.group,
    width: 200,
    field: "name",
    valueGetter: (params) => {
      if (params.node && params.node.group) {
        return params.node.key;
      } else {
        return params.data[params.colDef.field!];
      }
    },
    cellRenderer: "agGroupCellRenderer",
  };
}

function createDefaultCols(): (ColDef | ColGroupDef)[] {
  const firstColumn: ColDef = {
    headerName: currentLang.headers.name,
    field: "name",
    width: 200,
    editable: true,
    enableRowGroup: true,
    icons: {
      sortAscending: '<i class="fa fa-sort-alpha-up"/>',
      sortDescending: '<i class="fa fa-sort-alpha-down"/>',
    },
  };

  const cols: (ColDef | ColGroupDef)[] = [
    {
      headerName: currentLang.headers.participant,
      children: [
        firstColumn,
        {
          headerName: currentLang.headers.language,
          field: "language",
          width: 150,
          editable: true,
          filter: "agSetColumnFilter",
          cellRenderer: languageCellRenderer,
          cellEditor: "agSelectCellEditor",
          enableRowGroup: true,
          enablePivot: true,
          cellEditorParams: {
            values: currentLang.editorLanguages,
          },
          pinned: "right",
          headerTooltip: currentLang.headers.languageTooltip,
        },
        {
          headerName: currentLang.headers.country,
          field: "country",
          width: 150,
          editable: true,
          cellRenderer: CountryCellRenderer,
          enableRowGroup: true,
          enablePivot: true,
          cellEditor: "agRichSelectCellEditor",
          cellEditorParams: {
            cellRenderer: CountryCellRenderer,
            values: currentLang.editorCountries,
          },
          filterParams: {
            cellRenderer: CountryCellRenderer,
          },
        },
      ],
    },
    {
      headerName: currentLang.headers.gameOfChoice,
      children: [
        {
          headerName: currentLang.headers.gameName,
          field: "game.name",
          width: 180,
          editable: true,
          filter: "agSetColumnFilter",
          tooltip: true,
          cellClass: () => {
            return "alphabet";
          },
          enableRowGroup: true,
          enablePivot: true,
          pinned: "left",
          icons: {
            sortAscending: '<i class="fa fa-sort-alpha-up"/>',
            sortDescending: '<i class="fa fa-sort-alpha-down"/>',
          },
        },
        {
          headerName: currentLang.headers.bought,
          field: "game.bought",
          filter: "agSetColumnFilter",
          editable: true,
          width: 100,
          enableRowGroup: true,
          enablePivot: true,
          enableValue: true,
          cellRenderer: booleanCellRenderer,
          cellStyle: { "text-align": "center" },
          comparator: booleanComparator,
          filterParams: { cellRenderer: booleanFilterCellRenderer },
        },
      ],
    },
    {
      groupId: "performance",
      children: [
        {
          headerName: currentLang.headers.bankBalance,
          field: "bankBalance",
          width: 150,
          editable: true,
          cellRenderer: currencyRenderer,
          cellStyle: currencyCssFunc,
          filter: "agNumberColumnFilter",
          enableValue: true,
          icons: {
            sortAscending: '<i class="fa fa-sort-amount-up"/>',
            sortDescending: '<i class="fa fa-sort-amount-down"/>',
          },
        },
        {
          headerName: currentLang.headers.extraInfo1,
          columnGroupShow: "open",
          width: 150,
          editable: false,
          sortable: false,
          suppressHeaderMenuButton: true,
          cellStyle: { "text-align": "right" },
          cellRenderer: () => {
            return currentLang.cellContent.abra;
          },
        },
        {
          headerName: currentLang.headers.extraInfo2,
          columnGroupShow: "open",
          width: 150,
          editable: false,
          sortable: false,
          suppressHeaderMenuButton: true,
          cellStyle: { "text-align": "left" },
          cellRenderer: () => {
            return currentLang.cellContent.cadabra;
          },
        },
      ],
    },
    {
      headerName: currentLang.headers.rating,
      field: "rating",
      width: 100,
      editable: true,
      cellRenderer: ratingRenderer,
      enableRowGroup: true,
      enablePivot: true,
      enableValue: true,
      filterParams: { cellRenderer: ratingFilterRenderer },
    },
    {
      headerName: currentLang.headers.totalWinnings,
      field: "totalWinnings",
      filter: "agNumberColumnFilter",
      editable: true,
      valueSetter: numberValueSetter,
      width: 150,
      enableValue: true,
      cellRenderer: currencyRenderer,
      cellStyle: currencyCssFunc,
      icons: {
        sortAscending: '<i class="fa fa-sort-amount-up"/>',
        sortDescending: '<i class="fa fa-sort-amount-down"/>',
      },
    },
  ];

  const monthGroup: ColGroupDef = {
    headerName: currentLang.headers.monthlyBreakdown,
    children: [],
  };
  cols.push(monthGroup);
  for (let i = 0, len = currentLang.months.length; i < len; ++i) {
    const month = currentLang.months[i];
    const child: ColDef = {
      headerName: month,
      field: "month_" + i,
      width: 100,
      filter: "agNumberColumnFilter",
      editable: true,
      enableValue: true,
      cellClassRules: {
        "good-score": 'typeof x === "number" && x > 50000',
        "bad-score": 'typeof x === "number" && x < 10000',
      },
      valueSetter: numberValueSetter,
      cellRenderer: currencyRenderer,
      cellStyle: { "text-align": "right" },
    };
    monthGroup.children.push(child);
  }

  return cols;
}

function getColCount() {
  switch (dataSize) {
    case "10x100":
      return 100;
    default:
      return 22;
  }
}

function createCols() {
  const colCount = getColCount();
  const defaultCols = createDefaultCols();
  const columns = defaultCols.slice(0, colCount);

  for (let col = 22; col < colCount; col++) {
    const colName = currentLang.colNames[col % currentLang.colNames.length];
    const colDef = {
      headerName: colName,
      field: "col" + col,
      width: 200,
      editable: true,
    };
    columns.push(colDef);
  }

  return columns;
}

function numberValueSetter(params: ValueSetterParams) {
  const newValue = params.newValue;
  let valueAsNumber;
  if (newValue === null || newValue === undefined || newValue === "") {
    valueAsNumber = null;
  } else {
    valueAsNumber = parseFloat(params.newValue);
  }
  const field = params.colDef.field!;
  const data = params.data;
  data[field] = valueAsNumber;
  return true;
}

function currencyCssFunc(params: CellClassParams): CellStyle {
  if (params.value !== null && params.value !== undefined && params.value < 0) {
    return { color: "red", "text-align": "right", "font-weight": "bold" };
  } else {
    return { "text-align": "right" };
  }
}

function ratingFilterRenderer(params: ICellRendererParams) {
  return ratingRendererGeneral(params.value, true);
}

function ratingRenderer(params: ICellRendererParams) {
  return ratingRendererGeneral(params.value, false);
}

function ratingRendererGeneral(value: any, forFilter: boolean) {
  if (value === "(Select All)") {
    return value;
  }

  let result = "<span>";

  for (let i = 0; i < 5; i++) {
    if (value > i) {
      result +=
        '<img src="https://www.ag-grid.com/example-assets/gold-star.png" />';
    }
  }

  if (forFilter && Number(value) === 0) {
    result += currentLang.cellContent.noStars;
  }

  return result;
}

function currencyRenderer(params: ICellRendererParams) {
  if (params.value === null || params.value === undefined) {
    return null;
  } else if (isNaN(params.value)) {
    return "NaN";
  } else {
    if (params.node.group && params.column!.getAggFunc() === "count") {
      return params.value;
    } else {
      return (
        "&pound;" +
        Math.floor(params.value)
          .toString()
          .replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
      );
    }
  }
}

function booleanComparator(value1: any, value2: any) {
  const value1Cleaned = booleanCleaner(value1);
  const value2Cleaned = booleanCleaner(value2);
  const value1Ordinal =
    value1Cleaned === true ? 0 : value1Cleaned === false ? 1 : 2;
  const value2Ordinal =
    value2Cleaned === true ? 0 : value2Cleaned === false ? 1 : 2;
  return value1Ordinal - value2Ordinal;
}

function booleanCellRenderer(params: ICellRendererParams) {
  const valueCleaned = booleanCleaner(params.value);
  if (valueCleaned === true) {
    return "<span title='true'>&#10004;</span>";
  } else if (valueCleaned === false) {
    return "<span title='false'>&#10006;</span>";
  } else if (params.value !== null && params.value !== undefined) {
    return params.value.toString();
  } else {
    return null;
  }
}

function booleanFilterCellRenderer(params: ICellRendererParams) {
  const valueCleaned = booleanCleaner(params.value);

  if (valueCleaned === true) {
    return "&#10004;";
  } else if (valueCleaned === false) {
    return "&#10006;";
  } else if (params.value === "(Select All)") {
    return params.value;
  } else {
    return currentLang.cellContent.empty;
  }
}

function booleanCleaner(value: any) {
  if (value === "true" || value === true || value === 1) {
    return true;
  } else if (value === "false" || value === false || value === 0) {
    return false;
  } else {
    return null;
  }
}

function languageCellRenderer(params: ICellRendererParams) {
  if (params.value !== null && params.value !== undefined) {
    return params.value;
  } else {
    return null;
  }
}

@Component({
  standalone: true,
  imports: [AgGridAngular, FormsModule],
  selector: "my-app",
  template: `
    <div class="example-wrapper">
      <div
        style="margin-bottom: 0.5rem; display: flex; gap: 0.5rem; align-items: center"
      >
        <label for="language">Language:</label>
        <select
          id="language"
          [ngModel]="language"
          (ngModelChange)="onLanguageChange($event)"
        >
          <option value="arabic">العربية (Arabic)</option>
          <option value="hebrew">עברית (Hebrew)</option>
          <option value="english">English</option>
        </select>
      </div>
      @if (gridVisible()) {
        <ag-grid-angular
          style="width: 100%; height: 100%;"
          [columnDefs]="columnDefs"
          [autoGroupColumnDef]="autoGroupColumnDef"
          [enableRtl]="enableRtl"
          [localeText]="localeText"
          [defaultColDef]="defaultColDef"
          [sideBar]="true"
          [rowGroupPanelShow]="'always'"
          [pivotPanelShow]="'always'"
          [statusBar]="statusBar"
          [rowSelection]="rowSelection"
          [context]="context"
          [rowData]="rowData"
          [getContextMenuItems]="getContextMenuItems"
          [getBusinessKeyForNode]="getBusinessKeyForNode"
          (rowSelected)="onRowSelected($event)"
          (selectionChanged)="onSelectionChanged($event)"
        />
      }
    </div>
  `,
})
export class AppComponent {
  // Arabic is the default language and is selected first in the dropdown.
  public language: string = "arabic";
  // enableRtl and localeText are initial-only grid options, so the grid is remounted (via this
  // signal + @if) whenever the language changes; the per-language inputs are recomputed first.
  public readonly gridVisible = signal(true);

  public columnDefs!: (ColDef | ColGroupDef)[];
  public autoGroupColumnDef!: ColDef;
  public enableRtl: boolean = false;
  public localeText: Record<string, string> | undefined;
  public rowData!: any[];

  public readonly defaultColDef: ColDef = {
    editable: true,
    minWidth: 100,
    filter: true,
    floatingFilter: true,
  };
  public readonly context = { COUNTRY_CODES };
  public readonly statusBar: { statusPanels: StatusPanelDef[] } = {
    statusPanels: [{ statusPanel: "agAggregationComponent" }],
  };
  public readonly rowSelection: RowSelectionOptions = {
    mode: "multiRow",
    groupSelects: "descendants",
    selectAll: "filtered",
  };

  constructor() {
    this.rebuildGridInputs();
  }

  public onLanguageChange(language: string): void {
    this.language = language;
    this.gridVisible.set(false);
    this.rebuildGridInputs();
    setTimeout(() => {
      this.gridVisible.set(true);
    });
  }

  public readonly getBusinessKeyForNode = (node: IRowNode): string => {
    if (node.data) {
      return node.data.name;
    } else {
      return "";
    }
  };

  public readonly getContextMenuItems = (
    params: GetContextMenuItemsParams,
  ): (DefaultMenuItem | MenuItemDef)[] => {
    const result: (DefaultMenuItem | MenuItemDef)[] =
      params.defaultItems!.splice(0);
    result.push({
      name: currentLang.contextMenu.customMenuItem,
      icon: '<img src="https://www.ag-grid.com/example-assets/lab.png" style="width: 14px;" />',
      action: () => {
        const value = params.value ? params.value : "<empty>";
        console.log("You clicked a custom menu item on cell " + value);
      },
    });

    return result;
  };

  public onSelectionChanged(event: SelectionChangedEvent): void {
    console.log(
      "Callback selectionChanged: selection count = " +
        event.selectedNodes?.length,
    );
  }

  public onRowSelected(event: RowSelectedEvent): void {
    // the number of rows selected could be huge, if the user is grouping and selects a group, so
    // to stop the console from clogging up, we only print if in the first 10 (by chance we know
    // the node id's are assigned from 0 upwards)
    if (Number(event.node.id) < 10) {
      const valueToPrint = event.node.group
        ? "group (" + event.node.key + ")"
        : event.node.data.name;
      console.log("Callback rowSelected: " + valueToPrint);
    }
  }

  // Recomputes every per-language grid input against the selected language before the grid remounts.
  private rebuildGridInputs(): void {
    currentLang = LANGUAGES[this.language];
    this.columnDefs = createCols();
    this.autoGroupColumnDef = getAutoGroupColumnDef();
    this.enableRtl = currentLang.enableRtl;
    this.localeText = currentLang.localeText;
    this.rowData = createRowData(this.language);
  }
}

.example-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

ag-grid-angular {
    flex: 1 1 0px;
    width: 100%;
}

import { Component, signal } from "@angular/core";

import type { ICellRendererAngularComp } from "ag-grid-angular";
import type { ICellRendererParams } from "ag-grid-community";

@Component({
  standalone: true,
  template: `<span
    style="cursor: default; overflow: hidden; text-overflow: ellipsis"
  >
    @if (flagCode()) {
      <img
        class="flag"
        border="0"
        width="15"
        height="10"
        src="https://flags.fmcdn.net/data/flags/mini/{{ flagCode() }}.png"
      />
    }
    {{ textValue() }}
  </span>`,
})
export class CountryCellRenderer implements ICellRendererAngularComp {
  public readonly textValue = signal<string | undefined>(undefined);
  public readonly flagCode = signal<string | undefined>(undefined);

  public agInit(params: ICellRendererParams): void {
    this.flagCode.set(undefined);

    const value = params.value;
    // Blank, empty or the set-filter "Select All" entry: show the raw value with no flag.
    if (value == null || value === "" || value === "(Select All)") {
      this.textValue.set(value);
      return;
    }

    // Only render a flag when a country code resolves; the localised Arabic/Hebrew names have no
    // entry in COUNTRY_CODES, so guarding here avoids requesting undefined.png (404s).
    const code = params.context.COUNTRY_CODES[value];
    if (code) {
      this.flagCode.set(code);
    }
    this.textValue.set(value);
  }

  public refresh(): boolean {
    return false;
  }
}

import {
  AG_GRID_LOCALE_EG,
  AG_GRID_LOCALE_IL,
} from "@ag-grid-community/locale";

export interface LanguageConfig {
  localeText: Record<string, string> | undefined;
  enableRtl: boolean;
  headers: {
    group: string;
    participant: string;
    name: string;
    language: string;
    languageTooltip: string;
    country: string;
    gameOfChoice: string;
    gameName: string;
    bought: string;
    bankBalance: string;
    extraInfo1: string;
    extraInfo2: string;
    rating: string;
    totalWinnings: string;
    monthlyBreakdown: string;
  };
  months: string[];
  contextMenu: {
    customMenuItem: string;
  };
  cellContent: {
    abra: string;
    cadabra: string;
    noStars: string;
    empty: string;
  };
  colNames: string[];
  countries: { country: string; continent: string; language: string }[];
  games: string[];
  firstNames: string[];
  lastNames: string[];
  editorLanguages: string[];
  editorCountries: string[];
}

const ENGLISH: LanguageConfig = {
  localeText: undefined,
  enableRtl: false,
  headers: {
    group: "Group",
    participant: "Participant",
    name: "Name",
    language: "Language",
    languageTooltip: "Example tooltip for Language",
    country: "Country",
    gameOfChoice: "Game of Choice",
    gameName: "Game Name",
    bought: "Bought",
    bankBalance: "Bank Balance",
    extraInfo1: "Extra Info 1",
    extraInfo2: "Extra Info 2",
    rating: "Rating",
    totalWinnings: "Total Winnings",
    monthlyBreakdown: "Monthly Breakdown",
  },
  months: [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec",
  ],
  contextMenu: {
    customMenuItem: "Custom Menu Item",
  },
  cellContent: {
    abra: "Abra...",
    cadabra: "...cadabra!",
    noStars: "(No stars)",
    empty: "(empty)",
  },
  colNames: [
    "Station",
    "Railway",
    "Street",
    "Address",
    "Toy",
    "Soft Box",
    "Make and Model",
    "Longest Day",
    "Shortest Night",
  ],
  countries: [
    { country: "Ireland", continent: "Europe", language: "English" },
    { country: "Spain", continent: "Europe", language: "Spanish" },
    { country: "United Kingdom", continent: "Europe", language: "English" },
    { country: "France", continent: "Europe", language: "French" },
    { country: "Germany", continent: "Europe", language: "German" },
    { country: "Luxembourg", continent: "Europe", language: "French" },
    { country: "Sweden", continent: "Europe", language: "Swedish" },
    { country: "Norway", continent: "Europe", language: "Norwegian" },
    { country: "Italy", continent: "Europe", language: "Italian" },
    { country: "Greece", continent: "Europe", language: "Greek" },
    { country: "Iceland", continent: "Europe", language: "Icelandic" },
    { country: "Portugal", continent: "Europe", language: "Portuguese" },
    { country: "Malta", continent: "Europe", language: "Maltese" },
    { country: "Brazil", continent: "South America", language: "Portuguese" },
    { country: "Argentina", continent: "South America", language: "Spanish" },
    { country: "Colombia", continent: "South America", language: "Spanish" },
    { country: "Peru", continent: "South America", language: "Spanish" },
    { country: "Venezuela", continent: "South America", language: "Spanish" },
    { country: "Uruguay", continent: "South America", language: "Spanish" },
    { country: "Belgium", continent: "Europe", language: "French" },
  ],
  games: [
    "Chess",
    "Cross and Circle",
    "Daldøs",
    "Downfall",
    "DVONN",
    "Fanorona",
    "Game of the Generals",
    "Ghosts",
    "Abalone",
    "Agon",
    "Backgammon",
    "Battleship",
    "Blockade",
    "Blood Bowl",
    "Bul",
    "Camelot",
    "Checkers",
    "Go",
    "Gipf",
    "Guess Who?",
    "Hare and Hounds",
    "Hex",
    "Hijara",
    "Isola",
    "Janggi (Korean Chess)",
    "Le Jeu de la Guerre",
    "Patolli",
    "Plateau",
    "PÜNCT",
    "Rithmomachy",
    "Sáhkku",
    "Senet",
    "Shogi",
    "Space Hulk",
    "Stratego",
    "Sugoroku",
    "Tâb",
    "Tablut",
    "Tantrix",
    "Wari",
    "Xiangqi (Chinese chess)",
    "YINSH",
    "ZÈRTZ",
    "Kalah",
    "Kamisado",
    "Liu po",
    "Lost Cities",
    "Mad Gab",
    "Master Mind",
    "Nine Men's Morris",
    "Obsession",
    "Othello",
  ],
  firstNames: [
    "Sophie",
    "Isabelle",
    "Emily",
    "Olivia",
    "Lily",
    "Chloe",
    "Isabella",
    "Amelia",
    "Jessica",
    "Sophia",
    "Ava",
    "Charlotte",
    "Mia",
    "Lucy",
    "Grace",
    "Ruby",
    "Ella",
    "Evie",
    "Freya",
    "Isla",
    "Poppy",
    "Daisy",
    "Layla",
  ],
  lastNames: [
    "Beckham",
    "Black",
    "Braxton",
    "Brennan",
    "Brock",
    "Bryson",
    "Cadwell",
    "Cage",
    "Carson",
    "Chandler",
    "Cohen",
    "Cole",
    "Corbin",
    "Dallas",
    "Dalton",
    "Dane",
    "Donovan",
    "Easton",
    "Fisher",
    "Fletcher",
    "Grady",
    "Greyson",
    "Griffin",
    "Gunner",
    "Hayden",
    "Hudson",
    "Hunter",
    "Jacoby",
    "Jagger",
    "Jaxon",
    "Jett",
    "Kade",
    "Kane",
    "Keating",
    "Keegan",
    "Kingston",
    "Kobe",
  ],
  editorLanguages: [
    "English",
    "Spanish",
    "French",
    "Portuguese",
    "German",
    "Swedish",
    "Norwegian",
    "Italian",
    "Greek",
    "Icelandic",
    "Portuguese",
    "Maltese",
  ],
  editorCountries: [
    "Argentina",
    "Brazil",
    "Colombia",
    "France",
    "Germany",
    "Greece",
    "Iceland",
    "Ireland",
    "Italy",
    "Malta",
    "Portugal",
    "Norway",
    "Peru",
    "Spain",
    "Sweden",
    "United Kingdom",
    "Uruguay",
    "Venezuela",
    "Belgium",
    "Luxembourg",
  ],
};

const ARABIC: LanguageConfig = {
  localeText: AG_GRID_LOCALE_EG,
  enableRtl: true,
  headers: {
    group: "مجموعة",
    participant: "المشارك",
    name: "الاسم",
    language: "اللغة",
    languageTooltip: "تلميح مثال للغة",
    country: "البلد",
    gameOfChoice: "اللعبة المفضلة",
    gameName: "اسم اللعبة",
    bought: "تم الشراء",
    bankBalance: "الرصيد البنكي",
    extraInfo1: "معلومات إضافية 1",
    extraInfo2: "معلومات إضافية 2",
    rating: "التقييم",
    totalWinnings: "إجمالي الأرباح",
    monthlyBreakdown: "التفصيل الشهري",
  },
  months: [
    "يناير",
    "فبراير",
    "مارس",
    "أبريل",
    "مايو",
    "يونيو",
    "يوليو",
    "أغسطس",
    "سبتمبر",
    "أكتوبر",
    "نوفمبر",
    "ديسمبر",
  ],
  contextMenu: {
    customMenuItem: "عنصر قائمة مخصص",
  },
  cellContent: {
    abra: "أبرا...",
    cadabra: "...كادابرا!",
    noStars: "(بدون نجوم)",
    empty: "(فارغ)",
  },
  colNames: [
    "محطة",
    "سكة حديد",
    "شارع",
    "عنوان",
    "لعبة",
    "صندوق",
    "الشركة والطراز",
    "أطول يوم",
    "أقصر ليلة",
  ],
  countries: [
    { country: "أيرلندا", continent: "أوروبا", language: "الإنجليزية" },
    { country: "إسبانيا", continent: "أوروبا", language: "الإسبانية" },
    { country: "المملكة المتحدة", continent: "أوروبا", language: "الإنجليزية" },
    { country: "فرنسا", continent: "أوروبا", language: "الفرنسية" },
    { country: "ألمانيا", continent: "أوروبا", language: "الألمانية" },
    { country: "لوكسمبورغ", continent: "أوروبا", language: "الفرنسية" },
    { country: "السويد", continent: "أوروبا", language: "السويدية" },
    { country: "النرويج", continent: "أوروبا", language: "النرويجية" },
    { country: "إيطاليا", continent: "أوروبا", language: "الإيطالية" },
    { country: "اليونان", continent: "أوروبا", language: "اليونانية" },
    { country: "أيسلندا", continent: "أوروبا", language: "الأيسلندية" },
    { country: "البرتغال", continent: "أوروبا", language: "البرتغالية" },
    { country: "مالطا", continent: "أوروبا", language: "المالطية" },
    {
      country: "البرازيل",
      continent: "أمريكا الجنوبية",
      language: "البرتغالية",
    },
    {
      country: "الأرجنتين",
      continent: "أمريكا الجنوبية",
      language: "الإسبانية",
    },
    {
      country: "كولومبيا",
      continent: "أمريكا الجنوبية",
      language: "الإسبانية",
    },
    { country: "بيرو", continent: "أمريكا الجنوبية", language: "الإسبانية" },
    { country: "فنزويلا", continent: "أمريكا الجنوبية", language: "الإسبانية" },
    {
      country: "أوروغواي",
      continent: "أمريكا الجنوبية",
      language: "الإسبانية",
    },
    { country: "بلجيكا", continent: "أوروبا", language: "الفرنسية" },
  ],
  games: [
    "شطرنج",
    "الدائرة والصليب",
    "دالدوس",
    "السقوط",
    "دفون",
    "فانورونا",
    "لعبة الجنرالات",
    "الأشباح",
    "أبالون",
    "آغون",
    "طاولة الزهر",
    "سفينة حربية",
    "حصار",
    "بلود بول",
    "بول",
    "كاميلوت",
    "داما",
    "غو",
    "غيبف",
    "احزر من؟",
    "الأرنب والكلاب",
    "هيكس",
    "هيجارا",
    "إيزولا",
    "جانغي (شطرنج كوري)",
    "لعبة الحرب",
    "باتولي",
    "بلاتو",
    "بونكت",
    "ريثموماكي",
    "ساهكو",
    "سينيت",
    "شوغي",
    "سبيس هالك",
    "ستراتيغو",
    "سوغوروكو",
    "طاب",
    "تابلوت",
    "تانتريكس",
    "واري",
    "شيانغتشي (شطرنج صيني)",
    "يينش",
    "زيرتز",
    "كالاه",
    "كاميسادو",
    "ليو بو",
    "المدن المفقودة",
    "ماد غاب",
    "ماستر مايند",
    "مطحنة الرجال التسعة",
    "هوس",
    "أوثيلو",
  ],
  firstNames: [
    "فاطمة",
    "عائشة",
    "مريم",
    "خديجة",
    "زينب",
    "نور",
    "سارة",
    "ليلى",
    "هدى",
    "أمينة",
    "رنا",
    "دانا",
    "ياسمين",
    "لمى",
    "سلمى",
    "ريم",
    "هالة",
    "منى",
    "سميرة",
    "نادية",
    "رشا",
    "سحر",
    "جنى",
  ],
  lastNames: [
    "أحمد",
    "محمد",
    "علي",
    "حسن",
    "حسين",
    "إبراهيم",
    "خالد",
    "عمر",
    "يوسف",
    "سعيد",
    "مصطفى",
    "عبد الله",
    "الشريف",
    "المنصور",
    "الحكيم",
    "النجار",
    "الخطيب",
    "البكري",
    "الزهراني",
    "القحطاني",
    "العتيبي",
    "الغامدي",
    "الدوسري",
    "الشمري",
    "المطيري",
    "الحربي",
    "السبيعي",
    "العنزي",
    "الرشيدي",
    "البلوي",
    "الجهني",
    "المالكي",
    "الثبيتي",
    "الزهراء",
    "الفهد",
    "السلمي",
    "الحازمي",
  ],
  editorLanguages: [
    "الإنجليزية",
    "الإسبانية",
    "الفرنسية",
    "البرتغالية",
    "الألمانية",
    "السويدية",
    "النرويجية",
    "الإيطالية",
    "اليونانية",
    "الأيسلندية",
    "البرتغالية",
    "المالطية",
  ],
  editorCountries: [
    "الأرجنتين",
    "البرازيل",
    "كولومبيا",
    "فرنسا",
    "ألمانيا",
    "اليونان",
    "أيسلندا",
    "أيرلندا",
    "إيطاليا",
    "مالطا",
    "البرتغال",
    "النرويج",
    "بيرو",
    "إسبانيا",
    "السويد",
    "المملكة المتحدة",
    "أوروغواي",
    "فنزويلا",
    "بلجيكا",
    "لوكسمبورغ",
  ],
};

const HEBREW: LanguageConfig = {
  localeText: AG_GRID_LOCALE_IL,
  enableRtl: true,
  headers: {
    group: "קבוצה",
    participant: "משתתף",
    name: "שם",
    language: "שפה",
    languageTooltip: "תיאור לדוגמה עבור שפה",
    country: "מדינה",
    gameOfChoice: "משחק מועדף",
    gameName: "שם המשחק",
    bought: "נרכש",
    bankBalance: "יתרת בנק",
    extraInfo1: "מידע נוסף 1",
    extraInfo2: "מידע נוסף 2",
    rating: "דירוג",
    totalWinnings: "סה״כ זכיות",
    monthlyBreakdown: "פירוט חודשי",
  },
  months: [
    "ינואר",
    "פברואר",
    "מרץ",
    "אפריל",
    "מאי",
    "יוני",
    "יולי",
    "אוגוסט",
    "ספטמבר",
    "אוקטובר",
    "נובמבר",
    "דצמבר",
  ],
  contextMenu: {
    customMenuItem: "פריט תפריט מותאם",
  },
  cellContent: {
    abra: "...אברא",
    cadabra: "!כדברא...",
    noStars: "(ללא כוכבים)",
    empty: "(ריק)",
  },
  colNames: [
    "תחנה",
    "רכבת",
    "רחוב",
    "כתובת",
    "צעצוע",
    "קופסה",
    "יצרן ודגם",
    "היום הארוך",
    "הלילה הקצר",
  ],
  countries: [
    { country: "אירלנד", continent: "אירופה", language: "אנגלית" },
    { country: "ספרד", continent: "אירופה", language: "ספרדית" },
    { country: "בריטניה", continent: "אירופה", language: "אנגלית" },
    { country: "צרפת", continent: "אירופה", language: "צרפתית" },
    { country: "גרמניה", continent: "אירופה", language: "גרמנית" },
    { country: "לוקסמבורג", continent: "אירופה", language: "צרפתית" },
    { country: "שוודיה", continent: "אירופה", language: "שוודית" },
    { country: "נורווגיה", continent: "אירופה", language: "נורווגית" },
    { country: "איטליה", continent: "אירופה", language: "איטלקית" },
    { country: "יוון", continent: "אירופה", language: "יוונית" },
    { country: "איסלנד", continent: "אירופה", language: "איסלנדית" },
    { country: "פורטוגל", continent: "אירופה", language: "פורטוגזית" },
    { country: "מלטה", continent: "אירופה", language: "מלטזית" },
    { country: "ברזיל", continent: "דרום אמריקה", language: "פורטוגזית" },
    { country: "ארגנטינה", continent: "דרום אמריקה", language: "ספרדית" },
    { country: "קולומביה", continent: "דרום אמריקה", language: "ספרדית" },
    { country: "פרו", continent: "דרום אמריקה", language: "ספרדית" },
    { country: "ונצואלה", continent: "דרום אמריקה", language: "ספרדית" },
    { country: "אורוגוואי", continent: "דרום אמריקה", language: "ספרדית" },
    { country: "בלגיה", continent: "אירופה", language: "צרפתית" },
  ],
  games: [
    "שחמט",
    "עיגול וצלב",
    "דלדוס",
    "מפולת",
    "דבון",
    "פנורונה",
    "משחק הגנרלים",
    "רוחות",
    "אבלון",
    "אגון",
    "שש-בש",
    "ספינות קרב",
    "מצור",
    "בלאד באול",
    "בול",
    "קמלוט",
    "דמקה",
    "גו",
    "גיפף",
    "נחש מי?",
    "ארנב וכלבים",
    "הקס",
    "היג׳ארה",
    "איזולה",
    "ג׳אנגי (שחמט קוריאני)",
    "משחק המלחמה",
    "פטולי",
    "פלאטו",
    "פונקט",
    "ריתמומכיה",
    "סאהקו",
    "סנט",
    "שוגי",
    "ספייס האלק",
    "סטרטגו",
    "סוגורוקו",
    "טאב",
    "טבלוט",
    "טנטריקס",
    "וארי",
    "שיאנגצ׳י (שחמט סיני)",
    "יינש",
    "זרטץ",
    "קלח",
    "קמיסדו",
    "ליו פו",
    "ערים אבודות",
    "מד גאב",
    "מאסטר מיינד",
    "טחנת תשעה",
    "אובססיה",
    "אותלו",
  ],
  firstNames: [
    "נועה",
    "תמר",
    "שירה",
    "יעל",
    "מיכל",
    "רחל",
    "דנה",
    "אורי",
    "הילה",
    "ליאת",
    "מאיה",
    "רונית",
    "עדי",
    "שרה",
    "אביגיל",
    "מרים",
    "רבקה",
    "לאה",
    "חנה",
    "אסתר",
    "גלית",
    "ענת",
    "טלי",
  ],
  lastNames: [
    "כהן",
    "לוי",
    "מזרחי",
    "פרץ",
    "ביטון",
    "דהן",
    "אברהם",
    "פרידמן",
    "שפירא",
    "גולדברג",
    "רוזנברג",
    "ברקוביץ",
    "אלון",
    "שלום",
    "יוסף",
    "דוד",
    "חיים",
    "גבאי",
    "אזולאי",
    "מלכה",
    "אוחיון",
    "שמעון",
    "בנימין",
    "אליהו",
    "מרדכי",
    "גרינברג",
    "הרשקוביץ",
    "שטרנברג",
    "ויינשטיין",
    "זילברמן",
    "קפלן",
    "ברנשטיין",
    "רוזנטל",
    "גולדשטיין",
    "הלפרין",
    "ליבוביץ",
    "פינקלשטיין",
  ],
  editorLanguages: [
    "אנגלית",
    "ספרדית",
    "צרפתית",
    "פורטוגזית",
    "גרמנית",
    "שוודית",
    "נורווגית",
    "איטלקית",
    "יוונית",
    "איסלנדית",
    "פורטוגזית",
    "מלטזית",
  ],
  editorCountries: [
    "ארגנטינה",
    "ברזיל",
    "קולומביה",
    "צרפת",
    "גרמניה",
    "יוון",
    "איסלנד",
    "אירלנד",
    "איטליה",
    "מלטה",
    "פורטוגל",
    "נורווגיה",
    "פרו",
    "ספרד",
    "שוודיה",
    "בריטניה",
    "אורוגוואי",
    "ונצואלה",
    "בלגיה",
    "לוקסמבורג",
  ],
};

export const LANGUAGES: Record<string, LanguageConfig> = {
  english: ENGLISH,
  arabic: ARABIC,
  hebrew: HEBREW,
};

// Flag lookup keyed by the English country name. Placed on `gridOptions.context` so every framework's
// CountryCellRenderer reads it identically. Flags therefore resolve in English mode; the localised
// Arabic/Hebrew country names have no entry, so the renderer shows the name without a flag.
export const COUNTRY_CODES: Record<string, string> = {
  Ireland: "ie",
  Luxembourg: "lu",
  Belgium: "be",
  Spain: "es",
  "United Kingdom": "gb",
  France: "fr",
  Germany: "de",
  Sweden: "se",
  Italy: "it",
  Greece: "gr",
  Iceland: "is",
  Portugal: "pt",
  Malta: "mt",
  Norway: "no",
  Brazil: "br",
  Argentina: "ar",
  Colombia: "co",
  Peru: "pe",
  Venezuela: "ve",
  Uruguay: "uy",
};

const BOOLEAN_VALUES = [true, "true", false, "false"];

// Builds the example's row data for a language synchronously. Shared by every framework variant so the
// grids render identical data; the deterministic pseudo-random seed is reset on each call.
export function createRowData(languageKey: string): any[] {
  const lang = LANGUAGES[languageKey];
  const rowCount = 100;

  let seed = 123456789;
  const m = Math.pow(2, 32);
  const a = 1103515245;
  const c = 12345;
  const pseudoRandom = () => {
    seed = (a * seed + c) % m;
    return seed / m;
  };

  const data: any[] = [];
  for (let row = 0; row < rowCount; row++) {
    const rowItem: any = {};

    const countries = lang.countries;
    const countriesToPickFrom = Math.floor(
      countries.length * (((row % 3) + 1) / 3),
    );
    const countryData = countries[(row * 19) % countriesToPickFrom];
    rowItem.country = countryData.country;
    rowItem.continent = countryData.continent;
    rowItem.language = countryData.language;

    const firstName = lang.firstNames[row % lang.firstNames.length];
    const lastName = lang.lastNames[row % lang.lastNames.length];
    rowItem.name = firstName + " " + lastName;

    rowItem.game = {
      name: lang.games[Math.floor(((row * 13) / 17) * 19) % lang.games.length],
      bought: BOOLEAN_VALUES[row % BOOLEAN_VALUES.length],
    };

    rowItem.bankBalance = Math.round(pseudoRandom() * 10000000) / 100 - 3000;
    rowItem.rating = Math.round(pseudoRandom() * 5);

    let totalWinnings = 0;
    for (let i = 0, len = lang.months.length; i < len; ++i) {
      const value = Math.round(pseudoRandom() * 10000000) / 100 - 20;
      rowItem["month_" + i] = value;
      totalWinnings += value;
    }
    rowItem.totalWinnings = totalWinnings;

    data.push(rowItem);
  }

  return data;
}

import '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

if (new URLSearchParams(window.location.search).get('prod') !== 'false') {
    enableProdMode();
}

const app = bootstrapApplication(AppComponent, {
    providers: [provideHttpClient()],
});