From 8746866c4379ebb812b1a38d47f2805f15c65fe7 Mon Sep 17 00:00:00 2001
From: Maximilian Koeller <maximilian.koeller@siemens.com>
Date: Tue, 1 Oct 2024 15:39:43 +0200
Subject: [PATCH] refactor: remove useless vendor prefix

Those prefixes are no longer need as transform and translate are widely available:
See: https://caniuse.com/?search=css-transform

BREAKING CHANGE: Vendor prefixes are no longer
applied for css `transform`. The related helpers
are removed from the public api.
---
 .../lib/components/body/body-row.component.ts |  1 -
 .../src/lib/components/body/body.component.ts |  7 +--
 .../lib/components/header/header.component.ts |  3 +-
 .../ngx-datatable/src/lib/utils/prefixes.ts   | 48 -------------------
 .../ngx-datatable/src/lib/utils/translate.ts  | 29 -----------
 projects/ngx-datatable/src/public-api.ts      |  2 -
 6 files changed, 3 insertions(+), 87 deletions(-)
 delete mode 100644 projects/ngx-datatable/src/lib/utils/prefixes.ts
 delete mode 100644 projects/ngx-datatable/src/lib/utils/translate.ts

diff --git a/projects/ngx-datatable/src/lib/components/body/body-row.component.ts b/projects/ngx-datatable/src/lib/components/body/body-row.component.ts
index 7744abca7..4d33b1bb5 100644
--- a/projects/ngx-datatable/src/lib/components/body/body-row.component.ts
+++ b/projects/ngx-datatable/src/lib/components/body/body-row.component.ts
@@ -19,7 +19,6 @@ import {
 import { columnGroupWidths, columnsByPin, columnsByPinArr } from '../../utils/column';
 import { Keys } from '../../utils/keys';
 import { ScrollbarHelper } from '../../services/scrollbar-helper.service';
-import { translateXY } from '../../utils/translate';
 import { BehaviorSubject } from 'rxjs';
 import { ActivateEvent, RowOrGroup, TreeStatus } from '../../types/public.types';
 import { NgStyle } from '@angular/common';
diff --git a/projects/ngx-datatable/src/lib/components/body/body.component.ts b/projects/ngx-datatable/src/lib/components/body/body.component.ts
index deba66143..38bc93dc9 100644
--- a/projects/ngx-datatable/src/lib/components/body/body.component.ts
+++ b/projects/ngx-datatable/src/lib/components/body/body.component.ts
@@ -18,7 +18,6 @@ import {
 import { ScrollerComponent } from './scroller.component';
 import { columnGroupWidths, columnsByPin } from '../../utils/column';
 import { RowHeightCache } from '../../utils/row-height-cache';
-import { translateXY } from '../../utils/translate';
 import { NgStyle } from '@angular/common';
 import { TableColumn } from '../../types/table-column.type';
 import { DatatableGroupHeaderDirective } from './body-group-header.directive';
@@ -740,9 +739,7 @@ export class DataTableBodyComponent<TRow extends { treeStatus?: TreeStatus } = a
         // const pos = idx * rowHeight;
         // The position of this row would be the sum of all row heights
         // until the previous row position.
-        const pos = this.rowHeightsCache().query(idx - 1);
-
-        Object.assign(styles, translateXY(0, pos));
+        styles.transform = `translateY(${this.rowHeightsCache().query(idx - 1)}px)`;
       }
       rowsStyles.push(styles);
     });
@@ -765,7 +762,7 @@ export class DataTableBodyComponent<TRow extends { treeStatus?: TreeStatus } = a
 
     const pos = this.rowHeightsCache().query(this.rows.length - 1);
     return {
-      ...translateXY(0, pos),
+      transform: `translateY(${pos}px)`,
       position: 'absolute'
     };
   });
diff --git a/projects/ngx-datatable/src/lib/components/header/header.component.ts b/projects/ngx-datatable/src/lib/components/header/header.component.ts
index 0b269df18..651b631f1 100644
--- a/projects/ngx-datatable/src/lib/components/header/header.component.ts
+++ b/projects/ngx-datatable/src/lib/components/header/header.component.ts
@@ -31,7 +31,6 @@ import {
   PinnedColumns,
   TargetChangedEvent
 } from '../../types/internal.types';
-import { translateXY } from '../../utils/translate';
 
 @Component({
   selector: 'datatable-header',
@@ -360,7 +359,7 @@ export class DataTableHeaderComponent implements OnDestroy, OnChanges {
 
     if (group === 'center') {
       return {
-        ...translateXY(this.offsetX * -1, 0),
+        transform: `translateX(${this.offsetX * -1}px)`,
         width: `${widths[group]}px`,
         willChange: 'transform'
       };
diff --git a/projects/ngx-datatable/src/lib/utils/prefixes.ts b/projects/ngx-datatable/src/lib/utils/prefixes.ts
deleted file mode 100644
index 123e53d2f..000000000
--- a/projects/ngx-datatable/src/lib/utils/prefixes.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { camelCase } from './camel-case';
-
-const cache = {};
-const testStyle = typeof document !== 'undefined' ? document.createElement('div').style : undefined;
-
-// Get Prefix
-// http://davidwalsh.name/vendor-prefix
-const prefix = (function () {
-  const styles =
-    typeof window !== 'undefined'
-      ? window.getComputedStyle(document.documentElement, '')
-      : undefined;
-  const match =
-    typeof styles !== 'undefined'
-      ? Array.prototype.slice
-          .call(styles)
-          .join('')
-          .match(/-(moz|webkit|ms)-/)
-      : null;
-  const pre = match !== null ? match[1] : undefined;
-  const dom =
-    typeof pre !== 'undefined'
-      ? 'WebKit|Moz|MS|O'.match(new RegExp('(' + pre + ')', 'i'))[1]
-      : undefined;
-
-  return dom
-    ? {
-        dom,
-        lowercase: pre,
-        css: `-${pre}-`,
-        js: pre[0].toUpperCase() + pre.substr(1)
-      }
-    : undefined;
-})();
-
-export function getVendorPrefixedName(property: string) {
-  const name = camelCase(property);
-
-  if (!cache[name]) {
-    if (testStyle[property] !== undefined) {
-      cache[name] = property;
-    } else if (prefix !== undefined && testStyle[prefix.css + property] !== undefined) {
-      cache[name] = prefix.css + property;
-    }
-  }
-
-  return cache[name];
-}
diff --git a/projects/ngx-datatable/src/lib/utils/translate.ts b/projects/ngx-datatable/src/lib/utils/translate.ts
deleted file mode 100644
index 839c47539..000000000
--- a/projects/ngx-datatable/src/lib/utils/translate.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { getVendorPrefixedName } from './prefixes';
-import { camelCase } from './camel-case';
-
-// browser detection and prefixing tools
-const transform = typeof window !== 'undefined' ? getVendorPrefixedName('transform') : undefined;
-const hasCSSTransforms =
-  typeof window !== 'undefined' ? !!getVendorPrefixedName('transform') : undefined;
-const hasCSS3DTransforms =
-  typeof window !== 'undefined' ? !!getVendorPrefixedName('perspective') : undefined;
-const ua = typeof window !== 'undefined' ? window.navigator.userAgent : 'Chrome';
-const isSafari = /Safari\//.test(ua) && !/Chrome\//.test(ua);
-
-export function translateXY(x: number, y: number): Record<string, string> {
-  if (typeof transform !== 'undefined' && hasCSSTransforms) {
-    if (!isSafari && hasCSS3DTransforms) {
-      return {
-        transform: `translate3d(${x}px, ${y}px, 0)`,
-        backfaceVisibility: 'hidden'
-      };
-    } else {
-      return { [camelCase(transform)]: `translate(${x}px, ${y}px)` };
-    }
-  } else {
-    return {
-      top: `${y}px`,
-      left: `${x}px`
-    };
-  }
-}
diff --git a/projects/ngx-datatable/src/public-api.ts b/projects/ngx-datatable/src/public-api.ts
index 0c532ac6d..d46426615 100644
--- a/projects/ngx-datatable/src/public-api.ts
+++ b/projects/ngx-datatable/src/public-api.ts
@@ -54,9 +54,7 @@ export * from './lib/utils/column-prop-getters';
 export * from './lib/utils/camel-case';
 export * from './lib/utils/keys';
 export * from './lib/utils/math';
-export * from './lib/utils/prefixes';
 export * from './lib/utils/selection';
-export * from './lib/utils/translate';
 export * from './lib/utils/throttle';
 export * from './lib/utils/sort';
 export * from './lib/utils/row-height-cache';