feat(aggrid): init aggrid theming

package.json

@@ -8,7 +8,8 @@
     "build:core": "nx run core:build",
     "build:wrapper": "nx run-many --target=build --projects=react,angular",
     "build:test-apps": "nx run-many --target=build --projects=angular-test-app,react-test-app",
-    "build:lib": "npm run build:core && npm run build:wrapper",
+    "build:aggrid": "nx run aggrid:build",
+    "build:lib": "npm run build:core && npm run build:wrapper && npm run build:aggrid",
     "build:docs": "nx run documentation:build",
     "generate-documentation-version": "nx run documentation:generate-version",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
@@ -38,7 +39,12 @@
     "typescript": "~4.7.2"
   },
   "workspaces": [
-    "packages/*"
+    "packages/core",
+    "packages/react",
+    "packages/react-test-app",
+    "packages/angular",
+    "packages/angular-test-app",
+    "packages/aggrid"
   ],
   "config": {
     "commitizen": {

packages/aggrid/.editorconfig

@@ -0,0 +1,15 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

packages/aggrid/.gitignore

@@ -0,0 +1,26 @@
+dist/
+www/
+loader/
+
+*~
+*.sw[mnpcod]
+*.log
+*.lock
+*.tmp
+*.tmp.*
+log.txt
+*.sublime-project
+*.sublime-workspace
+
+.stencil/
+.idea/
+.vscode/
+.sass-cache/
+.versions/
+node_modules/
+$RECYCLE.BIN/
+
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
+.env

packages/aggrid/.prettierrc.json

@@ -0,0 +1,13 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "quoteProps": "consistent",
+  "printWidth": 180,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
+}

packages/aggrid/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/aggrid/package.json

@@ -1,13 +1,43 @@
 {
   "name": "@siemens/ix-aggrid",
-  "version": "0.0.0",
+  "version": "0.0.1",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "es2015": "dist/esm/index.mjs",
+  "es2017": "dist/esm/index.mjs",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/aggrid/aggrid.esm.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ionic-team/stencil-component-starter.git"
+  },
+  "files": [
+    "dist/",
+    "loader/"
+  ],
   "scripts": {
-    "test": "node index.js"
+    "build": "stencil build --docs",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil test --spec --e2e",
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "generate": "stencil generate"
+  },
+  "dependencies": {
+    "@stencil/core": "^2.13.0"
   },
   "devDependencies": {
-    "ag-grid-community": "^28.0.2"
+    "@types/jest": "^27.0.3",
+    "jest": "^27.4.5",
+    "jest-cli": "^27.4.5",
+    "puppeteer": "^10.0.0",
+    "ag-grid-community": "^28.0.2",
+    "@stencil/sass": "~1.5.2"
   },
   "peerDependencies": {
-    "ag-grid-community": "^28.0.2"
-  }
+    "ag-grid-community": "^28.0.2",
+    "@siemens/ix": "^0.0.0"
+  },
+  "license": "MIT"
 }

packages/aggrid/readme.md

@@ -0,0 +1,75 @@
+![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
+
+# Stencil Component Starter
+
+This is a starter project for building a standalone Web Component using Stencil.
+
+Stencil is also great for building entire apps. For that, use the [stencil-app-starter](https://github.com/ionic-team/stencil-app-starter) instead.
+
+# Stencil
+
+Stencil is a compiler for building fast web apps using Web Components.
+
+Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool.  Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
+
+Stencil components are just Web Components, so they work in any major framework or with no framework at all.
+
+## Getting Started
+
+To start building a new web component using Stencil, clone this repo to a new directory:
+
+```bash
+git clone https://github.com/ionic-team/stencil-component-starter.git my-component
+cd my-component
+git remote rm origin
+```
+
+and run:
+
+```bash
+npm install
+npm start
+```
+
+To build the component for production, run:
+
+```bash
+npm run build
+```
+
+To run the unit tests for the components, run:
+
+```bash
+npm test
+```
+
+Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
+
+
+## Naming Components
+
+When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: `<stencil-datepicker>`). This is because the generated component has little to nothing to do with Stencil; it's just a web component!
+
+Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic generated web components use the prefix `ion`.
+
+
+## Using this component
+
+There are three strategies we recommend for using web components built with Stencil.
+
+The first step for all three of these strategies is to [publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages).
+
+### Script tag
+
+- Put a script tag similar to this `<script type='module' src='https://unpkg.com/my-component@0.0.1/dist/my-component.esm.js'></script>` in the head of your index.html
+- Then you can use the element anywhere in your template, JSX, html etc
+
+### Node Modules
+- Run `npm install my-component --save`
+- Put a script tag similar to this `<script type='module' src='node_modules/my-component/dist/my-component.esm.js'></script>` in the head of your index.html
+- Then you can use the element anywhere in your template, JSX, html etc
+
+### In a stencil-starter app
+- Run `npm install my-component --save`
+- Add an import to the npm packages `import my-component;`
+- Then you can use the element anywhere in your template, JSX, html etc

packages/aggrid/scss/ix-aggrid.scss

@@ -0,0 +1,96 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
+ */
+[class*='ag-theme-ix'] {
+  --ag-background-color: transparent;
+  --ag-header-background-color: transparent;
+  --ag-odd-row-background-color: transparent;
+  --ag-row-hover-color: var(--theme-table-data-row--background--hover);
+  --ag-selected-row-background-color: var(--theme-table-data-row--background--selected);
+
+  --ag-range-selection-background-color: var(--theme-table-data-row--background--selected);
+  --ag-range-selection-border-color: var(--theme-color-input--focus);
+  --ag-header-column-resize-handle-color: var(--theme-table-header-splitter--background);
+  --ag-header-column-resize-handle-height: 100%;
+  --ag-header-column-resize-handle-width: 1px;
+
+  --ag-input-focus-box-shadow: none;
+
+  --ag-checkbox-checked-color: var(--theme-color-input--focus);
+
+  .ag-root-wrapper {
+    border: none;
+  }
+
+  .ag-filter {
+    background-color: var(--ag-control-panel-background-color);
+  }
+
+  .ag-select-list {
+    background-color: var(--ag-control-panel-background-color);
+    font-family: Siemens Sans;
+    font-size: 14px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.43;
+    letter-spacing: normal;
+  }
+
+  .ag-header-cell .ag-header-cell-resize::after {
+    background-color: transparent;
+  }
+
+  .ag-header-active .ag-header-cell-resize::after {
+    background-color: var(--ag-header-column-resize-handle-color);
+  }
+
+  .ag-icon {
+    color: var(--theme-table-header-sort--color);
+  }
+
+  .ag-header-cell-resize::after {
+    transition: background-color 250ms linear;
+  }
+
+  .ag-header-cell-resize:hover::after {
+    background-color: var(--theme-table-header-splitter--background--hover);
+  }
+
+  .ag-row-focus::before {
+    border: 1px solid var(--theme-color-input--focus);
+  }
+
+  .ag-row-hover:active {
+    background-color: var(--theme-table-data-row--background--active);
+  }
+
+  .ag-row-hover.ag-row-selected {
+    background-color: var(--theme-table-data-row--background--selected-hover);
+  }
+
+  .ag-row-hover.ag-row-selected:active {
+    background-color: var(--theme-table-data-row--background--selected-active);
+  }
+
+  .ag-header-cell {
+    font-family: Siemens Sans;
+    font-size: 14px;
+    font-weight: bold;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.43;
+    letter-spacing: normal;
+    color: var(--theme-table-header-cell--color);
+  }
+
+  .ag-cell {
+    font-family: Siemens Sans;
+    font-size: 14px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    letter-spacing: normal;
+    color: var(--theme-table-data-cell--color);
+  }
+}

packages/aggrid/src/components.d.ts

@@ -0,0 +1,53 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+import { GridOptions } from "ag-grid-community";
+export namespace Components {
+    interface IxAgGrid {
+        "gridOptions": GridOptions;
+    }
+    interface MyComponent {
+    }
+}
+declare global {
+    interface HTMLIxAgGridElement extends Components.IxAgGrid, HTMLStencilElement {
+    }
+    var HTMLIxAgGridElement: {
+        prototype: HTMLIxAgGridElement;
+        new (): HTMLIxAgGridElement;
+    };
+    interface HTMLMyComponentElement extends Components.MyComponent, HTMLStencilElement {
+    }
+    var HTMLMyComponentElement: {
+        prototype: HTMLMyComponentElement;
+        new (): HTMLMyComponentElement;
+    };
+    interface HTMLElementTagNameMap {
+        "ix-ag-grid": HTMLIxAgGridElement;
+        "my-component": HTMLMyComponentElement;
+    }
+}
+declare namespace LocalJSX {
+    interface IxAgGrid {
+        "gridOptions"?: GridOptions;
+    }
+    interface MyComponent {
+    }
+    interface IntrinsicElements {
+        "ix-ag-grid": IxAgGrid;
+        "my-component": MyComponent;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "ix-ag-grid": LocalJSX.IxAgGrid & JSXBase.HTMLAttributes<HTMLIxAgGridElement>;
+            "my-component": LocalJSX.MyComponent & JSXBase.HTMLAttributes<HTMLMyComponentElement>;
+        }
+    }
+}